Properly size images on mobile?

Publishing help SEO
1

Hi, I am using Google PageSpeed to check what needs optimizing so I can improve my websites load times but I don’t understand why it says I need to properly size images on mobile. I don’t understand how they are not properly sized. Here is the PageSpeed link https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Ffooxea.com%2F&tab=mobile

here is my read only link https://preview.webflow.com/preview/fooxea?utm_source=fooxea&preview=642701297951d08087e9cba40bd86c2b&mode=preview

2

It doesn’t like than vid! Switch it to a jog on mobile … not not! Looks cool.

Have you compressed the images ?

3

Some tips I’ve got.

  1. your square images are way too big. Most of them are 1080px by 1080, try scaling them down to say 600px by 600 or so. Don’t just resize them in webflow. Truly make them a smaller size in photoshop or a similar program. Run them through a compressor like tinypng.com after you’ve resized them.
  2. Clean up those unused styles
    image
    image1629×789 393 KB

    Those two should help :slight_smile:
4

Cleaned up the styles and scaled all the images down to 720 x 720 and used tinypng on them : )

It’s still pretty heavy though. I’m trying to figure out how to use lazyload on the images and embed but I can’t figure it out. There’s a thread on it but it’s still a bit confusing Lazyload for Webflow Images - #30 by anthonysalamin

EDIT: I got to implement lazy load which helped a lot. Still not doing great on mobile though. I’m not sure what else to change

5

I’d say it’s looking pretty good @nxwebflow . The biggest scorer at the moment is ‘next-gen formats’, not something that’s worth worrying about IMHO. At least at the moment, it’s not at all implemented much.
Even google itself doesn’t use them apparently.
I would check your ‘product’ images, the t-shirts are still 1000px and 250mb each.

image
image1600×789 221 KB

The only other thing showing up is your shopify buttons.

6

Correct me if I’m wrong, but if an image like you’ve shown here is viewed on phone, doesn’t Webflow serve up a responsive variant that renders @ 200px?

7

That’s odd that it shows the 1000 x 1000 product images for you. on my screen it shows the updated ones that I changed to 720 x 720 and uploaded to tinypng

8

@nxwebflow ah, I was looking at a different page, I was looking at your ‘support’ page, whoops :slight_smile:

9

ah, ok no wonder. Do you have any other suggestions?

10

That’s all I got @nxwebflow. I do wonder if you’ve got another way to add your fonts? They take up some space as well.

11

What other ways of using fonts are there?

12

@nxwebflow are they embedded somehow through a custom upload? Your read-only link doesn’t work anymore so I couldn’t see how they were used. There’s a typekit integration as well.

13

I just used the webflow font uploader to upload them heres my read only link. not sure why it stopped working: https://preview.webflow.com/preview/fooxea?utm_source=fooxea&preview=2e75fd68481745122f2a84a493d7e270&mode=preview

14

I deleted some of the fonts I wasn’t using. Not sure if they’re still downloaded by the user if I upload fonts into webflow but don’t use them. the google pagespeed says my product aren’t being lazyloaded on mobile but its working on desktop. I’m not sure what the issue is?