It goes without saying that ranking well in Google can make or break a business. With the latest ‘page experience’ update, Google’s algorithms will include even more factors related to how usable and user-friendly your site is. So how can you make sure your website delights both visitors and the Google gods?
We used Google’s Lighthouse tool to audit our own website’s performance and identify areas for improvement. Lighthouse groups elements into four optimisation categories – Performance, Accessibility, Best Practices, and SEO – and scores each out of 100. Our website is built using Webflow, and in this post, we share 11 ways that you too can boost the user experience on your Webflow site.
Tip: Chrome extensions and/or plugins can have a negative impact on your performance metrics, therefore you should always run your Lighthouse test in incognito mode with your extensions.
Google Optimize is the go-to-tool for running A/B tests, but these tests load into your page right at the start, making a big dent in your performance metrics.
If you’ve been running A/B tests, you may well have added the Google Optimize ID to your general Webflow project settings – this means Google Optimize is loaded on every page of your project, even those where you’re not running tests.
Instead of running Google Optimize at project level, you can add the code at page level. This will boost performance on the pages where you’re not running A/B tests.
How to implement
Chances are you have several plugin integrations on your website, such as Hubspot, Hotjar, or an external cookie policy plugin.
On our own site, we were able to considerably improve our performance by adjusting our cookie plugin settings.
Take a look at your plugins and dive into their documentation – often the default settings aren’t the best. Go over the steps below for every external plugin and see your page performance improve.
External plugin checklist
When loading your page, Webflow by default starts by loading all the external scripts that are needed to show the webpage. But actually, you don’t need these for that first view and loading them afterwards will give a faster loading time.
How to implement
When loading a page, the assets with the largest file size are probably images, videos and other media files. But when only the top of the page is viewed at first, loading in all images at once isn’t really necessary. That’s where lazy load comes in.
Lazy load means that images only load when they come into view on screen – so for example, images that are under the fold wouldn’t load until the user scrolls. The user won’t notice any visual difference, but the page’s performance will increase. Note that this is only possible for inline images and not on background images applied on other elements – see further below for some suggestions on this.
Since August 2020, Webflow has enabled lazy load by default on any new images, but if you have older images on your site, it’s worth enabling this setting per image from the image’s settings panel.
How to implement
As mentioned, the lazy load option doesn’t work on background images applied on other elements.
Adding custom code to load background images on scroll is a possibility, but it requires a lot of custom code building blocks. Also, implementing and testing all the use cases could be a lot of work, and probably not worth the effort.
Bottom line, if you need to use large images, it’s best to choose an inline approach so you can optimise load time.
Currently it’s not possible to upload a .webp image in Webflow. Instead, you would need to upload the assets on an external hosting server and embed them on the page.
However, remember that Webflow cannot auto-create responsive images for embedded images, like it does for inline images. Also, Safari and IE do not support WebP, so you would need to provide fallback support.
In short, we recommend against using WebP images in Webflow for now.
Webflow automatically creates extra image sizes of your images for all the different breakpoints so they load quickly on any device. However, it only does this for static images – images taken from a collection won’t be resized.
So, if you’re using super hi-res images from a collection, you should manually add an extra CMS field where you can upload a low-res photo. You can then set up your page to show the high-res image on desktop and the low-res image on mobile.
How to implement
Custom fonts may look great, but they take longer to load. You can speed up loading time by first using a default web browser font – like Arial, or Times New Roman – and then swapping to your custom font when the page is fully loaded. Just like we do on our own site.
By taking this approach, users see a short flash between the two fonts the first time they visit the site. Once the custom font is cached, it will show immediately every time after that.
Implementing fallback fonts is very easy in Webflow.
How to implement
By default, Webflow has a lot of predefined CSS styles that you’re not using, and probably even a lot of unused styles from previous versions.
It’s actually really easy to remove all styles that aren’t linked somewhere to an element, and the same goes for Webflow animations.
How to implement
While improvements to your ‘Performance’ score in Google’s Lighthouse audit tool will have the most impact on ranking, it’s also worth trying to get your ‘Accessibility’, ‘Best practices’ and ‘SEO’ scores to at least 90.
One issue that impacts accessibility is skipped heading levels, since it can be confusing for visitors using screen readers. All the headings on your page should therefore be in a logical order, i.e. page title H1, next title H2, H3, etc.
Webflow has a beta feature that can show you immediately which headings you need to fix.
How to implement
To make your website more accessible for visitors using screen readers (again improving your Google Lighthouse ‘Accessibility’ score), you should add an extra description for links that only contain an icon e.g. the menu icon.
In Webflow, it’s easy to add an extra ‘aria-label’ with a description to give more context.
How to implement
While designing your site, you’ll almost certainly have paid attention to the contrast between the different elements. Google Lighthouse lets you be 100% sure that all the elements meet the requirements of the Web Content Accessibility Guidelines (WCAG) 2.0 rules.
If there are any issues, the tool will show you where the contrast is not high enough. By tweaking some subtle elements you’ll be able to get a better Accessibility score.
How to implement
The Lighthouse audit examines all links to external urls. Adding an extra rel attribute such as rel="noopener" improves performance and prevents security vulnerabilities.
Lighthouse also flags if an external link has a generic link text, based on a list of keywords.
How to implement
We found that while our SEO was ‘in the green’, we had a little work to do in terms of accessibility and best practices, and a lot of work to do in terms of performance.
Armed with Lighthouse’s insights, we were able to get our scores right up where they should be by making the improvements listed above.
Google’s new focus on page experience puts user needs and satisfaction firmly at the heart of how it delivers search results, meaning that sites delivering a poor experience will essentially find themselves penalised with lower rankings.
With its Lighthouse auditing tool, Google makes it easy to see how well your site is performing right now, giving pointers for how you can move the needle and improve page experience. It’s worth remembering though, that aiming for full marks in each of Lighthouse’s four categories isn’t realistic, especially for mobile, and that anything above 90 out of 100 is great. Your Performance score will have the biggest impact on page experience, so prioritise improving this score.
By combining Lighthouse insights with Webflow’s audits, we were able to achieve a huge improvement in our own site in just a few days – better for our search engine rankings and better for our visitors! If you have a Webflow site, try out the improvements listed above and see for yourself.
UI Designer
UI Designer
Follow us on LinkedIn for insights, learnings, use cases and more.
Let’s get to know each other better and explore how we can help your business embark on a journey towards digitally enabled success.
Working in collaboration with Penny Black and its joint venture incubators, Agfa and ninepointfive, November Five delivered a technology project that strengthened Penny Black’s business case and lowered its backers’ investment risk.
Our Vanbreda Healthcare platform has been awarded a UX Design Awards nomination by International Design Center Berlin – the leading, independent design institution promoting design as a driver for business and social innovation.
November Five was named one of Fast Company’s global 100 Best Workplaces for Innovators in both 2020 and 2021. This annual list, developed in collaboration with Accenture, recognises and honors the top 100 businesses from different industries that inspire, support and promote innovation at all levels. For the consecutive year, November Five was the single Belgian workplace listed.
Fast Company is the world's leading progressive business media brand, with a unique editorial focus on innovation in technology, ethical economics, leadership, and design. Written for, by, and about the most progressive business leaders, Fast Company and FastCompany.com inspire readers and users to think beyond traditional boundaries, lead conversations and create the future of business.
