Website Performance Optimization: The Definitive Guide

13 Techniques to speed up the website and improve conversion

Performance Golden Rule: 80–90% of the end-user response time is spent downloading front-end i.e all the components on the page: images, stylesheets, scripts, etc

1. Minify HTML, CSS & JavaScript

Minification of resources means removing unnecessary characters from your HTML, JavaScript, and CSS that are not required to load, such as White space characters, Newline characters, Comments, and Block delimiters.

This speeds up your load times as it reduces the amount of code that has to be requested from the server.

Minify plugins for the automated task systems — Grunt and Gulp.

Tools for minifying JavaScript code — JSMin and YUI Compressor.

2. Reduce HTTP requests

When your browser fetches data from a server it does so using HTTP (Hypertext Transfer Protocol). It is a request/response between a client and a host. In general, the more HTTP requests your web page makes the slower it will load. There are many ways you can reduce the number of requests such as:

Inline your JavaScript — Combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. (only if it is very small)

Using CSS Sprites — Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

Reducing assets such as third-party plugins that make a large number of external requests.

Image maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page. (such as navigation bar)

Use sessionStorage API and localStorage API to store data into the browser. Refer — Web Storage APIs

3. Use a Content Delivery Network (CDN)

A content delivery network is a set of web servers distributed across various geographical locations that provide web content to end-users with regard to their location.

When you host the website on a single server, all user requests are sent to the same hardware. For this reason, the time needed to process each request increases. On top of that, the load time increases when users are physically far from the server.

With CDN, user requests are redirected to the nearest server. As a result, the content is delivered to a user quicker and a website works faster. This is a rather expensive, but quite effective way to optimize the load time.

4. Time to first byte (TTFB)

TTFB is the measurement of the responsiveness of a web server. Basically, it is the time it takes your browser to start receiving information after it has requested it from the server.

When a user visits your site, their browser sends an HTTP request to the server that hosts it. There are three steps that need to happen between that initial request and the first byte of data: DNS lookup, Server processing, and Response. A website’s TTFB is calculated as: HTTP request time + Process request time + HTTP response time.

By using a CDN, a fast web host, and a reliable DNS provider you can dramatically reduce your overall TTFB.

Google recommends a TTFB of less than 200 ms.

5. Critical Rendering Path

The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen.

The critical rendering path includes the Document Object Model (DOM), CSS Object Model (CSSOM), Render tree, Layout, and Paint.

The document object model is created as the HTML is parsed. The HTML may request JavaScript, which may, in turn, alter the DOM. The HTML includes or makes requests for styles, which in turn builds the CSS object model. The browser engine combines the two to create the Render Tree. Layout determines the size and location of everything on the page. Once the layout is determined, pixels are painted to the screen.

Optimizing the critical render path improves render performance. Performance tips include:

1. Minimizing the number of critical resources by deferring their download ( defer attribute), marking them as async (async attribute), or eliminating them altogether.
2. Optimizing the number of requests required along with the file size of each request.
3. Optimizing the order in which critical resources are loaded by prioritizing the downloading critical assets, shorten the critical path length.

6. PRPL pattern

PRPL is an acronym that describes a pattern used to make web pages load and become interactive, faster.

Push (or preload) the most important resources:

Preload is a declarative fetch request that tells the browser to request a resource as soon as possible. Preload critical resources by adding a <link> tag with rel="preload"to the head of your HTML document:

<link rel=”preload” as=”style” href=”css/style.css”>

Render the initial route as soon as possible

To improve First Paint, Lighthouse recommends inlining critical JavaScript and deferring the rest using async, as well as inlining critical CSS used above-the-fold. This improves performance by eliminating round-trips to the server to fetch render-blocking assets. However, inline code is harder to maintain from a development perspective and cannot be cached separately by the browser.

Another approach to improve First Paint is to server-side render the initial HTML of your page. This displays content immediately to the user while scripts are still being fetched, parsed, and executed. However, this can increase the payload of the HTML file significantly, which can harm Time to Interactive, or the time it takes for your application to become interactive and can respond to user input.

Pre-cache remaining assets

By acting as a proxy, service workers can fetch assets directly from the cache rather than the server on repeat visits. This not only allows users to use your application when they are offline but also results in faster page load times on repeat visits.

Use a third-party library to simplify the process of generating a service worker unless you have more complex caching requirements than what a library can provide. For example, Workbox provides a collection of tools that allow you to create and maintain a service worker to cache assets.

Lazy load other routes and non-critical assets

To send a smaller JavaScript payload that contains only the code needed when a user initially loads your application, split the entire bundle and lazy load chunks on demand.

Once you’ve managed to split your bundle, preload the chunks that are more important. Preloading ensures more important resources are fetched and downloaded sooner by the browser.

7. Reduce the use of web fonts

Web fonts have become very popular in website design. Unfortunately, the use of web fonts has a negative impact on the speed of page rendering. Web fonts such as Google Fonts add extra HTTP requests to external resources. Web fonts are also render-blocking. The following measures will help you reduce the size of web font traffic:

• Use modern formats WOFF2 for modern browsers
• Include only those character sets that are used on the site
• Choose only the needed styles
• Host fonts locally or prefetch
• Store in LocalStorage with Base64 Encoding

Top 10 Google Fonts

8. Enable browser caching

Leveraging the browser cache is crucial for assets that are rarely changing. It is recommended to have a max-age of 7 days in such cases. There are different types of HTTP headers such as:Cache-Control, Pragma and Expires.

One of the most important HTTP cache headers is probably Cache-Control which is a header comprised of a set of directives that allow you to define when and how a response should be cached and for how long. HTTP caching occurs when a browser stores copies of resources for faster access. Standard Cache-Control directives that can be used by the client in an HTTP request.

Cache-Control: max-age=<seconds>
Cache-Control: max-stale[=<seconds>]
Cache-Control: min-fresh=<seconds>
Cache-Control: no-cache
Cache-Control: no-store
Cache-Control: no-transform
Cache-Control: only-if-cached

no-cache:The response may be stored by any cache, even if the response is normally non-cacheable. However, the stored response MUST always go through validation with the origin server first before using it.

no-store:The response may not be stored in any cache. Note that this will not prevent a valid pre-existing cached response being returned. Clients can set max-age=0 to also clear existing cache responses, as this forces the cache to revalidate with the server.

max-age=<seconds>:The maximum amount of time a resource is considered fresh. Unlike Expires, this directive is relative to the time of the request.

must-revalidate:Indicates that once a resource becomes stale, caches must not use their stale copy without successful validation on the origin server.

public:The response may be stored by any cache, even if the response is normally non-cacheable.

Expires — This header specifies a fixed date/time for the expiration of a cached resource. For example, Expires: Sat, 13 May 2017 07:00:00 GMT signals that the cached resource expires on May 13, 2017, at 7:00 am GMT. The expires header is ignored when a cache-control header containing a max-age directive is present.

ETag— A response header that identifies the version of served content according to a token — a string of characters in quotes e.g., "675af34563dc-tr34" – that changes after a resource is modified. If a token is unchanged before a request is made, the browser continues to use its local version.

Vary — A header that determines the responses that must match a cached resource for it to be considered valid. For example, the header Vary: Accept-Language, User-Agent specifies that a cached version must exist for each combination of user-agent and language.

9. Enable Gzip compression

Gzip is a form of compression which compresses Web pages, CSS, and JavaScript at the server level before sending them over to the browser.

On the user side, a browser unzips the files and presents the contents. This method can work with all files on your website. This website performance optimization is easy to implement and can make a big difference.

According to Yahoo, this can reduce download time by about 70%. And since 90% of today’s Internet traffic travels through browsers that support Gzip, it’s a great option for speeding up your site.

10. Reduce redirects

Redirects are often necessary when you move and delete pages, and are the best way to eliminate issues with broken links.

But having too many of them can create additional HTTP requests, which can negatively impact speed, particularly on mobile devices.

This means it’s best to keep them to a minimum. In fact, Google says that ideally, site owners would eliminate them entirely.

You can start by using Screaming Frog to quickly identify all of the redirects currently on your site. Then you must check if they serve a necessary purpose and leave only the critical ones.

11. Move your website to a better host

There are three possible types of hosting:

Shared hosting

The most popular type of hosting that is used all over the world is sharing hosting. That’s the cheapest way to get your site online in a short time and for a low fee. It’s essential to choose a fast web host to ensure better optimization.

With shared hosting, you share CPU, disk space, and RAM with other sites that also use this server. This is the main reason why shared hosting isn’t as fast as VPS or a dedicated server.

Virtual Private Servers (VPS) hosting

VPS is much faster. It uses multiple servers for content distribution. Having VPS you share the server with its other users and have your own part of the virtual server where your configurations don’t influence other clients.

If your website has the average traffic or you have an eCommerce site with traffic spikes in some periods, VPS will be the optimal solution for you.

Dedicated server

The most expensive hosting option is to use a dedicated server which can be your own physical server. In this case, you pay a server rent and hire a system administrator to maintain it.

Another approach is to rent dedicated cloud resources from AWS, Microsoft Azure, Google, or another public cloud provider. Both approaches can also be combined into a hybrid cloud. With dedicated servers, all resources belong only to you and you get full control of them. Cloud infrastructures can also add unlimited and on-demand scalability under a number of packages.

Serverless architecture is yet another option that removes maintenance and server setup procedures altogether.

12. Optimize the size of images on your website

Everyone loves eye-catching images. In the case of successful eCommerce sites, images are a vital part. A lot of photos, images, graphics on your product pages improve engagement. The negative side of the image use is that they are usually large files that slow down a website.

The best way to reduce the image size without compromising its quality is to compress images using such tools as ImageOptim, JPEGmini, or Kraken. The procedure may take a bit of time but it’s worth it.

Another way to reduce the image size is to use the HTML responsive images <secret> and <size> attributes that adjust image size based on user display properties.

13. Use Debouncing and Throttling

Debouncing and Throttling are two widely-used techniques to improve the performance of code that gets executed repeatedly within a period of time. Refer to Debouncing and Throttling in JavaScript

Conclusion

We have covered most of the techniques to speed up and optimize the website's performance. I hope you have found this useful.

Thank you for reading :)