Optimizing your website’s performance can set you apart from your competitors. It not only helps your organic search results; having a fast website leads to a better user experience. Happy users equals more conversions. However, the process is anything but easy. So, by the end of this guide, we hope that you gain a solid understanding of how to optimize your website’s performance. Or, you can hire us to build you a website with these performance optimizations in mind.
To build a fast website, you first need to start with the basics. A slow shared hosting platform in a data center far from your customers (spoiler alert) isn’t going to be fast. But, you don’t need to spend a fortune on VPS services to get better hosting speeds. Here are some things you can do to speed up your website without having to switch hosting services.
If you’re using Wordpress (like most people), using a cache can dramatically speed up your website. A cache bypasses the usual steps Wordpress uses to generate an HTML document, serving up static HTML content to users. This dramatically increases the performance of your website, making even a slow hosting provider seem fast. There are many popular plugins for Wordpress such as WP Rocket and W3 Total Cache.
Caching, however, has limits. A cache can’t store dynamic content, so if your site relies heavily on this type of content, your only option is a bigger and faster server ($$$$). Also, caches don’t solve the data locality issue. If your hosting provider is in New York and your customers are in Hawai‘i, your website will be slow because of the distance the data has to travel (you can’t beat the laws of physics and congested internet routes!).
Aside from the HTML document itself, webpages often rely on large static files, such as images, fonts, and JS. A CDN acts like a cache for this type of content; distributing it amongst dozens, or hundreds, of geographically separated data centers and serving it from the point of presence (POP) closest to the user. Since these types of files often represent the bulk of the bandwidth used to serve a webpage, it can help to lessen your hosting costs.
If you’re a Wordpress user, caching plugins will often integrate with a CDN partner to serve images and other static content. WP Rocket partners with Stackpath to serve images from their CDN. Cloudflare is a popular option; it uses a reverse proxy-based CDN and doesn’t require a plugin (though one is available).
To speed up our website, we store our static assets in Azure blob storage, then serve it from Azure CDN. After testing Google CDN, Digital Ocean, Akamai, and Verizon, we found Azure to be the fastest in the Hawai‘i region, due to their POP on O‘ahu. Cloudflare has a POP in Hawai‘i, so they’re also a good option.
CDNs are great, but they don’t cache the actual HTML doc your web server generates. This means the loading speed of your website is still limited by data locality and the speed of your hosting provider. Cloudflare APO is a product that can dramatically speed up dynamic websites, like Wordpress and Drupal, by fetching dynamic content from your server and serving static versions of it from their CDN. With Cloudflare APO, your website can gain many of the benefits of static websites, such as faster loading times, while maintaining the backend you’re familiar with.
At Vibe, this is the option we use. After growing increasingly frustrated with Wordpress, plugins, and the ever-growing complexity inherent to that ecosystem, we chose to focus on developing high performance static websites. To accomplish this, we use Hugo, a static site generator written in Go. Unlike some other static site generators written in JS or Ruby, Hugo can generate a website in milliseconds. This speeds up development immensely because we can see changes to our code in almost real time.
With a static site, we have the flexibility to host it from anywhere. We could simply host our website from a blob storage bucket in Azure, but for ease of deployment we use Netlify. Netlify provides continuous deployment from our GitHub repository, automatically building our website and serving it from their CDN any time a change is made. This allows us to quickly make edits to our websites and deploy them worldwide in seconds.
Fast websites are lean. That is to say, they’re not bloated with extraneous JS files, huge CSS files, and unoptimized images. Fact: the larger the total size of your webpage, the longer it takes to download. If you’re using Wordpress with third-party themes, you may not have much control over this; luckily, there are some things you can do to optimize the size of your webpages. If you’re building sites from scratch (like us), you have full control and can keep your website lean from the start.
Eliminate the use of excessive JS, CSS, and fonts. The more files your webpage needs to load the slower it will be. Trim down your JS, CSS, and fonts to just the bare essentials your site needs to function. Do you really need 10 font styles?
Images are often the largest files your webpage will request. Loading these images takes significant bandwidth. When your images don’t load quickly, it can make your whole site seem slow.
This may seem obvious, but lots of websites get this wrong. Don’t load images that are larger than they need to be. For instance, if you’re using an image for a 320 x 480 thumbnail, you shouldn’t use an image that’s 3840 x 5760. All of that extra resolution will go to waste and your users will be left with slower load times.
The <picture> tag is the <img> tag evolved. The <picture> tag is essential for responsive web design. It will help you to [optimize the size of your images to your users’ screen size](https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-HTML5-picture-for-responsive-images--cms-21015) and allow you to detect browser support for WEBP, giving you a fallback to JPEG if needed. If you’re using Wordpress, you don’t often get a choice. However, there are a few plugins that can use the <picture> tag (with the risk it could break your Wordpress theme).
```HTML
<picture>
<source srcset="image2.webp x2, image1 x1" type="image/webp">
<source srcset="image2.jpg, x2, image1.jpg x1" type="image/jpeg">
<img src="image1.jpg" alt=”Optimize your images”>
</picture>
```
While many people skip this step, it has become essential to do. Modern browsers added a feature that will calculate the aspect ratio of an image from a specified width and height. This helps to prevent cumulative layout shift (CLS), since the browser can reserve the space needed for the image before the image is loaded. Because image files are often the largest, this can drastically improve your CLS score in Google Lighthouse.
```HTML
<picture>
<source srcset="image2.webp x2, image1 x1" type="image/webp">
<source srcset="image2.jpg, x2, image1.jpg x1" type="image/jpeg">
<img src="image1.jpg" alt=”Optimize your images” width=”320” height=”480”>
</picture>
```
If your user isn’t going to see an image until they scroll down the page, why slow down their broadband connection by trying to load everything at once? This is what lazy loading is for; it defers the image loading until the image is in view. We enable lazy loading for every image beneath the fold. This is easy to do, now that most web browsers support native lazy loading through the loading attribute. Simply add the loading=”lazy” attribute to your <img> tags and you’re good to go.
```HTML
<picture>
<source srcset="image2.webp x2, image1 x1" type="image/webp">
<source srcset="image2.jpg, x2, image1.jpg x1" type="image/jpeg">
<img src="image1.jpg" alt=”Optimize your images” width=”320” height=”480” loading=”lazy”>
</picture>
```
If you’re using Wordpress, you can achieve lazy loading through a plugin such as Lazy Load.
Aside from the benefits of using appropriately sized images, using the appropriate amount of compression for your images can make your images even smaller. We usually set the quality slider to 50-70 when we’re exporting JPEGs for the web. Using an image format like WEBP can take things a step further, giving you smaller images with better quality than JPEGs. Now that all modern browsers have WEBP support, there’s no good reason not to use them.
Minification is the process of removing whitespace and comments from code. Because computers don’t need to see any whitespace when processing code, this can save a ton of space. Wordpress users can often rely on their caching plugin to do this. If you’re building your website with Hugo, you can have Hugo minify both your HTML and assets processed through Hugo’s asset pipeline. Hosting providers, such as Netlify, also offer an option to automatically minify your assets.
In addition to properly compressing images, JS, CSS, and HTML can also be compressed. GZIP and brotli compression can drastically reduce the file size of these assets. Often, you’ll see that it’s enabled by default through your CDN or Hosting provider, but it’s always good to check. If you’re a Wordpress user, you can enable it through your .htaccess file, or with various plugins. If you’re hosting your static site on Netlify, brotli compression is enabled by default.
Using both minification and compression will yield the best results. Resulting in much smaller file sizes than would be possible with just one method. Using minification and GZIP compression, we’re able to shrink the size of our CSS file from 117kB to 14kB!
Preconnect and Prefetch are both tools you can use to speed up the download process of third party assets, such as third party fonts, CSS libraries, etc. By placing these instructions in the <head> of your website, you can get a headstart on downloading these assets before they are needed.
Preconnect starts the handshake between your user’s device and the server it will download the asset from. This includes the DNS lookup, the TCP connection, and TLS handshake. These processes take precious milliseconds, so getting it done before the asset is needed can speed up the process. On our website, we preconnect to Google analytics, so that we can get a head start on pulling down the analytics JS, which we have located further down in the <body> of our HTML document.
```
<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
<link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
<link rel="preconnect" href="https://stats.g.doubleclick.net" crossorigin>
```
However, if you’re using Google Fonts, you can use preconnect as well to speed up the download of your critical fonts.
```
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/CSS2?family=Roboto&display=swap" rel="stylesheet">
```
Prefetch is like preconnect, but takes it a step further. Prefetch will download the asset before it is needed. So if you have some critical piece of code, you can ensure it is downloaded as soon as your user’s device downloads the HTML doc.
Inlining Critical CSS can help to prevent CLS by embedding these CSS needed to render the page layout above the fold in the <head> of the HTML document. This means your layout can properly load before your CSS file is downloaded by the browser. This is only useful on the first page load, but Google Lighthouse doesn’t care. If you have CLS in your webpage, it can seriously affect your performance score.
The easiest way to inline your Critical CSS is to use a plugin. Netlify has a plugin that will inline critical CSS. It adds a minute to our site’s build time, but is well worth it. Wordpress users can use WP Rocket, among others, to inline critical CSS.
One downside to inlining critical CSS is that it can lead to larger HTML document sizes, which can slow down your initial load time. However, in most cases, the tradeoff is worth it. Because Google Lighthouse weights CLS so heavily, even a tiny amount of it can prevent you from getting a 100 score in performance.
Optimizing your website’s performance for Google Lighthouse is a difficult task that involves lots of trial and error to get right. Choosing the right web technologies from the beginning can drastically improve your score. This is why we advocate for static websites. However, if you are a Wordpress developer, not all is lost. Using these methods, you can drastically speed up your website’s performance. We hope this guide will help you on your journey to improve your website’s Google Lighthouse performance score. Check out our web design services to find out how we can help you create a faster website.
