This post provides a list of most common optimization techniques that can be used to speed up the website, hence resulting in a fast loading web page. The faster loading pages have an impact on search engine ranking, hence must be considered as part of the web development process.
Image Optimization Techniques
Images play a major role in almost all websites. The good looking images bring life to a web page if used properly. At the same time, the images contribute to the network overhead since these add size drastically to the overall page size impacting the page load time. Below listed are the ways to effectively use images on a web page.
Compress using Image Editors - Photoshop is the most popular and widely accepted Image Editor used by almost all the designers. You can follow this tutorial to compress images using Photoshop and this tutorial to compress using GIMP.
Defer the Image - Defer the image loading following appropriate technique suitable and possible in your scenario. We can defer the loading of image and download and show it only when the part of the webpage is visible for the first time. This will definitely improve the web page performance since we do lazy loading of images only when required.
<!-- SEO Friendly - Lazy Loading -->
<img class="img-lazy" data-src="image-1.jpg" src="image-dummy-1.jpg">
<!-- Load original in absense of JS -->
<noscript><img src="myImg.jpg" /></noscript>
Combine Images - We can also combine images accessed by the CSS and use the image maps to show the part of the image. This will reduce the total requests count, resulting in low network overhead.
Using standard CDN services like Cloudflare and CloudFront drastically improve the website performance by serving the static content from the closest Edge server, hence reducing Network overhead and also enhance server performance. Once the CDN service cache the static assets based on the defined rules, the actual file will be transferred from the CDN Edge server instead of the web server.
Minimize HTTP Request
Caching can take place at both Server side and Client side to optimize the web page. The server-side caching can generate the web page and cache it for further requests. The server-side cache can improve the overall performance of the web page by reducing the CPU usage and database queries.
The client-side cache works according to the caching rules specified by the web server. Accordingly, the browsers can maintain a local cache and use the cached resources instead of getting it multiple times from the server.
Use Expires Header where possible for effective client-side caching.
Add gzip Compression on the server side where possible to reduce the overall size of static resource transferred over the network. We can compress the HTML and CSS files with Gzip Compression to save around approx 50% of the size transferred over the network.
HTTP Keep-Alive Headers
Enable the HTTP Keep-Alive Headers with limitations to serve multiple requests over the same connection. Though it's an effective way to keep network overhead low, use with precautions in a limited way.
Avoid using HTTP redirects or try to keep them as much low as possible. We might need old links in certain situations in order to maintain them without affecting the SEO and links used by other sites, but these must be minimized where possible. Using too many redirects reduce the overall speed of the website.
Protect your website static resources especially images to be hot-linked by other websites. The hotlinks embed the images from your server to other websites which consume the server bandwidth, hence brings additional network bandwidth consumption by other websites.
We might be using several 3rd-party services or integrations with the main website. We can defer loading the resources from these solutions and load them only when required instead of loading them all at the start.
Remove 404 Errors
The 404 errors keep the browser blocking for some time in order to get the resources which are actually not there resulting in 404 error.
Good Hosting Provider
Sometimes, a bad server provided by the hosting provider results in a slow website. We might consider using a better hosting provider or use a dedicated server from well-known providers where possible to generate the web pages faster.
It is a must-have activity for websites heavily dependent on the database to generate web pages. Inefficient queries keep database busy in finding out the results, hence adds additional time to serve the requests. The most common approach to avoid it to use proper indexes so that the database find the required data in less time.
Use Prefetching Techniques
Use prefetching techniques to pre-load the resources before the user triggers it by analyzing resource utilization. The common prefetching techniques are as listed below.
DNS Prefetching - Resolve the domain name into IP address in advance.
Link Prefetching - It can be used when the user is onto a pre-defined page flow. The most common example is the checkout process of an online shopping cart.
Prerendering - Keep the page ready in advance.