Every second it takes your website to load reduces its conversion rate by an average of 2.11% (between 0-9 seconds). Anything beyond 9 seconds, and you’re losing a significant proportion of your customers who aren’t sitting around waiting for a slow website to load. It makes sense then that improving your website’s load time should be a
Every second it takes your website to load reduces its conversion rate by an average of 2.11% (between 0-9 seconds).
Anything beyond 9 seconds, and you’re losing a significant proportion of your customers who aren’t sitting around waiting for a slow website to load.
It makes sense then that improving your website’s load time should be a big priority.
In this blog, we look at how you can optimise your site for a faster load speed (while explaining where other Webflow sites go wrong).
Page load speed is one of the core vital web metrics that Google considers when judging website performance.
Google uses these core vital metrics (among others) when ranking websites in SERPs, so while other factors will also come into play, page load speed can directly impact your SEO and search results.
A faster website improves the customer experience, making it easier for them to shop with you and increasing your chances of getting a conversion.
It’s relatively straightforward to monitor your page load times using the Chrome extension “Page Load Time”.
It’s also worth combining this with the bounce rate data from your Google Analytics dashboard to see how page speed affects visitor numbers.
As the term implies, lazy loading means that important images load first (rather than all simultaneously). Alternatively, off-screen images don’t have to load immediately. Simply put, the essential content loads faster, and the rest loads gradually.
Although this process is now typically the default on Webflow, older images may still require an update. If it’s not default, update the “Load” setting in the image settings box to match your preferences. Make sure to specify the elements, viz. width and height.
Webflow servers come pre-loaded with resources like images and fonts from a particular domain. The browser establishes an additional connection to the domain when assets like videos are loading.
A preconnect tag informs the browser that a connection from a different origin must be made. Therefore, the tag conveys the signal that it must start (and establish) right away.
Preload tags have the potential to alter the SEO game of your Webflow project completely. Essential resources that need to load initially and quickly must be communicated to a browser.
The best course of action is to preload LCP images. This is a must, especially if the largest viewable element in the viewport is an image.
The font is one of the elements of website performance that is frequently neglected. Like almost any asset on a site, fonts usually take some time to load when a site is first opened. Fallback fonts can assist by presenting preloaded fonts before any font is downloaded. But some browsers tend to hide the text until the font fully loads.
This results in a flash of text that is not visible.
Font weight also plays a significant role here, so you should consider proper font weights.
Apart from appearing unpleasant, this raises accessibility concerns because there is no text to read. Fortunately, the “font-display” property has a “swap” feature that instantly displays the requested content using a system font already loaded.
To avoid possible flashes of invisible text, switch your font display options to “swap.”
Webflow has integrated font display settings into your custom font settings so you can easily use the font display property. Choose the “swap” option for each font you use to enable “font-display: swap” for that particular font.
Be aware that Google and Adobe fonts are incompatible with font display controls; only custom fonts are.
Through prefetching and prerendering, you can inform the browser of the page, visitors are likely to click on next. These can be any links or pages. Subsequently, the page could then begin loading in the background. This makes it cached and primed when the user clicks a link to get there.
You’ll get three “preloading” options in the settings section for links on the page:
Note that these “prefetching” and “prerendering” options can enhance performance if you’re reasonably confident users will load those linked pages next.
However, these preloading techniques can yield wrong and undesired results if you’re not as confident. They can put an unessential burden on your browser and decrease the site speed.
Background images don’t perform nearly as well concerning optimisation as image elements. The most efficient approach is to replace every background picture with an image element.
This element facilitates efficient image switches that rely on the resolution, size, and shape. As a result, it increases the loading speed of your web pages. Be aware, though, that replicating background behaviour might necessitate using the object-fit property.
Resizing images is the most common way to optimise images for site speed.
A photo taken with a 24-megapixel camera will have a resolution of 6000 × 4000 pixels and may weigh up to 16 gigabytes. That is around four times as large as the standard size. However, it is simple to scale or crop photographs. It helps you to accommodate twice the maximum display size on a site using image editors like Photoshop or GIMP.
You can employ lossless and lossy compression algorithms to reduce the file size further. While lossless compression restructures data in an image without altering pixels, lossy compression locates and removes unnecessary pixels within an image.
Leveraging software like Kraken and Optimizilla is perhaps the best technique to compress individual photos. Developers can also adopt tools such as imagemin that sync with build tools, including Gulp.
By deleting any irrelevant metadata, you can further refine images. Many cameras, for instance, attach GPS information, camera information, colour profiles, captions, and other data to images, all of which use massive storage space.
Disabling the setting on your camera is the best solution to prevent information from appearing in your photos. If that isn’t an option, you may also delete the data in Photoshop by choosing “None” next to “Metadata” while using the “Save for Web” option.
SVGs, or Scalable Vector Graphics, offer lossless compression. They can be compressed to smaller file sizes without compromising quality or details. Most images have file formats such as JPEG, PNG, or GIF.
GIFs only have 265 colours and are losslessly compressed, whereas PNGs give the greatest quality but are entirely uncompressed. JPEGs fall in the middle and can be compressed to make files smaller.
Here’s how the file format is chosen in accordance with the image type:
They are ideal for images with lots of colours.
They are suitable for basic or simple images.
They generally work best for animated images.
They are used where images have to be compressed without degrading quality.
Additionally, rather than using photos to depict abstract visuals like background shapes, you can prefer to use SVGs. SVG is a text-based XML file that represents an image. They have a far smaller file size than JPEG, PNG, and GIF images.
A practical move for keeping tabs on the traffic of a website or application is to use Google PageSpeed Insights. You can enter your URL, monitor essential performance data, and get tailored recommendations to make necessary changes.
While PageSpeed Insights is helpful for a preliminary audit, load testing solutions are probably the most effective approach to optimise performance over time. These load audits can also target important user workflows to assure peak performance.
This is a breeze if you’re trying to make your site faster by slashing down on the number of scripts it loads. You can disable the embeds like disabling the script.
An embed is when rich content from another site is retrieved, like a YouTube video or an X tweet.
Therefore, if you don’t think you’ll ever use that function or want to make your site as crisp as possible, you can remove it (you can use embed by manually adding the embed code).
Optimising your Webflow site for speed doesn’t have to be rocket science. Focusing on a few aspects is enough as far as site speed and rankings are concerned.
Here’s a brief compilation of all SEO practices mentioned above:
Lazy loading helps you load the critical content first, thus reducing the bounce rate.
Establishes an additional connection to the domain when assets are loading.
Preloading LCP images ensures necessary resources loading initially must be communicated to a browser.
These options allow better loading of the fonts and, subsequently, your site’s text.
Prefetching and prerendering enable you to effortlessly convey to the browser which links or pages visitors are likely to click on your page. This loads that specific page and increases the loading speed of pages.
Image elements render easy image switches, increasing web page loading speed.
Resizing photographs increases the loading speed of your site by trimming down the size of the images on your site.
Eliminating unnecessary metadata can make your page lighter and load faster.
SVGs offer significant compression without compromising the quality of the image.
Tracking essential metrics can help you understand the facets you need to focus on the most, thus nurturing your speed and rankings.
Deleting irrelevant scripts and embeds can help your site load faster by reducing any unnecessary scripts it loads.
If you have questions or queries regarding Webflow speed optimisation, let us know. We would be more than happy to guide you.
Speak to a member of our team and start your project today!
Our experts will be more than happy to help you!
Speak to us today!1. Let’s Talk
Book a 30 minute consultation call with one of our team so we can understand your goals for digital marketing and what services you need within your budget.
2. Let’s get strategic
Once we know where you want to get to, we’ll put a plan in place to get you there. You’ll get a clear outline explaining all the costs and what results you can expect.
3. Let’s start growing your business
Once we’re all pointing in the right direction our expert team will get to work delivering what we’ve promised and getting you the best ROI possible.
