5 Ways To Optimize Your Website And Increase Speed

"How to optimize your website" is a hot topic these days. Ever since Google rolled out their Page Experience Update to their search algorithm in the summer of 2021, many companies and website owners alike have been focusing a lot of their time and energy on figuring out how to accomplish this goal.

But before we begin, we need to first understand what PageSpeed optimization even is.

What Is PageSpeed Optimization?

PageSpeed optimization is the process of improving the performance of a website by reducing the time it takes for pages to load. PageSpeed is an important factor in user experience and search engine ranking, as users are more likely to leave a website that takes a long time to load, and search engines may penalize websites with slow loading times in their search results.

There are various techniques that can be used to improve PageSpeed, including optimizing images, minifying and concatenating CSS and JavaScript files, using browser caching, and enabling compression. Some of these techniques can be implemented on the server side, while others can be implemented on the client side, through the use of browser extensions or by modifying the website's code.

In general, the goal of PageSpeed optimization is to reduce the amount of time it takes for a page to become fully loaded and interactive for the user. This can be achieved by reducing the number and size of resources that need to be loaded, and by optimizing the delivery of those resources to the browser.

So How Do We Optimize For PageSpeed?

While there are a number of techniques to accomplish this, here are 5 quick ways to immediately increase your website's speed and decrease its loading time. Following these tips will help you achieve the PageSpeed scores you're looking for.

1. Use a caching plugin

We use WP Rocket for our web page caching. It's a premium plugin that you'll have to pay for in order to best utilize all of its functions.

Another great option is WP Fastest Cache, which is also a premium plugin, but you can get away with using the free version. Combined with Autoptimize, we've found this to be the best combination to use as a free option.

But if you're willing to pay for the premium option, WP Rocket is a solid choice.

2. Use a content delivery network (CDN)

A CDN like Cloudflare, which is what we use, will also dramatically increase your website's speed. A content delivery network is a geographically distributed group of servers that work together to provide fast delivery of internet content.

A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos. The popularity of CDN services continues to grow, and today the majority of web traffic is served through CDNs, including traffic from major sites like Facebook, Netflix, and Amazon.

A properly configured CDN may also help protect websites against some common malicious attacks, such as Distributed Denial of Service (DDOS) attacks.

3. Delay JavaScript execution

The main way to optimize your website and increase its speed is to decrease its loading time. And the fastest way to decrease loading time is to delay the execution of any JavaScript code that runs on the page. But unfortunately, as nature would have it, JavaScript is what controls the really cool parts of the web. So delaying its execution can make a site, well, kind of boring.

Delaying JavaScript execution is a compromise or trade-off that website owners are going to have to wrestle with. That's why it's important as a web designer to understand what elements of a web page are controlled with JavaScript. Knowing ahead of time which elements of a web page are going to be affected when JavaScript is delayed is a big advantage because it completely dictates the design choices we make. And these design choices ultimately drive our ability to optimize websites while also satisfying our clients.

4. Load fonts locally

Another huge factor in PageSpeed optimization is reducing the number of network requests that a website or web page has to undergo during its loading. Serving fonts from an external source like Google or Adobe adds to a website's chain of network requests. And the longer the chain, the slower the loading time. So reducing the number of network requests will decrease this chain size and increase loading speed.

Instead of using external fonts on your website, it's best to use fonts that are locally loaded onto your web server. This way fonts can be preloaded, which will decrease the number of network requests and dramatically reduce your page loading times.

5. Optimize your images

The smaller your image file size is, the faster it will load. Sounds obvious, but now browsers can serve images in a new web-optimized format called WebP. WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

Imagify, which is what we use (and which integrates directly with WP Rocket), and ShortPixel, are two very good plugin options you can use to optimize your images. Both offer free versions, which basically just limit you to the number of images you can optimize, or you can upgrade to their premium options if need be.

If you don't feel like using another plugin, CloudConvert is a great site you can use to convert your images to the desired WebP format. The only catch is you'll have to convert them one at a time, and you're limited to 25 conversions per day (with the free version). So if you don't mind that, you're good to go.