Web performance & techniques to improve it

Web performance & techniques to improve it

In today’s digital world, everything comes down to speed. It doesn’t matter if you have the most complex and good-looking site, if it takes forever to load the user won't be using it much.

Websites that are faster will have lower bounce rates, higher conversion rates, and higher ranking in organic search, and they will have an overall better user experience which will lead to better user retention and sales.

What Affects Site Speed

There are several reasons why a site load time might be lagging. Some of the common factors are:

  • Heavy CSS and JavaScript use

  • Poor server/hosting plan

  • Large image sizes

  • Not using browser cache

  • Too many widgets and plugins

  • Hotlinking images and other resources from slow servers

  • Traffic volume

  • Older browsers

  • Slow network connection (mobile devices)

Best Practices to Speed Up Your Website

1. Reduce the Number of HTTP Requests

HTTP requests are used by the web browser to fetch different parts of the page, like images, stylesheets, and scripts from a web server. Each request, especially using HTTP/1.1, will have some overhead in establishing the connection between the browser and the remote web server.

Browsers usually have a limit on the number of parallel network requests, so if there are many requests queued up, some of them will be blocked if the queue is too long.

The first step should be to eliminate requests that are simply unnecessary. Remove any unnecessary images, JavaScript files, stylesheets, fonts, etc.

Now that you have trimmed everything, the next step is to optimize the rest. Look into compressing your CSS and JavaScript files. Optimized websites often load all the required CSS and JavasScript in a single request for each.

2. Switch to HTTP/2

You could switch your website to HTTP/2. The details on how to do this will depend on the hosting provider you use.

HTTP/2 has several advantages over HTTP/1.1. Among them is the ability to send multiple files at the same time, over the same connection. This avoids the overhead of multiple requests and reduces the load time of the website significantly.

3. Optimize Image Sizes

Many websites use graphics heavily. If the images are not compressed, or if the images are of too high resolution it will slow down the website’s performance.

For example, websites sometimes use images with 2x or even 3x resolution so they are displayed well on high-density displays such as retina screens. But if the users are not using a HiDP display, then you are just wasting bandwidth and increasing the load time for your visitors, especially if they are on slow mobile data connections.

One solution for this can be, to use multiple image sizes which will allow the browser to select the appropriate image based on screen resolution.

Make sure that you use the correct file type too! Use JPEG for images which have lots of colours (e.g., photos), and use PNG for simpler graphics.

4. Use a Content Delivery Network (CDN)

CDNs use geographically distributed servers. What this means is that the server closest to your visitor will be serving the files. So the load time will be the same, regardless of where the user is connecting.

CDNs will optimize the delivery of static files such as CSS, images, fonts, and JavaScript to your visitors. Setting them up is usually very simple.

5. Minify and Combine CSS, JavaScript, and HTML Files

You should try to load both JS and CSS in a single request for each. This is accomplished by minifying and combining separate JS and CSS files into single bundles.

Browsers have a limit on parallel network requests so if your website needs 3 requests in total to load, it will be most likely faster than if it had to load 30 different resources. Developers can use tools like webpack so that they can use multiple files while developing the website and have the performance benefit of a single bundle when deploying to production.

Minification is the process of optimizing the size of JavaScript and CSS files by removing or shortening symbols in the source code. The output is not entirely human-readable, but browsers don’t have a problem reading it though, and the smaller file sizes will be faster to load.

What most optimized websites end up doing is first minifying JavaScript and CSS files and then combining them into single bundles.

6. Minimize Time to First Byte

Time to first byte, or TTFB, is the time it takes for the browser to receive the first byte of data from the server. This is therefore a server-side concern but it plays an important role in the overall performance of your website.

The main factor under your control when it comes to TTFB is the server processing time. Therefore you can try some of the tips recommended by Google to improve TTFB:

  • Optimize the server’s application logic to prepare pages faster. If you use a server framework, the framework may have recommendations on how to do this.

  • Optimize how your server queries databases, or migrate to faster database systems.

  • Upgrade your server hardware to have more memory or CPU

A TTFB below 200ms is considered great. The 200ms to 500ms range is considered normal and okay. A TTFB consistently higher than 600ms will need to be investigated.

7. Load JavaScript Asynchronously

When the browser reaches a <script> tag that loads JavaScript from a remote source, it will wait for the file to be loaded before continuing with rendering the website. That is called synchronous loading.

If you set the async flag on the <script> tag then the browser will load the script asynchronously. It will continue parsing the page while the script is loaded.

We also suggest moving the script tags to the bottom of the page, near the closing </body> tag. This way older browsers that don’t support the async attribute will load the script after parsing the rest of the page.

8. Reduce the Number of Plugins

Plugins are reusable pieces of functionality, usually used in content management systems like WordPress or other pre-built website platforms. Plugins give website owners additional functionality such as analytics or the ability to leave comments on blog posts.

But plugins come at a cost. Each plugin will almost certainly load additional CSS and JavaScript files. Some plugins will increase the TTFB time as well because they require additional processing on the server for each page request.

So I would recommend going through your plugins list and making sure that you only keep the plugins that are really needed and should delete any plugins that are not critical for your website.

9. Use Website Caching

Caching is the process of saving a version of your files in a temporary storage location – a cache – that can be accessed faster. There are lots of advantages to enabling browser caching as it can reduce bandwidth consumption, reduce latency, and the workload of the server. The main downside is that there will always be at least two versions of your website at any given time. This can cause issues if you are running a real-time service that relies on accurate data but even this can be addressed to some degree by forcing a subsection of the cache to clear when new data is imported.

Wrap Up

Improving website performance can be challenging, especially with the vast differences in devices, connectivity, browsers, and operating systems, but it will have a significant positive impact on your business if your business relies on your website as one of the main channels for reaching your customers.

So, that's all from my side. I hope you got to learn something significant today.

You can connect with me on Twitter or Linkedin.

Till next time take care.....bye👋