In the digital age, website performance is critical to the success of an online presence, and among the various performance aspects, page speed stands out as paramount. Page speed, the time it takes for a web page to fully load, significantly impacts user experience, search engine rankings, and conversion rates. A fast-loading website enhances user satisfaction, reduces bounce rates, and increases engagement, leading to higher conversions and sales. Furthermore, search engines like Google use page speed as a ranking factor, affecting a website’s visibility in search results. As more users access websites via mobile devices, optimizing page speed becomes even more crucial to ensure a seamless browsing experience. In today’s competitive digital landscape, investing in page speed optimization is essential for any website aiming to succeed.

For this, Google’s PageSpeed Insights is probably the most well-known tool to perform such analysis. But there are others such as:

• GTmetrix
• Pingdom Website Speed Test
• Lighthouse extension for Chrome DevTools

Regardless of which tool you use, it is important to start thinking about performance from the moment you plan to build a website. Otherwise it might be too costly or impossible to go back and fix the problems that arise from a poorly planned website.

Be careful which plugins you use

Whether you are developing with WordPress, Drupal, or any other CMS, plugins are the backbone of the development process. It offers the functionality you need out of the box and assures a fast and robust development process. Unfortunately, a lot of plugins don’t really think about performance and add weight to the page that is going to cost the customer in performance and ultimately in revenue.

Because of this, even though the plugin is not developed by the developer, it is the developer's responsibility to know the consequences of adding it to the website. After all, the website is your project. So:

• Stick to the plugins you know best.
• After installing a plugin, go check what changes it did to your code.
• Run a speed tool (such as Lighthouse) as soon as you install a plugin.
• Don’t change the code of the plugin, but check the code and see what it does.
• Ask questions such as, “Can this code be async?” or “Can this be deferred?”
• Try multiple plugin alternatives if needed.

Minify CSS and JS

Although there are plugins that do this for you out of the box. Modern development tools should do most of the work for you.

I prefer to use the Roots.io Sage Starter theme. It bootstraps all of these tools in one place and prints the minified versions of everything ready to use.

Start developing with the JS and CSS async.

Understand how the async and defer attributes work for JavaScript and how they impact your website. Then start development from the start with your JavaScript loaded asynchronously so your code is ready to wait for the document to be loaded before it runs.

CSS now also needs to be loaded asynchronously, so make sure you start with two separate sheets. One that is going to be loaded only after all the document is displayed and another that is going to be used inline on the page.

<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="//url-to-style-sheet.css">

Above the fold CSS

Since CSS sheets need to be loaded only after the document is fully displayed to the user. The practice right now is to place the above-the-fold CSS inline at the start of the website you are building.

This needs to be planned ahead of time. Going back at the end of the project and selecting which CSS needs to be removed and placed inline is a daunting task and will cost you and the customer a lot of time.

Lazy load the images.

There was a time when this had to be carefully planned and coded into the JavaScript. Now, you only need to place loading="lazy, which is supported by most browsers (it isn’t by IE).

The browser will do all the work for you, even detect if the image is above the fold and load it right away.

Move away from heavy frameworks

I’m talking to you, Bootstrap. Even though I love the framework, it is pretty heavy, and you’ll end up with a lot of unused code in your project.

Not saying that there won’t be projects where Bootstrap isn’t a good fit, but for most projects you should consider moving away from Bootstrap into frameworks such as Tailwind CSS (which will only compile the code your project uses).

Test often

If you leave it for the end of the project to see how you did during the weeks it took you to develop the website, you’ll probably need to go back and rebuild a lot. So make sure you keep testing not only the front page but also the most important pages your users need to see and engage with.

For this, the Lighthouse Chrome DevTools is perfect. Make sure you have it installed and use it as often as you need in order to understand what works best for the project you’re building.

Conclusion

I’ve seen websites that needed so much work to optimize that made me feel like building it from scratch. So make sure you think about it from the moment you start drawing the solution for the customer rather than waiting until it is too late.

Check multiple websites and often in order to get comfortable with the tools and all the metrics they use to assure you understand what you’re doing from the start.