How we used Google Pagespeed suggestions to optimise Drupal theme
A website performance depends on many things like the server configuration, the caching used, the hosted content (images and videos) and more. In this post, we'll describe how we used Google Pagespeed suggestions to optimise a custom Drupal theme to boost performance.
Suggestion - Remove unused css/js
Consider removing unused CSS rules and only attach the needed Drupal libraries to the relevant page or component in a page.
Solution - Define different libraries and attach them to the respective twig files
By running the code Coverage in Chrome DevTools, we identified unused CSS and JavaScript code attached to pages. We isolated code parts unnecessary for most pages, we created separate libraries with these parts of the code and we attached these libraries to the twig files that may use them.
Let's be more specific with some examples.
Carousels
We use TinySlider, a Vanilla Javascript slider for the carousels on our site, but we don't have carousels everywhere. In fact, we only have them at the homepage, so why load the respective css/js everywhere? Let's split it then!
Since we use webapack to bundle the website assets, we took advantage of the multiple entry points feature to separate carousel CSS and Javascript code from the main site's assets.
module.exports = {
entry: {
app: './asset_src/app.js',
search: './asset_src/carousel.js',
},
output: {
filename: '[name].js',
path: __dirname + '/asset_dist',
},
};
// writes to disk: ./asset_dist/app.js, ./asset_dist/carousel.js
Now that our separate files are ready, we can declare the carousel library in the custom_theme.libraries.yml
carousel:
css:
theme:
asset_dist/carousel.css: {}
js:
asset_dist/carousel.js: {}
And, attach the library to the carousel paragraph twig (paragraph--carousel.html.twig) used to render the carousels
{{ attach_library('civic/carousel') }}
We applied the same process for other parts of code, like the "sharing functionality" code that's attached to blog and project pages, or the prism syntax highlighter library used in posts like this one.
Suggestion - Properly sized images
Serve images that are appropriately sized to save cellular data and improve load time.
Solution - Use Drupal image styles and htm5 picture tag
Why serve the same images to all devices when Drupal provides the ability to set as many image styles as you need and html5 picture tag is here?
We took advantage of the picture tag to load smaller images to mobile devices
<picture>
<source media="(max-width: 767px)" srcset="{{ node.field_image.entity.fileuri | image_style('558_x_377') }}"/>
{{ content.field_image }}
</picture>
or no images at all instead of just hiding them with CSS
<picture>
<source media="(max-width: 992px)" sizes="1px" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 1w"/>
<img src="{{ '/' ~ directory ~ '/shapes/shape-' ~ paragraph.field_shape.value ~ '.png' }}" alt="">
</picture>
Changes according to Google Pagespeed suggestions are only a part of the process to optimise a Drupal website to load faster. CIVIC knows how to boost website performance and helps you do the same.
Take a look at our Web Design and Development services to see where we can help.
