Page speed has become a ranking factor in Google Search. This means that in order to do well in search results, websites have to consider making their content load as fast as possible.

Improving website speed and performance is not only a matter of improving rankings in search results but also 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

In this post I am covering all the possible ways I personally know on how to improve website speed and performance.

The main principle behind fast website is it’s physical location in relation to the end-user and also the amount of bytes transferred over the internet.

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

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

This list is ordered by the most important first to least important last, from my personal point of view.

1. Lazy-loading images

Lazy-loading images makes sure that pages load faster by not downloading images that are below the fold, meaning that the user has 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.

2. 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 filetype in modern web, optimizing images for web is really important.

3. Using CDN

CDN helps loading websites faster by minimizing distance of delivery 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.

4. 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.

5. Setting up caching

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

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

6. Serving with gzip

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

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

7. 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.

8. Code splitting

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

9. 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 code web page usually loads faster when it doesn’t have to extra round trips to fetch chunks of code.

10. Using web-safe fonts

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

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

11. Optimizing above the fold

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

12. Avoiding hero images

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

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

13. Using dedicated web server

Websites that are 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 a lot better during high traffic periods.

14. Using AMP-pages

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

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

15. Using Signed Exchanges

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

16. Optimizing DNS

DNS is responsible for the very 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.

17. Using service workers

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

18. 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 allows browsers to store these directly within a browser.

Precaching allows websites to deliver an offline experience.

19. Avoiding external network requests

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

20. Preloading resources

Preloading resources tells the browser that the web page is definitely going to need a resource later down the web page life cycle and so the browser fetches the resource ahead of time.

21. 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 before-hand.

22. Avoiding auto-placed ads

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

23. Using indexes for queries

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

24. Paginating queries

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

25. Avoiding inlining everything

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

26. Optimizing sprites and fonts

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

27. 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. Web page should always try to lazy-load resources below the fold.

28. Avoiding common 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.

29. Avoiding inlining fonts

Inlining fonts causes 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.

30. Render-blocking JavaScript

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

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

31. 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.