Page load time is critical for any website, and more so on mobiles and small devices which can be affected by wifi or congestion. This article looks at how you can modify your Hugo theme to improve page speed, by storing scripts and css files in the cloud; using a content delivery network (CDN).
Moving your scripts to a CDN and not hosted on your site will improve speed, because the CDN’s are bigger than your server and more popular, so its likely someone’s browser already has cached the CDN copy of a script - reducing the need to download an identical copy from your website. Google PageSpeed Insights.
Baseline your Site Performance
If you haven’t already, visit Googles free PageSpeed Insights. From here you can get a baseline score of your websites performance on mobile or desktop and recommendations for improvement. Recommendations may include image sizes, which ill cover in a future article.
What can you send to the cloud / CDN?
First thing you’ll want to do is get a list of the scripts and CSS on your site. Depending on your theme, these will be listed in your <HEAD> element of your site, and in the footer, just before </HTML> element. Just view page-source on your website to list these.
A couple of common examples will be JQuery and Bootstrap, look for the <script src= text.
A style sheet example (in the <head> element might be:
<link rel="stylesheet" href="https://yourdomain.com/plugins/themify/css/icons.css ">
An example script (in the footer):
<script src="http://yourdomain.com/plugins/jquery/jquery.min.js"></script>
In the <head> element look for all the CSS Stylesheets and do the same in the footer for Scripts - but be sure to list the script name, the version and if it is min (minified).
Now there are 2-3 good websites to check what you can move to CDN - I recommend you check out
Once you have a list of exactly what can go to the cloud - then move on …
But don’t worry if you can’t find a script or CSS - you can still serve it from your website
Update your site - Stylesheets
- Open your Themes Folder -
Layouts/Partial/head/head.html - Just replace the
hreffor your local script with the CDN location of the file - Save the file
- Run
Hugo server -Dand browse to http://Localhost to check every thing is work fine
If you find a problem - check the stylesheet was loaded correctly (view-source) or look at the Developer Tools (Inspect) and check the resource loaded (look at the Console and the Network sections)
Update your site - Scripts
- Open your Themes Folder -
Layouts/Partial/head/head.html - Just replace the
srcfor your local script with the CDN location of the file - Save the file
- Run
Hugo server -Dand browse to http://Localhost to check every thing is work fine
You can follow the same steps as above to resolve any errors - checking you got the exact script version, minified, etc. If there are still errors - browse your local copy of the script and check version number, etc.
Check, Publish and Re-test your site
Finally - update your website and publish the new copy. Then go back to Googles free [PageSpeed Insights}(https://developers.google.com/speed/pagespeed/insights/). And run the tests again.
Tags:Contact me today to find out how I can help you.
Meet the author
An experienced management consultant and business leader interested in digital transformation, product centred design and scaled agile. If I'm not writing about living with UCTD (an autoimmune disease), I'm probably listening to music, reading a book or learning more about wine.
Find our more about me.
