Streaming live at 10am (PST)

Site speed slow on mobile

Hi,

The page speed insights report for the mobile version of my clients website rhizomemedia.co is showing a page score of 47 on mob vs 86 on desktop.

CloudApp

One of the suggestions is use new file formats but they’re not supported on webflow yet. So not really sure how to improve mobile.

Any suggestions would be really appreciated. Thank you.

https://preview.webflow.com/preview/rhizomemedia?utm_source=rhizomemedia&preview=c1f23b07ae5266a2293346ab250d62b8

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

Hi dram , thanks very much for the feedback. We’ll try your suggestions where possible and let you know the outcome. Thanks a lot.

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.

2 Likes

Hi @Eddy,

Thanks for your reply. The new formats aren’t supported in webflow or all browsers though, are they?

We already minify everything in the webflow dash.

Can you clarify how to enable lazy loading please?

Thanks

Graham

Similar question. I address next gen image formats recommended by Google Page insights.

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.

The issue is browser support. It’s not there. When it is, then things can change.

2 Likes

Can you direct a noob to a good site on how to combine and minify?

I tried a couple of minify online tools and they broke my site.

The file requests seem to be one of Googles biggest complaints.

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.

1 Like

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.

1 Like

Where do I find the image path? I have multiple on my home page. My moble speed is comign out at just 36 :frowning:

traceyw can you give me more information? I would be happy to help if I can.

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 https://www.youtube.com/watch?v=qQ1oQJJn1nQ 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?

@Steven_Harris here’s my link :slight_smile:
https://preview.webflow.com/preview/educ8-training?utm_medium=preview_link&utm_source=designer&utm_content=educ8-training&preview=2a67e5fea623529fe1f6872d782606d6&mode=preview

The site is hosted on webflow.

I know very little about adding custom code. I’ve added some in project settings for a live chat function.

@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.

1 Like

@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.