You are using an outdated browser.
Upgrade your browser
to improve your experience.

I Feel The Need... The Need for PAGESPEED

Go back

So after 5 years it was finally time to update our website. See, we're the type of business that spends a ton of time on our client projects and very little on our own marketing, much like the cobbler with no shoes. But that stops in 2020 (for real!).

As part of that process, we wanted to see how well we could do with Google's PageSpeed Insights. If you're not familiar with this tool, it's basically a score between 1-100 which ranks both the mobile and desktop versions of your website based on how fast it loads on various devices. It will also make recommendations for you on how to improve your score, because Google, with 92% market share for search, has a vested interest in making the web faster. In fact, as of 2018, Google will consider your PageSpeed score in your site's search engine rankings and if you are running Google search ads.

So knowing that PageSpeed is a big deal (and something we pay close attention to for our clients), we wanted to see how far we could go. And, we have a bit of a secret weapon in our back pocket which we knew we were going to utilize.

Contao and Symfony

Turns out, we have been using a content management system for years as the basis for most of our client sites which gives us a significant advantage. Contao Open Source CMS is our tool of choice for building websites. It is powered by the Symfony PHP Framework, which is a high-performance web platform that allows you to build websites and apps, large and small. Contao and Symfony allow us to customize every aspect of our site, and ensure that it runs fast, secure, and utilizes the latest industry standards. Essentially, we had a NASCAR car frame, engine, and transmission, and it was up to us to drive it to the finish line and make it look good doing it.

"Essentially, we had a NASCAR car frame, engine, and transmission, and it was up to us to drive it to the finish line and make it look good doing it."

First Steps

We took our concept, designs, and content and began to break them down into the components that would be used on the pages. This includes the things you can see like text and images, as well as the styling/stylesheets (CSS/SASS) and Javascript. This is a pretty standard process of integrating everything within the HTML markup , or code, that will end up displaying to the end user. It also involves setting things up in a responsive-design format, so that the layouts are mobile-friendly and will adapt to any size screen. All of this type of stuff is pretty standard.

Streamlining

We love using Contao because unlike other CMS platforms, it is really minimalistic. Other platforms like Wordpress or online hosts like SquareSpace are trying to accommodate a "one-size-fits-all" situation, while Contao relies on you to decide what needs to be included and what does not. This is especially true when you use pre-bought "templates" for sites. What you end up with is a lot of code that is unnecessary, but which is so entwined with your template that it NEEDS to be loaded in order for the site to work.

Instead, we are able to only load what we need, and Contao's compiler will combine and compress all of our external files like CSS and Javascript into single files which will load quickly.

Right Images for the Job

One of the biggest bottlenecks in downloading a webpage will be the images. If you look at our homepage, we have a lot of them. Not good! Plus, we need them to look good at both small and large sizes, and the conundrum there is that small images are quick to download, but when you scale them up, they look horrible. We don't want our site to look good only on a small screen and then get pixellated at a large size.

Contao handles this in two ways. First, with responsive image sizes that can be defined in the backend of the CMS. Here, you can define a small size for small screen, and a sufficient large size for larger screens, and everything in between. Each image is optimized to look good and minimize download time at each screen size.

Secondly, the most recent version of Contao (4.9) introduced lazy-loading of images. Some newer web browsers like Chrome and FireFox have the native ability to only load images when they come onto the view of the user, eliminating the need to download them all at the initial page load. Although it is only available in some browsers, we see this as being the future of the web. Some Javascript libraries have been available to do this for a while now, but getting native support eliminated the need to add extra Javascript code.

Handling the Initial Rendered View

One of the things that Google recommends is that you prioritize the initial view of your page for the user, and render that out first before considering elements "below the fold." This is the same concept as lazy-loading of images, by separating out the code for the initial view from the rest of the page.

Again, Contao makes this easy to extract so that our initial home page renders the top animation first before worrying about the rest of the content on the page.

Caching and Server Tweaks

One of the reasons Contao and Symfony work so great together is the ability to cache resources so that the CMS does not have to assemble all the elements for the page at the time the user brings up the webpage. Contao let's you be very particular with how you want to set up your caching and how often the cache should refresh, so we took full advantage of all it had to offer.

The final piece of the puzzle was to tweak our server setup to minimize server response time. We like to use a PHP-FPM and NGinX setup for our webserver, and we customize and tweak the deployment settings for each site we build in order to try and maximize performance. It is always a little different depending on the needs of the client/site, but we can generally optimize this very well when we have full control over the webserver.

Tweak, Tweak, Tweak

With all of the above in place, we then run the site through Google's PageSpeed tool to see how we fared, and then use its suggestions to try and get as close too 100 as we can.

Results, and Next Steps

After all that work, we were happy to report that we got some great results! On mobile we achieved a 91/100, which is fantastic, and on desktop, we were able to achieve a perfect score of 100/100!

Our work isn't over, though. You will notice that one of the things we need to focus on is adapting our images to modern formats, such as WebP. We certainly plan on doing this, but not until it is supported in all modern browsers. Once that happens, we may even be able to achieve the perfect 100/100 on mobile, as well.

So Why Should I Care?

This wasn't just some fun experiment for us to try. Having a good PageSpeed ranking gives you real world benefits, like improved organic search engine performance. Plus, if you use Google Ads to target search keywords, a good PageSpeed score will help to improve your "Quality Score" with Google. The better your score, the less you have to pay compared to someone with a lower score for the same placement for keywords. Essentially, it help to save money.

Conversely, a bad PageSpeed score can have disastrous consequences to your search ranking, and also can cost you more money when you are running search ads. Not good!

So, what is your PageSpeed score on your site? If you are in the yellow/green band (50 or above), then congratulations! Your site is decently fast!

However, if your score is below 50, or even worse, in the single digits... then you may want to give us a call today to see how we can help.

About

Go back

Looking for some straight answers to your digital marketing questions?