Streaming live at 10am (PST)

Site speed slow on mobile

#1

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

Webflow Not Resizing Inline Images?
#2

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

#3

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

#4

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
#5

There is some work to do.

  • Use JPEG 2000, JPEG XR, and WebP image formats. They have superior compression, so your pages will load faster,
  • Combine and minify CSS and JavaScript files to reduce the number of requests a site makes when smb visits it,
  • enable lazy-loading.
    Do your best cause after the November Page Speed Insights update mobile optimization is a must. Keep this in mind.
#6

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

#7

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

#8

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.

#9

There are very few enthusiasts in this business. People got used to work with old, well-known formats))

#10

There were many threads about it here. Like this one: Progressive loading of images

#11

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

2 Likes
#12

These things are connected I believe. For the lack of these format’s popularity supporting it is not a high priority for browser devs. And low browser support is a reason of not using it. Closed loop=)

#13

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.

#14

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
#15

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.

#16

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