Hi all,
I have issues with my mobile page speed based on Google PageSpeed Insights.
What can I do about the performance? Any tips here? Render blocking requests issues seem to delay my speed across pages?
Thanks in advance!
those render-blocking requests are a pain!
So basically what’s happening is your CSS and fonts are loading first and blocking everything else from showing up. That’s where most of your delay is coming from.
First thing I’d try: Any custom code you have in the head - you can move it down to before the closing body tag. Only keep the really important stuff up top.
Are you on free Webflow hosting? Because that could be half your problem right there. Their free hosting is pretty sluggish.
Check out these stuffs too:
- Cookiebot and those consent tools are heavy. Can you make them load after the page instead of during?
- For your Google fonts, throw in
font-display: swap;so they don’t hold up the whole page - Looks like you’ve got some seriously nested divs going on (13 levels deep!) - might want to clean that up
The server response thing… honestly Webflow can just be slow sometimes. If you’re paying for hosting you can bug their support about it but don’t expect miracles.
That 2+ second delay from the CSS blocking is your main enemy here. Fix that and you’ll see a real difference. The rest is just tweaking.
Good luck with it, this stuff drives me crazy but it’s worth fixing!
Thanks a lot for the detailed feedback.
For the font-display: swap: Where should I add that? When uploading my custom fonts I already added the swap function.
It will be done inside the designer, not here
This is not accurate. Webflow sites free or not are deployed to the same infrastructure. The limits are on features and usage.
Hello @Samuel1993 , Great question about improving mobile page speed! You are not the only one who faces this issue. Mobile page speed issues can be tricky but there are some effective strategies you can try to boost performance, especially around render-blocking requests and DOM optimization:
- Optimizing DOM Size
A large or deeply nested DOM can slow down rendering on mobile devices. Try to simplify your page structure by reducing unnecessary wrappers, limit the number of elements, and avoid overly complex layouts.
- Optimize CMS and Dynamic Content - Limit the number of items loaded initially and implement pagination or infinite scroll. Dynamically load more items via AJAX or Webflow’s CMS pagination features.
- Avoid Inline Styles and Excessive Classes- Move styles to external CSS files and use minimal, reusable classes.
- Defer Non-Critical Content- Use JavaScript to lazy load or inject such content only when needed (e.g., user scrolls to footer or opens a modal).
<img src="large-image.webp" alt="Product Image" loading="lazy" width="600" height="400">
- Minimize Render-Blocking Requests
CSS and JavaScript that block rendering delay when your page becomes visible to users. To resolve this:
- Minify and combine CSS and JS files via Webflow’s settings.
- Add defer or async attributes to non-essential JavaScript to load them without blocking rendering.
<script src="your-script.js" defer></script>
- Use Efficient Cache Lifetime
- Make sure your assets (images, CSS, JS) have proper cache headers set to leverage browser caching. This reduces load times for returning visitors. Webflow’s CDN typically handles this, but verify caching settings in your hosting or with any third-party assets you’re loading.
Alternatively, if you don’t want to invest time in optimizing site performance at your own , I recommend to consider using Website Speedy- a webflow app ( (found on the Webflow Marketplace) which automates a number of these improvements, such as , minification CSS/JS, and lazy loading, improving your Core Web Vitals while saving time. It comes with a 14 day free trial and is easy to set up.
@Samuel1993, please review this feature; it may help you. Webflow Introduces Per Page CSS & JavaScript