Portrait von Beat Temperli
Beat Temperli
Software Engineer @Gridonic
May 15, 2019 8 min read

How to Get a Perfect 100 in Google Pagespeed Insights for a Drupal Website

How fast is your website? How fast is your Web application?
Go fast or go home – this is the internet πŸš€.

Is your loading speed too low, clients will not visiting your website anymore. Nobody will buy a product from a slow webshop. Not only Google preaches this to us over and over again. The probability of bounces increases to 30% when your page load time goes from 1 second to 3 seconds. It increases up to 120% when the loading time goes from 1 second to 10 seconds 1.

Do you really want to loose all these visitors?

Here are some of the possibilities to increase your page speed and hopefully lower the bounces of your visitors
1) Display content as fast as possible – especially on mobile pages.
2) Use a faster server.
3) Decrease the required requests to load your page.
4) Lower the size of your website.

And some more options:

  • Send images in the right sizes & types. Cut images for your needs. Use .jpg for photos and .png for graphics - not the other way around.
  • Load your content only when you want to show it – and just before you will show it.
  • Load your website step by step. First the basics, then files and assets.
  • Cache your content. If you want to learn more about caching Drupal websites, read Stefan's blog post Understanding Drupal's auto-placeholdering

Well, all this sounds great, let's do it!

A cat is playing with a tiny keyboard.

1) Change your settings: Render the content first, then styles, images and scripts.
2) Get a better server. Ask the hosting company you trust.
3) Put everything together in one file instead of sending multiple files (yes, in HTTP/2 this will look different). Make it small. Remove everything you don't use. Make it smaller. And then render it compressed as .gzip.
4) Optimize your content and all your delivered files. Make them as small as possible. Deliver different images and graphics for the different screen sizes.
5) Cache everything.

How you can deliver an image in different sizes for different screens.

When it's that easy – why not every site is fast?

Because it's not that simple. When you have your own website built with an HTML page, a CSS and Javascript file – it will be a fast website anyway. When you have a complex website, based on a CMS not owned by yourself - the optimization is hard. But probably you know what I'm talking about.

  • Not in every CMS you can choose how your content will be rendered
  • Not in every CMS you can create different image sizes for different screens
  • Not in every CMS you can define how many files are loaded within one single page request

Page speed optimization in Drupal 8 is possible!

Activate Cache

Set the cache lifetime to an appropriate level.
Use GET-Parameter www.example.com/example.css?version=1.2 to update your cached file when the current lifetime duration has not ended yet. Drupal does this normally after the setup. Just make sure to activate it.

Use Advanced Aggregation for CSS & Javascript

We use the module Advanced CSS/JS Aggregation. You can use this for better aggregation of your Javascript and CSS files. Use it for deferred CSS Execution by loading the CSS via Javascript, preprocess the Javascript and CSS Files, use its Cache functions and compress everything. Google will thank you πŸ˜‰.

The enabled modules are:

  • advagg
  • advagg_bundler
  • advagg_css_minify
  • advagg_js_minify
  • advagg_mod

Add critical CSS right in your HTML files

Your user wants to see the relevant content first, fast & immediately. Therefore you should render the relevant content immediately with the first response.
Thanks to the "Critical CSS" module you can define some basic CSS files which are copied right into the head of your HTML. Add the most important stuff there and bring a sketch of your final design to the website before every thing else will be loaded. Google calls this "First Meaningful Paint" and calculates the results of it into their secret algorithms.

Deliver responsive images

Use the functions of the core module "Breakpoint". Define some breakpoints in your theme and render all images through your own image styles. You can setup the whole processing with following modules:

For each new image style you have to
1) define the format for the displayed images (3:4, 4:3, 16:9, ...),
2) create an image style for each of your breakpoints,
3) (optional) define the "Image Optimize Pipeline" for all image styles (Currently we use the external web service reSmush.it to optimize the images),
4) define a "responsive-image-style" for the image format and aggregate all corresponding responsive image styles into one,
5) use this single responsive-image-style to display the image in your entity (paragraph or node),
6) (optional) set focal point for define the center of the image, before they get cropped.

Speed Score 100 in Google PageSpeed Insights

Well, with all these simple optimizations we did it: A basic Drupal page with the highest possible ranking on Google's PageSpeed Insights.

Overview of the result of Google PageSpeed Insights. Speed Score for the mobile and desktop view of the page shows 100 points, this means "High scale". Some more data is shown, all of them are signed green.

And now?

The web is developing and so does Google and Drupal. This is a process that works in the beginning of 2019. Google will change their algorithms, Users will change their behaviours, Drupal will develop itself. I think the speed issue will stay actual. And there are some interesting points for the future:

  • Create the "Critical CSS" files automatically. Don't do it manually again. Do it continuous during the development.
  • Follow the development of HTTP/2: Do we need the current request cycle or can our browsers and servers handle the speed for us?

A short remark at the end

Yes, i wrote a lot about Google, about its unknown algorithms of pushing up some sites and pulling down some other sites in their page ranking. Google is not the internet. But most of our users are using Google as their default Search Engine. And most of our clients are using Chrome as their default browser. There are other algorithms, there are other Search Engines & Browsers. And I'm really sure that Google is not the only one who cares about Page Speed.

[1]: thinkwithgoogle.com/marketing-res..., Google/SOASTA Research, 2017