How to speed up your website

Have you ever been aggravated when a website takes awfully long time to load? I am sure one time or the other we all had to sit and wait for a website to load that is slower than a snail walking on the back of a turtle.

Due to my personal experience dealing with slow websites I made a commitment to myself to create websites that load fast (usually under 1-2 seconds). I will be listing a few tips and tricks that I follow on how to create websites that load faster.

Optimize Images

Have you ever been to a website with tons of images and realized that the website is slow? Yes, those ones. I can’t stress this enough, high quality un-optimized images can kill your website’s performance. High quality means high file size, which takes longer to download and it’s pretty self-explanatory. Don’t get me wrong, I am not saying NOT to use high quality images. You can still use them but if you optimize them and reduce the dimensions of the image to what is necessary then you will get a smaller file size.

For example, if you are trying to put a profile picture of you on your website and happened to take that picture on your iPhone that is 1080x1920 dimensions. However, you know that the size of your profile picture will not go beyond 360px, so using the picture at its original dimension is overkill.

I took the following picture of a dead cactus that has been sitting on my desk for over a year using my Galaxy S6 and it is 2.6 MB at full resolution of 2988x5312.

Then resizing it to 320x569 (proportionally) resulted in 55.1 KB. Can you see the difference? That is almost 2.5 MB decrease!!! And that is just with resizing.

If you optimize it using a third party tool (I use tinypng.com for quick optimizations and they result in awesome quality) then the result is even better. See the difference yourself:

As you can see the difference above, optimizing and resizing go hand-in-hand. You might be wondering why you need to optimize the image if you resize it, since I only saved about 10 KB.

Here is why: Let’s add some effect to the picture in Photoshop and save it as a high quality image. Oftentimes when you find images online you will most likely run into high quality un-optimized images like below (you probably won’t be looking for a dead cactus). Then optimizing the image will result in better outcome.

See the results yourself:

Optimizing images will save you a lot of space if the original image is high quality, as you saw above. Also, note that the higher the dimension of an image the higher the file size, naturally. Therefore, optimizing a high quality image and reducing the image dimensions to what is needed will improve the performance significantly. Try it out and see if it for yourself.

Scripts

As a rule of thumb, be sure to always put any JavaScript files at the bottom of the page to ensure that your HTML content loads first. Have you ever gone to a website and see a blank screen displayed for a few seconds? Loading JavaScript files in the head section can cause that behavior to happen. If you have to put the scripts in the head section then consider using the async/defer attributes.

Word of caution when using async/defer: Loading scripts asynchronously via the async tag DOES NOT guarantee that the script will be loaded in the order as it appears. Therefore, only use async when the script does not depend on any other script file that is being loaded (for ex. jQuery plugins). Use defer in those cases: Defer causes the browser to parse the JS file after the HTML content has been loaded.

Avoid using scripts that are not used: I don’t know how many websites that I have seen that use scripts that are not used in that page. A common mistake, that can occur when using a template or plugin that is no longer in use, pay attention to those and remove them to save your website some extra bytes. It not only takes up unnecessary space but also slows your site down if they are being loaded and used by the DOM.

Caching

I am not talking about the server caching (although server caching could be important but that might not be readily available out of the box all the time) but I am mainly referring to caching in the browser.

One way to leverage browser caching is by using expiry headers. Depending on how frequent you would like a resource to be updated, you would set appropriate expiry headers so your browser can cache a particular (type of) resource for a specified amount of time before it is requested again. Leveraging browser caching will ensure that the browser does not ALWAYS request the resource to be downloaded every time a certain page, that the resource is being used, is loaded. That is ONE of the reasons that a page loads faster the second time you visit the same page.

For example, if you know for sure that images on your website will ONLY be updated once every month then setting an expiry header of 1 month for all image types (jpeg, png, etc.) in your htaccess or config file will let browsers cache all images for up to 1 month. Here is an example:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 1 month”
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/ico “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType video/x-flv “access plus 1 year”
ExpiresByType application/pdf “access plus 1 year”
ExpiresByType application/x-shockwave-flash “access plus 1 year”
ExpiresByType application/javascript “access plus 1 month”
ExpiresByType text/javascript “access plus 1 month”
ExpiresByType text/css “access plus 1 month”
</IfModule>

Gzip Compression

Gzip compression is a technique used by your server to compress certain resources so that their response size is smaller than what it would normally. It is very effective at reducing the response sizes and you should always use this feature if available. It is as easy as specifying the following in your htaccess:

<IfModule mod_deflate.c>
# Compress css, plaintext, xml, gif, pdf and images in transport.
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml image/gif image/jpeg image/png text/javascript application/javascript application/pdf application/json application/pdf
</IfModule>

Avoid query strings

When you are developing a website, query strings comes in handy to avoid browser caching, which is OK, but when you go live you should avoid using query strings. Yes, I am talking about the resource links with ? in them. If you specify query strings for resources, that you would like cached, then it will not have any effect on it. Resources specified with query strings are not cached by browsers so you should remove them when going live.

Minify

Having those long comments in your JS files or even HTML/CSS files will surely increase the page size. Even using long variable names will add some additional page size as well. You should consider minifying CSS/JS files when going live. Here are some compressors that I use to compress my CSS/JS files:

JS

CSS

HTML

CDN

CDN (aka, Content Delivery Network) is essentially a collection of networks distributed geographically across the globe. If you put all of your resources (sometimes even the entire website) within a CDN then it will make the resource look ups easier (by easier I mean faster) based on the distance between your end-user’s computer and the CDN node location (the closest location of a CDN resource container).

For example, if your webserver is located in Boston then if you try to access the website from Boston then you will get a faster response. On the other hand, if a user from California tries to access the same resource then the response time will be slower because the request has to travel from Boston to California and then the response from California to Boston. However, if you use a CDN then these problems can be eliminated because a good CDN network would have multiple CDN nodes all over the globe ensuring the same relative speed for all users (Please note that different factors such as the internal network latency, network speed, etc. might change these results). There are several CDNs out there such as:

Tools

I have compiled a list of tools below that you can use to test the speed of your website and see where the bottleneck is:

Comment(s)

Best Assignment Experts customers are highly satisfied with our services and therefore have rated us in the academic expert reviews to be the best among all the other academic content creators. Through our highly skilled professionals we provide our customers with the best quality Online assignment writing.

Reply

  • Zdam09
  • 12:01AM / Jul 21, 2021

Thank you for this fantastic guide; I learned a lot from it. Perhaps you could post more guides like this one here so that everyone can see it, and I’m sure many people would find it very useful. And because of that, let me share you here free games you can download online for free. These games are Toon Blast and Empires and Allies, you can share it with your family and friends if you want to enjoy these games more. Have fun.

Reply

Wow its a very good post. The information provided by you is really very good and helpful for me. Keep sharing good information.I bookmark your blog because I found very good information on your blog Neo Coat

Reply

  • Aarone jose
  • 07:32AM / Jun 15, 2022

It is the study of the internal structure of the Earth.Top gun 2 tom cruise jacket

Reply

The World Health Organization has called for state run relationship to stop tobacco lifting to get youngsters far from taking up smoking.Jamie Dutton Yellowstone Brown Leather Jacket

Reply

If you’re looking for affordable SEO backlink building services, look no further than Astrida Solutions. We offer a variety of packages to suit your needs and budget, so you can get the most out of your online marketing efforts. Contact us today to learn more about our services and how we can help you grow your business. local seo price

Reply

I will check out again for more top-quality web content and additionally, recommend this website to all. Many thanks!

Reply

I will check out again for more top-quality web content and additionally, recommend this website to all. Many thanks!

Reply

  • markspencer
  • 04:39AM / Sep 05, 2022

You’re so cool! I dont suppose I’ve read anything this way prior. So nice to find somebody with a few original applications for grants on this subject. realy we appreciate you beginning this up. this website write my assignment is one area that is required over the internet, somebody if we do originality. useful purpose of bringing something new to the net!

Reply

nice post

Reply

  • MJanes
  • 04:19AM / Sep 22, 2022

Rated the best roofers in Bowling Green, KY. Bowling Green Roofer

Reply

  • Mica
  • 10:09PM / Sep 25, 2022

OVER 35 YEARS OF SERVING THE BEST HOMEMADE JAMAICAN RESTAURANT FOOD IN THE BRONX AND BEYOND! Jamaican food Bronx

Reply

  • Janes
  • 03:56AM / Sep 29, 2022

Based in Sydney, Home Technology Integration is an Australian owned and run company delivering a wide scope of Home Automation Installations. smart home

Reply

thank you for awesome post.
Get your men’s bomber leather jacket for sale online at best possible price. Now buy best leather bomber jackets for men and get discount along with 30 days return policy.

Reply

  • mymro
  • 04:32AM / Nov 02, 2022

MyMRO is a specialized and leading brand for supplying construction and agriculture machinery parts for customers worldwide, along with the belief of standing on large variety, fast delivery, OEM quality, and the lowest price.  At MyMRO, we always have what you need, always at low prices. We are proud of our delivery, specialist service, quality, and pricing that always meets and exceeds our customers’ expectations.
In addition to Relay 3011ccr1u0112vdc, you can also buy other models or other parts of Excavators, Forklift, Aerial Work Platforms AWP on our website.

Reply

Interesting article; many thanks for sharing it. We sell leather jackets and coats online. Free shipping is available to all countries.mens & womens leather jacket.

Reply

thanks for sharing great post.

Reply

Leave a Comment


Enter the text you see in the image in the form field above.
If you cannot read the text, refresh the page.
* required fields