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
.jpgfor photos and
.pngfor 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!
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
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?
- 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!
Set the cache lifetime to an appropriate level.
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.
The enabled modules are:
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.
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.
: thinkwithgoogle.com/marketing-res..., Google/SOASTA Research, 2017