You need urgent information. You search on Google and find a result with the perfect title. You already feel relieved to have found it. But when you click that result, the page takes forever to load. That familiar despair returns, the anxiety builds, and the stress kicks in. Ugh, what a wait. Back to the Google results page to look for another one.

It’s not enough to have a well-built site, with great content and an amazing layout, if it doesn’t open fast. So, speed is an essential point and should be part of your checklist when building your own.

Here are 5 tips to make your site faster:

Minifying scripts and CSS

Minification is a technique that strips indentation and puts the code on a single line. This reduces the size of the original file. The smaller the file, the faster it downloads. It’s also recommended to merge all script files (.js) and stylesheet files (.css) into one (e.g., all.js and all.css). This reduces the number of requests made to the server.

Also, when a page needs to load external files, the browser waits for those files to finish before rendering the rest of the content. So the faster they load, the faster the page is displayed.

Image optimization

When using images on your site, always remember to optimize quality and resolution. There are tools that optimize quality while reducing file size. If you have Photoshop, there’s a “Save for Web” option in the File menu that does this.

As for resolution, if the image’s width is larger than the site’s maximum width, resize the width (and height, keeping the aspect ratio) to match the site’s width.

Use the WEBP image format

Using the picture and source tags, you can use the .webp image format. This format can significantly reduce image weight without losing quality. It also lets you use different images for each screen size and images with higher pixel density.

<picture>
  <source
    srcset="image-example--mobile.png, image-example--mobile@2x.png 2x, image-example--mobile@3x.png 3x"
    type="image/png"
    media="(max-width: 667px)">
  <source
    srcset="image-example--mobile.webp, image-example--mobile@2x.webp 2x, image-example--mobile@3x.webp 3x"
    type="image/webp"
    media="(max-width: 667px)">
  <source
    srcset="image-example.png, image-example@2x.png 2x, image-example@3x.png 3x"
    type="image/png">
  <source
    srcset="image-example.webp, image-example@2x.webp 2x, image-example@3x.webp 3x"
    type="image/webp">
  <img src="image-example.png" alt="Example image">
</picture>

Use HTTP/2

The new version of HTTP brings big performance improvements, like automatic compression with the HPACK format, and multiplexing, which lets the browser download several files in a single request — plus increased security, since HTTP/2 requires HTTPS.

Another very interesting HTTP/2 feature is server push. With it, the server can send files associated with the HTML document before the browser even requests them, reducing the site’s load time.

Gzip compression

If the server you’re using doesn’t support HTTP/2 yet, you can use Gzip compression. With Gzip compression enabled on the server, resources like HTML pages, stylesheets, scripts, and images are compressed before being sent to the user. With compression, files get smaller, increasing the site’s loading speed.

Offline caching with Service Workers

With a service worker — a .js file that runs in the background — we can use the browser’s Application Cache so the site works offline.

This greatly reduces loading time, and also reduces server load, since it won’t need to send those files again. On developers.google.com there’s an article showing how to implement a service worker so your site works offline.

Use tools to measure your site’s speed

There are tools that help us measure the site’s loading speed.

One of them is Google PageSpeed Insights. It shows what can be improved to load the site faster and also gives it a score from 0 to 100.

Another tool you can use is Pingdom’s Website Speed Test. It gives you a detailed report of what’s being loaded, how long it takes, file sizes, and shows what needs to be improved.

These are just a few tips to improve your page’s load time.

Know any others? Enjoyed the article? Share it on social media.