Introduction: Google Pagespeed & CSS/JS Aggregation.
Google has changed its 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.
Step One:
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.
Results: Google frequently gives errors to Drupal websites for improper CSS & JavaScript aggregation, uncompressed image files, and JavaScript files that are not cached locally.
Overall, we received the following scores:
Mobile: Optimization - Medium: 76 / 100 - with recommendations to:
- Eliminate render-blocking JavaScript and CSS in above-the-fold content
- Enable compression
- Optimize images
Desktop: Optimization - Good: 85 / 100 - with recommendations to:
- Optimize images
- Eliminate render-blocking JavaScript and CSS in above-the-fold content
- 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.
Step Two:
Install & Enable the Advanced CSS/JS Aggregation (Adv_Agg) Module.
Most of the CSS & JavaScript compression errors in Google Pagespeed can be corrected by upgrading from Drupal 9’s core web page caching system to the Advanced CSS/JS Aggregation (Adv_Agg) module.
Advanced CSS/JS Aggregation gives web publishers multiple administration settings for CSS & JavaScript compression that need to be set individually on a website.
After installing & enabling the module normally (operating in Maintenance Mode), It is recommended to turn on the following settings in the admin section:
Performance (/admin/config/development/performance):
- Aggregate CSS files
- Aggregate JavaScript files
After these settings are configured & saved, Drupal admins, can use Adv_Agg’s suite of CSS/JavaScript compression tools to receive better Google Pagespeed scores.
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.
Optional:
Install Minify JS/HTML for Faster Compression & Smaller File Sizes.
For Drupal Administrators that prefer a different option to Adv_Agg’s JavaScript compression options, installing the Minify JS & Minify Source HTML modules is another choice.
Minify JS & Minify Source HTML replace all of the JavaScript in Drupal 8 Core with optimally compressed versions that can take processing strain off of Adv_Agg requirements in production. The compressed HTML output is cached for anonymous users & better Google Pagespeed scores.
Installation Settings: Minify JS & Minify Source HTML will work with Adv_Agg but need to be enabled specifically for JavaScript & HTML compression as a configuration option.
Note: Minify JS has a file archive that allows admins to scan and manage JavaScript files to optimize compression and compatibility in publishing cached files in production.
Step Three:
Configure the CSS/JavaScript Compression Settings.
Because every theme & module configuration with a Drupal 8 site is unique, web publishers will need to experiment with the Advanced CSS/JS Aggregation (Adv_Agg) settings to find the level of CSS/JavaScript compression that leads to the most gains in Google Pagespeed scores.
Settings: Navigate to the Performance section of the Configuration menu area in Drupal 8 administration & notice the new tabs for Adv_Agg features.
Some of the configuration settings to check for optimized HTML & JavaScript compression are:
- Enable advanced aggregation
- Use DNS Prefetch for external CSS/JS.
- AdvAgg Cache Settings: Normal
- Gzip CSS assets
- Gzip JavaScript assets
- CSS: Fix improperly set type
- JS: Fix improperly set type
Note that the CDN module can be turned off for most users. Use Core or YUI for CSS minification and JSqueeze or JSMin for JavaScript compression.
Additionally:
- Enable preprocess on all JS
- Enable preprocess on all CSS
Then save the settings. The rest of the values can remain on default.
Hint: Remember to clear the Drupal Cache to regenerate new versions of CSS/JavaScript files for Google Pagespeed testing.
Step Four:
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 by 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, the best practice is to rely on a server-side solution that can manage each thumbnail automatically.
Step Five:
Cache Remote JavaScript Files Locally.
Google Pagespeed tests will also flag Drupal 8 websites to cache JavaScript files locally for better page load speeds. The Advanced CSS/JS Aggregation (Adv_Agg) module has a setting for this which will enable the caching 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
- Move all browser conditional JavaScript to the bottom of the group
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.
Optional: Load CSS/JavaScript Files Asynchronously.
Google Pagespeed tests may also suggest that Drupal 8 publishers load their CSS & JavaScript files asynchronously for better page load speeds. Administrators can enable these settings in Adv_Agg and test to see which combination works best with their theme.
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.
Summary: Page Caching, Image Compression, & CSS/JavaScript Aggregation for Drupal 8 Websites.
Establishing page caching policies for Drupal 8 websites as well as Advanced CSS/JavaScript Aggregation settings for Themes will lead to vastly improved Google Pagespeed test scores for publishers. A comprehensive image compression policy needs to be established by bloggers, news media, e-commerce sites, & social networks using Drupal to optimize processing resources available to the CMS in production. High-traffic websites need to implement more advanced caching strategies like NGINX, Varnish Cache, or Redis, while smaller sites can find these as part of PaaS plans on shared cloud hosting accounts with premium, low-density server hardware. CDN caching to local regional markets will provide the fastest page load speeds.
Conclusion:
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.