Introduction: Google Pagespeed & CSS/JS Aggregation.
Google has changed their search engine ranking system radically over the last few years to favor mobile views and focus on page load speed over incoming link volume or domain values. With this comes search priority for websites with frequently updated dynamic content posts.
Google Pagespeed allows web publishers to run analytics on their Drupal CMS pages to see how they score in testing. This tutorial helps Drupal web publishers optimize page caching settings & compress image files to improve Google Pagespeed test scores.
Let’s get started.
Run the Google Pagespeed Tests.
- To begin the Google Pagespeed optimization of a Drupal CMS website, navigate to the Google testing site: https://developers.google.com/speed/pagespeed/insights/
- Enter the URL of any popular page on a Drupal website, such as a landing page, homepage, blog post, article, forum post, or user profile.
- Record the initial Google Pagespeed score for Desktop & Mobile views.
- Review the error messages to see what needs to be fixed on the CMS to improve the scores.
Overall, we received the following scores:
Mobile: Optimization - Medium: 76 / 100 - with recommendations to:
- Enable compression
- Optimize images
Desktop: Optimization - Good: 85 / 100 - with recommendations to:
- Optimize images
- Enable compression
- Minify HTML
We have prepared the following tutorial to document the best way to solve Google Pagespeed error messages on Drupal 9 web hosting installations.
How to solve these issues?: Follow the subsequent steps to fix the most common errors on a Drupal website for Google Pagespeed tests.
Install & Enable the Advanced CSS/JS Aggregation (Adv_Agg) Module.
After installing & enabling the module normally (operating in Maintenance Mode), It is recommended to turn on the following settings in the admin section:
- Aggregate CSS files
Settings: Enable the Adv_agg suite of modules in admin/modules & then begin to build more advanced CSS/JS compression packages for improved file/page caching.
Install Minify JS/HTML for Faster Compression & Smaller File Sizes.
Settings: Navigate to the Performance section of the Configuration menu area in Drupal 8 administration & notice the new tabs for Adv_Agg features..
- Enable advanced aggregation
- Use DNS Prefetch for external CSS/JS.
- AdvAgg Cache Settings: Normal
- Gzip CSS assets
- CSS: Fix improperly set type
- JS: Fix improperly set type
- Enable preprocess on all JS
- Enable preprocess on all CSS
Then save the settings. The rest of the values can remain on default.
Compress Image Files - Manually or Command Line.
The other most common error encountered in Google Pagespeed involves image compression. Drupal 8 publishers may be required to download files from their theme and use an image compression utility like RIOT to create new versions of the files. This will improve Google Pagespeed results & also must be done for embedded image files in blogs, articles, forums, etc.
A Screenshot of the RIOT desktop software for JPG/PNG image compression. RIOT saved 100 kb or around ⅔ of the file size be implementing better compression algorithms for the same file over Adobe Photoshop defaults. With this solution users will need to upload files manually.
Another option is to implement a site-wide image compression utility that will rely on server-side processing to optimally compress all images on a website. Running the Apache extension Google mod_Pagespeed is an option for web publishers on some Linux server plans.
ImageAPI Optimize is a server-side solution that will support binary processors, reSmush.it, or TinyPNG for image compression with third-party plugin modules. Binary processors must support AdvDef, AdvPng, JfifRemove, JpegOptim, JpegTran, OptiPng, PngCrush, PngOut, & PngQuant commands, which is usually not possible on shared hosting environments.
Installation: Create a new Image Pipeline with reSmushIt as the compression engine.
Hint: Because Drupal 8 caches files generated as thumbnails associated with images, best practice is to rely on a server-side solution which can manage each thumbnail automatically.
Settings: These options can also be turned on in Adv_Agg for faster page load speeds.
- Move all external scripts to the top of the execution order
Web fonts, remote API files, & Google Analytics scripts will all be suggested in Google Pagespeed tests for local caching. Enabling this setting allows Adv_Agg to implement better overall compression & load optimization of files for cached pages in production, which can be important for high-traffic Drupal 8 sites.
Note: Developers will need to test Theme views for all device sizes with the Advanced CSS/JS Aggregation module, as conflict may develop between different scripts when compressed.
High Performance: Add More Page Caching & CDN Solutions.
High-performance users who need even better speed from their Drupal websites to manage large user communities on web server architecture can add other page caching, database caching, & PHP caching solutions both through modules and custom web server configurations.
Recommended server-side solutions include: Memcached, APC, OPcache, HHVM, Redis, NGINX, Varnish Cache, & professional CDN services. Only a minimum of this can be installed on a shared hosting plan. Upgrade to a VPS Hosting plan to add these high-performance feature upgrades to a Drupal CMS stack or run on cloud platforms with disk snapshots.
Shared hosting users running Drupal without the ability to install server-side extensions can consider installing the Boost (Drupal 7) module for more advanced HTML caching of web pages to anonymous users which can speed up page speeds considerably.
Browse the Host Advice tutorial archive on Drupal Solutions to find more “How-To” articles on these advanced caching solutions for Drupal 8. Cloudflare CDN integration is a popular choice for Shared Linux & cPanel hosting plan users to improve low-traffic site response speeds.
Go through these steps to make the changes on your Drupal 8 site, then re-take the Google Pagespeed tests and see the improvement in performance scores.