31 ways to improve website speed and performance

Page speed has become a ranking factor in Google Search. To do well in search results, websites must consider making their content load as fast as possible.

Improving website speed and performance also improves rankings in search results and is a matter of good user experience.

Many studies, such as this one, have shown how improving page speed and website performance can lead to better user engagement and more conversions through a web page.

Introduction

This post covers all the possible ways you can improve website speed and performance.

The main principle behind a fast website is its physical location in relation to the end-user and the number of bytes transferred over the internet.

More bytes equals more load time, and a longer distance between the document and the end-user means more travel time across the web.

Everything around this principle is either speeding things up or slowing things down.

This list is ordered by the most important first to the least important last.

Lazy-loading images

Lazy-loading images make sure that pages load faster by not downloading images below the fold, meaning that the user has to scroll down to see them.

According to HTTP Archive, at least 50% of websites’ weight is images. Modern browsers support a native way for lazy-loading images.

Optimizing images

Image optimization means editing, resizing, and compressing an image so that the image weight stays as small as possible while maintaining good image quality.

As images are the most requested filetypes on the modern web, optimizing images for the web is essential.

Using CDN

CDN helps load websites faster by minimizing the delivery distance from end-users geographical location to the website.

The closer the end-user is to the website, the faster it loads since data doesn’t have to travel as long of a distance.

Minifying code

Minifying code, such as JavaScript and CSS, means compressing files and removing unnecessary bytes from the final files to reduce file weight.

Typically one character equals one byte, so removing all unnecessary characters from delivered files reduces bandwidth usage of a website.

Setting up caching

Caching is a method to reduce the time it takes to deliver a website over the network.

Like using a CDN, caching aims to serve resources closer to the end-user.

Serving with gzip

Gzip is a compression format that aims to reduce bytes with HTTP requests.

Many hosting platforms, CDNs, proxy servers, and load balancers provide automatic gzip compression.

Lazy-loading code

Lazy-loading code means loading parts of a web page, such as JavaScript or CSS, later during the user session.

Lazy-loading parts of a web page improve the initial load time of a web page.

Code splitting

Code splitting means splitting website code into smaller chunks so they can be loaded on demand.

Inlining code

Inlining code means reducing external network requests by adding chunks of code directly to the web page source code.

When code is added directly to the web page source, it usually loads faster when it doesn’t have extra round trips to fetch chunks of code.

Using web-safe fonts

Web-safe fonts are expected to be present in the users’ computer systems.

When using web-safe fonts, end-users do not have to download font libraries as they rely on fonts already found in their operating system.

Optimizing above the fold

Above the fold refers to the area visible for the end-user as they open up a web page for the first time.

Avoiding hero images

When optimizing a web page for maximum performance, loading a large image above the fold area called a hero image is considered a bad practice.

Loading a hero image during the initial page load dramatically slows the rendering process.

Using a dedicated web server

Websites loaded using a web server, such as WordPress, can benefit from using a dedicated server.

Dedicated web servers do not share resources with other websites and can perform better during high traffic periods.

Using AMP-pages

AMP is a web framework that provides tools and guidelines to help website owners deliver their content with a better page experience.

AMP was developed by Google and is used primarily for improving websites’ performance metrics to improve ranking in search results.

Using Signed Exchanges

Signed Exchanges (SGXs) allow third parties to distribute content while maintaining full assurance and attribution of its origin.

Optimizing DNS

DNS is responsible for the first handshake between the end-user and the website. Choosing the right DNS provider can speed up the time it takes to finish this first handshake.

Using service workers

Service workers are types of Web Workers that allow websites to execute scripts outside the main thread, in the background.

Pre-caching requests

One of the benefits of using a service workers is the ability to precache resources and network requests.

Precaching resources and network requests allow browsers to store these directly within a browser.

Precaching will enable websites to deliver an offline experience.

Avoiding external network requests

Each external network request takes up network bandwidth and slows down the website. A website can improve speed and performance by avoiding unnecessary external network requests.

Preloading resources

Preloading resources tells the browser that the web page will need a resource later down the web page life cycle, so the browser fetches the resource ahead of time.

Pre-connecting to origins

Pre-connecting means informing the browser that a web page intends to establish a connection to another origin and that the connection should be opened beforehand.

Avoiding auto-placed ads

Ads slow down a web page, and auto-placed ads can slow down a web page even more.

Using indexes for queries

Database indexes improve the speed of data retrieval operations by quickly locating data without searching the database every time it is accessed.

Paginating queries

Paginating database queries splits query results into smaller chunks and makes operations faster by reducing the size of the results.

Avoiding inlining everything

While inlining can improve web page performance, inlining too much code can also hurt web page speed.

Optimizing sprites and fonts

Many websites often load large libraries of fonts and sprites that include many unused resources. Optimizing these libraries only to have the resources used by the web page can reduce the final size of the library.

Avoiding lazy-loading above the fold

While lazy-loading resources, such as images, can speed up the web page, implementing lazy-loading mechanisms incorrectly can also hurt web page performance. The web page should always try to lazy-load resources below the fold.

Avoiding typical image hack

Too often, web pages try to avoid loading images by placing them inside containers with css-property-value: display: none. While the image won’t be displayed when viewing the web page, it is still loaded over the network.

Avoiding inlining fonts

Inlining fonts cause the browser to make multiple network requests while growing the size of the original document.

Instead, fonts should be downloaded parallel in separate asynchronous requests while not blocking the rendering of the document.

Render-blocking JavaScript

Web pages should try to execute as little JavaScript as possible during the initial page load.

Executing JavaScript during the initial loading of the page can become render-blocking.

Avoiding loading-overlays

Loading overlays are considered a bad user experience.

Instead of displaying a loading overlay for the end-user, web pages should aim to deliver their main content as quickly as possible.