Craft CMS - Web Performance for SEO

Craft CMS, out of the box, is a very performant Content Management System. It’s right up there in terms of web performance against the competition.

Let's see what slow websites tend to experience:

• Higher bounce rates: a visitor views no more than a single page. This can be down to slow-loading pages.
• Lower engagement - If a site is slow, then it discourages people from interacting and browsing further features and pages
• Reduced time on site - as an unperformant site is frustrating, people won’t spend as long on it.
• Fewer conversions - Slow pages have been proven to lower conversions - so fewer sales, fewer people signing up, and less income for you.

Web performance isn't just a nice-to-have these days.

• Crawlability is enhanced when the Googlebot can visit pages quickly. This encourages Google to visit your site more regularly; more visits mean quicker indexed pages and more traffic.
• User Experience - Google rewards sites that give the user a good experience and deliver what the user wants. If a site is slow, this discourages people from browsing further, using features, and hinders them from getting to the content they are looking for.
• Ranking factor - Web performance is now a ranking factor in the algorithm. It’s said there are over 200 factors in the Google algorithm, but all other things being equal, with a competitor, you can get a boost in rankings with good web performance.

Craft CMS is lean

Craft out of the box is an efficient, clean-running, optimised web application and content management system. Even with multiple plugins, we're talking hundreds, it still delivers very good performance. This is unlike many other systems, like WordPress, in which you can install a handful of plugins, and you are left wondering what the hell happened to the performance of your site. Craft is lean and very performant, and even with multiple plugins, it is still incredibly efficient.

Twig templating is in Craft for creating pages has been around for a while, and there is very little overhead with it. You not only get huge flexibility and power in your templates it also doesn't slow things down.

There are a number of different caching options in Craft. We normally use CloudFlare as a CDN cache, with either Fast CGI caching or the popular Blitz plugin running on the Craft side. These make for incredibly fast performance, as well as taking a lot of load off the server.

Google Metrics

These metrics are what Google uses to evaluate pages and give a score for a well-performing site.

Interaction Next Paint (INP) - This metric measures how fast your site responds to taps and clicks. Any low scores here are usually down to JavaScript. As Craft is a blank slate when it comes to frameworks, you get to decide what framework you use, if any! Look at your JavaScript if you see issues here; it’s unlikely to be down to anything with Craft.

Cumulative Layout Shift (CLS) - This is measured by whether there are late interruptions to the DOM (Document Object Model), such as HTML, usually caused by frameworks, ads, or fonts loading late. Craft gives precise control over every line of code on the front end of your site, so troubleshooting Ad performance and loading assets such as fonts should be rectified easily.

Largest Contentful Paint(LCP) - The page is measured to see how long it takes to load. You want to be under 2.5 seconds with this metric. This can be down to Craft with a slow server or poor caching, but it is usually down to large assets such as huge, bloated images or multiple third-party scripts loading slowly.

Poor coding

It’s not the file size of scripts you need to watch out for. Theoretically, you can have a 1kn JavaScript file that has an infinite loop directive. This will usually crash even the most resourceful of computers. Nothing to do with a large file size, but a very poorly coded script. Writing optimised code takes a while to learn, but this proves that even 1 line can hinder a browser drastically. If Google noticed the slowdown on the page due to a mishap like this, it would undoubtedly demote your site.

Best web performance practices include:

• Compressing images - or use CRaft’s built-in image transforms, which can resize and optimise images for you.
• Using modern image formats - we use WebP’s now instead of JPEGs and PNGs.
• Minifying CSS and JavaScript - a great plugin for Craft to minify from the creator of SEOMatic is a great addition here. We use it on every site.
• Removing unused code - go through your code and check every line. Craft doesn't throw in anything extra; it’s down to you.
• Reducing font files and variants - Fonts can weigh down performance; you should only really be using 3 typefaces and a handful of fonts. Don't use fonts from different foundries (different hosts) if you can help it at all.

SSL - slows things down, but no option

There is no option but to use an SSL here for Google and SEO optimisation, unfortunately. This normally slows down performance a couple of hundred milliseconds, but it's just part of the website game.

Diminishing returns.

When it comes to page speed, you will certainly see a SEO boost if you take the loading time from 10 seconds to 2 seconds. Google will punish you for a load time of 10 seconds or more. That’s just too long for a good user experience and will make for a frustrating browse on your site. However, taking a site from 2 seconds to 1 second will unlikely take it from page 3 to page 1 on Google. There is definitely such a thing as poorly loading sites, but you can only go so far when getting your metrics down.

Tips for good Craft CMS performance

• Good hosting - We use Digital Ocean, powered by Laravel Forge maintenance. Both are affordable and are very performant, even out of the box.
• minify plugin - we install this plugin on every site. It’s free.
• Minimal redirects - if you have thousands of redirects on your server, then that can slow down performance. We generally use redirects at the Nginx level, but Craft can handle these too with a redirect plugin.
• Check all code before going live - Goes without saying, and with the example of an infinite loop in one line of JavaScript, you need to check code thoroughly.
• Optimise images and assets - use Craft transforms where possible.
• Good client tuition - You, as a Craft developer, can build a brilliantly performant site, but the client can edit a page and add a 5MB JPG. No matter the other factors, this will take the performance of the site way down. Tutor and advise your clients well prior to and after launch.

Written by John Macpherson