Copied to clipboard
Insights
Series

11 improvements to rank your Webflow website higher in Google

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?

17/11/2021
June 3, 2021
-
8
min read

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.


1. Implement Google Optimize at page level for A/B tests

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

  1. Remove the Google Optimize code from your Webflow project settings.
  2. In the page settings of pages where you’re running A/B tests, add the tracking code in the head section of the custom code.

2. Optimise external plugins


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

  1. Check each plugin’s settings and remove or disable any features you don’t need.
  2. Make sure you’re using the most stable version of the package or plugin, rather than just ‘the most recent one'.

3. Load external scripts asynchronously


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

  1. Go to your Webflow project settings and find your custom Webflow code.
  2. Look for external services or services ‘below the fold’, e.g. services like Google Analytics, Hotjar or other third party scripts.
  3. Add async and defer tags inside your script tags. You can read more about these tags here.


4. Lazy load images on page scroll

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 

  1. In the Webflow Designer, go to the Image Settings.
  2. Select Image Layer
  3. Under Load, make sure that ‘Lazy: load on scroll’ is set as the load option.

What about background images then?

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. 

Can I use WebP images in Webflow?

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.


5. Create a separate CMS field for responsive images

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

  1. Go to the Webflow Designer.
  2. Find your collection with hi-res images.
  3. Add an extra CMS field for mobile images.
  4. Hide the desktop image on mobile breakpoint and vice versa.

6. Swap from fallback fonts

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 

  1. In Webflow, go to your general Project settings > Fonts.
  2. Select a fallback font that is as close as possible to your custom font.
  3. Choose the font-display option you prefer – we went for the swap option, but maybe you prefer a different option.

    You can read more about the various options here.

7. Cleanup your Webflow CSS and animations

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

  1. In the Webflow Designer, go to your Style Manager.
  2. Hit the Clean Up link and auto-remove all unused styles.
  3. Go to your Interactions Panel and clean up your animations in the same way.

8. Fix any skipped heading level issues

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

  1. Open the Webflow Designer.
  2. Hit the Publish dropdown.
  3. Open your Audit panel by clicking on these errors. Here you’ll see any heading level issues.
  4. Go to the heading with the issue.
  5. Change it, so it’s in the correct order.
  6. Add a style class to keep the styling, e.g. font size, as it was before.

9. Add a descriptive aria-label for icons

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

  1. In the Webflow Designer, select the link with the nested icon.
  2. Open the Element Settings panel.
  3. Add a custom attribute such as aria-label=“menu”.

10. Increase contrast where possible

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

  1. Open the Chrome DevTools.
  2. Go to the Lighthouse tab and click Generate report.
  3. Click your Accessibility score to see where the contrast checker fails.
  4. View the contrast checker by clicking on the colour indication in your styles panel inside Chrome DevTools.
  5. In Webflow, increase the contrast of the problem areas so they are no longer flagged in Lighthouse.

11. Ensure external links are safe

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

  1. In Webflow Designer, go over all the external links and add the attribute rel=”noopener”.
  2. Check if the text link contains generic text and adjust where required.

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.


Conclusion

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.

Michiel Van Nueten

UI Designer

17/11/2021
June 3, 2021
-
8
min read

We help companies
succeed in the digital age

Stay up-to-date with November Five

Follow us on LinkedIn for insights, learnings, use cases and more.

Looking for a partner that thinks beyond delivery?

We help companies
succeed in the digital age

Let’s get to know each other better and explore how we can help your business embark on a journey towards digitally enabled success.

CONTACT US
Series
DISCOVER MORE INSIGHTS
Chevron
About Fast Company’s ‘Best Workplace for Innovators’

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.

Jeroen Van Winckel

Product Strategy Designer

Nathalie Dilewyns

Talent Acquisition Manager

Ralph Van Tongelen

Finance Director

Office

Office

Dario Prskalo

Associate to the executive team

Ilse Rabau

Communications Manager

Brecht Spileers

Director Strategy & Growth

Emily Stewart

Senior Content Writer

Rindert Dalstra

Brand & Marketing Director

Robin Van den Bergh

Managing Director at Appmiral

Maarten Raemdonck

Co-founder & Managing Director at Spencer

Phillip Vandervoort

Executive advisor - Strategy

Vincent Bruyneel

Chief Financial Officer

David Du Pré

Executive advisor - sales & venture growth

Marc Wojciechowski

Assistant Director

Muriel Mwema

Director of Product Management

Nick Verbaendert

Co-Founder & Managing Director

David De Bels

Product Owner at Appmiral

Tom Vroemans

Co-founder & CEO

Veronique Verhees

Talent Manager

Jens Reynders

Engineer

Michiel Van Nueten

UI Designer

Samuel De Pooter

Engineer

Bert Hofmans

UI Designer

Stijn Symons

Chief Digital Officer

Vincent Pauwels

Co-founder & Product Strategy and Design Director

Thomas Van Sundert

Co-founder & Technical Director

Justin Mol

Director Client Partnerships

Leslie De Cuyper

Client Partner

Ruben Van den Bossche

Chief Operating Officer

Nikki Jacobs

Managing Director at The Market