12 quick and easy ways to get a better PageSpeed score on Webflow
You've made the investment in getting a new Webflow site for your business (great! 🙂), and now you want to think about optimising it to get more visitors. This post is for you.
We'll share 12 quick ways that you can get a better PageSpeed score and hopefully rise up the Google rankings.
What is my PageSpeed score?
Firstly, what exactly is a PageSpeed score and why does it matter?
To determine where it should rank your website when users search for specific keywords, Google uses a matrix of complex factors.
In general, they are looking to reward websites that are:
- Popular - receiving lots of links from other respected websites;
- Informative - with a clear and logical structure that makes it easy to access relevant information;
- Fast - with a quick loading time across mobile and desktop devices; and
- Built with the user’s experience in mind.
Several of these factors get taken into account when Google comes up with your website’s PageSpeed score.
You can check your site’s PageSpeed score with Google’s PageSpeed Insights tool.
But should this matter to your business?
Why is my PageSpeed score important?
Well, every business will have a different answer to this question.
If your business relies on getting new customers from Google searches, it is generally a good idea to optimise your website to ensure you rank as highly as possible.
If on the other hand you get most of your traffic from sources external to Google, you probably don’t need to make optimising your score a high priority.
You might make the decision to prioritise large images and complex animations at the expense of your overall score.
Most websites, however, would benefit from adopting the best practices that are taken into account by Google, because they increase overall page speed, which is always a good thing for your visitors.
If you do want to improve your score, we’ve collected some simple ‘quick fixes’ that should bump it up significantly.
Tip #1 - Compress images
This first tip is a no brainer and will go a long way to improving your score.
Do a quick audit of the images on your website. You can check the size of each image in your Webflow assets panel.
In general, you want to make sure that you don’t have many images above the 200-300kb mark. Images above this size add weight to your page and slow the page down for users.
If you find any large images on your site, the solution is simple - make them smaller!
You can do this in two ways:
- Crop and resize them - your images only need to be as big as the maximum size at which they appear on the page. If your image is never displayed larger than 600 pixels width, then crop and downsize it to that width. There is no need for an image that is 3000 pixels wide if you are only displaying a small thumbnail of it. You can crop and resize images using the native photo editing tools built into Mac OSX and Windows. Piece of cake.
- Compress them - once you’ve cropped and resized your images, you can compress them to scale the file size down. We recommend using free tools like TinyPNG and compressor.io for this.
After you’ve done these two steps, reupload the images to your asset library and replace the old images with the new ones. If your website had several large images, you should notice a nice score increase after doing this.
Tip #2 - Create thumbnail alternative images
Developing a Webflow website often involves a push and pull between optimising page speed and displaying high resolution images.
Blog posts, for example, are often accompanied by large, detailed images that can slow the page speed down.
But what about when you only want to show a small preview thumbnail of these large images on other pages that reference your blog post?
In these instances, it is a good idea to create a separate field in your CMS collection to store a thumbnail version of your image. Whenever you want to show the image but don’t need the large version, use the thumbnail instead.
Tip #3 - Remove CSS background images
There are two main ways to serve images on your website - as HTML <img> tags or as CSS background-image elements.
There are various advantages to both of these options, but with one of Webflow recently feature upgrades - lazy-loading - we recommend using HTML <img> tags where possible.
Lazy loading helps to improve your page speed score by delaying the loading of your images until they appear in the viewport. Webflow adds lazy loading to images by default, but you can change the lazy loading on an image by clicking on an image and changing the Load dropdown value in the settings panel.
It is important to note that any images loaded ‘above the fold’ should generally be set to ‘Eager’. This is because Google penalizes websites that delay the loading of assets that are in the user’s initial viewport (more on that below in tip #6).
Tip #4 - Get creative with images
We’ve talked a lot about images thus far, but the most effective way to speed up your page loading time is to remove images entirely.
Sometimes this isn’t possible though, and you need to use images to convey a particular piece of information.
In those cases, you can get creative with your images to shave some valuable kilobytes and off the file size.
The easiest way to do this is to downsize the image and add a simple vector pattern to the background. When done correctly, this not only adds visual flair but also reduces the file size because simple vectors are generally only a few kilobytes.
Tip #5 - Remove unused hidden elements
This is an often overlooked aspect of improving page speed.
In the course of building a website, developers will often create whole sections or components and hide them temporarily when they are testing their page layouts.
A developer might, for example, create two separate sections with different layouts for the same set of content, in order to see which one works better on the page.
Often they forget to unhide or delete these sections later, and the elements and assets inside these sections, though hidden, will still contribute negatively to the page speed score. Large images are usually the biggest culprit here.
We see this all the time!
Do a quick audit of all pages on your website in the Webflow designer to look for hidden sections. If they are no longer needed, delete them entirely.
Tip #6 - Use Google Tag Manager to delay unnecessary scripts
Most websites have one or more scripts on them that perform specific functions or integrate third party services.
If your website has analytics for example, a script has been added on some or all pages to ensure that your analytics provider picks up your users’ interactions on the site.
These scripts can significantly slow down your site, which can result in your page being penalized by Google.
To mitigate this, we recommend that you serve all of your scripts through Google Tag Manager, which can be used to strategically delay scripts until they are required.
Once you’ve set up your container and added the Google Tag Manager script to every page of your website, you’ll want to add a delay to any scripts that aren’t required to load immediately.
Many common scripts like the Facebook tracking pixel tag can be safely delayed in most cases. There are many guides available to help you add a delay to particular scripts.
We are also available to help you implement your Google Tag Manager container and add delays. Email us to get a quote.
Tip #7 - Optimise the hero section
The most important section of a page for determining page speed score is the hero or ‘above the fold’ section.
It is important to optimise this section if you want to increase your score.
Too often we see websites that attempt to cram too much information and too many large assets into the hero section, often in the form of slideshows with multiple large photos.
Where possible, limit the number of photos in your hero section to one small photo, and instead prioritise written copy as the main way to get your important message across.
It is becoming increasingly popular, among tech websites in particular, to omit photos entirely in favour of vector illustrations and simple animations.
Tip #8 - Optimise your fonts
Fonts are often a cheeky culprit when it comes to poor page speed scores.
In most cases, your website probably only needs 2-3 font weights at the most, however many websites unnecessarily store and load more font files and scripts than required.
You can do an audit of which fonts your website currently loads by going to the fonts tab in your project settings.
If you have more than 2-3 fonts installed on your site, consider removing any unnecessary fonts that are no longer used, or replace some of existing instances of that font with another font to trim down the overall number of fonts in use.
Additionally, it is becoming best practice to serve WOFF2 format font files, as these are more lightweight than other outdated font formats.
To convert your font files to WOFF2 you can use a free tool like Transfonter.
Tip #9 - Overhaul your class naming
One thing we notice very often with older Webflow websites is messy class naming.
Often these websites have had multiple developers over the course of several years, who have each had their own way of naming classes.
This results in inconsistent and excessive classes that slow down the site over time.
To combat this, we highly recommend implementing a cohesive and easily understandable class naming system. The industry standard currently is the Finsweet Client First system, which has been developed from the ground up to solve this issue.
If you notice that your site has a chaotic mess of classes (“Div Block 17”, “Heading Green 5” etc), you should consider overhauling your class naming system.
Tip #10 - Add facades and lazy loading to videos
Similarly to images, videos can also be lazy loaded until they are required by the page.
Webflow doesn’t natively support lazy loading videos that are added to the page via the native video component, but a workaround is to use an embed component to embed the Youtube or Vimeo script and then add a loading="lazy" attribute to the script.
If your videos are ‘below the fold’, this additional attribute should provide a page speed score increase.
Tip #11 - Misc changes in Webflow settings & designer
This tip is actually 3 separate little tips, but they each take only a couple of seconds each, so you can do them almost immediately.
- Remove unused classes - In the Webflow designer, go to the Style Manager panel and click clean up in the top right.
- Remove unused interactions - In the Webflow designer, go to the Interactions panel and click clean up in the top right.