Google Insights is really weird. It showed 37 for mobiles but 91 for desktop for me.
The one thing that is obvious - your images are very large for the first page. Just use this service for example to minify your png’s. This will cut page size in about a half at minimum, increasing some vital stats for insights.
Another advice that insights give you (never seen this on my own pages btw) is to basically simplify your layout as in less nesting. This is kinda broad and not very clear advice which may require complete refactoring of the page and is not exactly easy to do I guess.
Not much you can do about javascript parsing and loading aside from again complete refactoring of all your animations to be sure they aren’t resource heavy.
I think sinply reducing all your assets sizes will do much to score better. Give it a try!
edit: do not forget about your intro video! almost 4mb is insane. Reduce the size and quality to make it less than 1mb at least
Really the main issue with Google’s mobile site speed is that they gauge it as if the site is being loaded by a person on a budget smart phone connected to a 3G network.
It’s ridiculous. Honduras has had 4G for over 4 years, and it’s just about as Third World as you can get.
This is honestly just ridiculous. I mean yeah, those formats are more optimized but nobody uses them and adoption is happening at a snail’s pace if at all.
Defer image loading.
The html
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">
The javascript
<script>
function init() {
var imgDefer = document.getElementsByTagName(‘img’);
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute(‘data-src’)) {
imgDefer[i].setAttribute(‘src’,imgDefer[i].getAttribute(‘data-src’));
} } }
window.onload = init;
</script>
Usage
For most pages you can simply put the script right before the end body tag in your html. As far as the images go you want to copy the code above (labeled "the html") and replace "your-image-here" with your actual image path.
It’s also good to cap your max image width and use a tool like TinyPNG(website/photoshop plugin) or JPEGmini(app) to compress your images before uploading to Webflow.
I would add that it is totally possible to score high on mobile. It’s about the choices you make.
I pulled a 100 on desktop and 91 on mobile for a rich home page, built and hosted on webflow. The page could have scored higher, but I am using quite a few HDPI images and a number of interactions.
traceyw I see now you are following the advice I gave one year ago. Web Development changes very quickly. Shortly after I wrote this suggestion, Jen Simmons at Firefox Mozilla made a video about using the old image format of supplying height and width in the html and relying on this for responsive images. I do not have a link to that specific video, but here is a link to Mozilla Developer Why are there Four Firefoxes? - YouTube Again, I will help you if I can but I need more info
Hi @Steven_Harris I’m just trying to work out how I can get my page speed up from 36-44. I’ve gone through the images and compressed them using tinypng, google report suggested next gen files like jpeg2000 but I can’t see that Webflow accepts these at the moment.
@traceyw no you would have to custom code and I would not worry about next gen. It can help give slight improvement but is not everything.
if you are trying to use the image defer script I mentioned above the image path in Weblow is image/ myimage.png
where my image is the filename and png can be jpeg or whatever. One of the things Webflow has done that is great is it automatically provides different image sizes for different devices.
There are other lazyload and image defer options available. A google search may get you stack overflow or another code forum with options for this.
If you provide a read-only link I will look at your Webflow project.
May I ask if you are Hosting your site on the Webflow platform, or are you exporting the code and uploading it to your own hosting environment?
Do you know how to add custom code to your Webflow project?
@traceyw - First tip: 10.5 MB of the page load on mobile is just four images. First place you can start to fix your score. If you use background images you have to determine the max needed dimensions for your design then optimize your images to match the dimensions and quality needed.
@traceyw you have an awful lot going on on your landing page. Lots of images and a video. I would have to suggest splitting some of this up to another page. Or if necessary defer loading of below the fold content. Inline the CSS for above the fold content. Both are possible in web flow by adding custom code.