Struggling to improve mobile load speed

I’ve been trying to speed up my company’s website ever since Testmysite.thinkwithgoogle.com ranked our speed as poor. The largest recommendation I could find according to both Webflow’s blog and Google’s PageSpeed Insights was that my images on mobile were too big.
So, I spent the day in an image editor making downsized and more heavily compressed versions of every single image on the website. It was exhausting. And the worst part was, Google originally ranked my site as taking 3.2 seconds to load. And now it’s ranking it as taking 3.6 seconds. An entire day of work somehow made my website LESS efficient.

So I’m here looking for help from users who are more experienced than me. What are we doing wrong with this website and how can we get it to load within a reasonable amount of time so we stop losing customers to load times?

The website is located here: https://www.aandbpets.com/


Here is my site Read-Only: https://preview.webflow.com/preview/abps-nexus?utm_medium=preview_link&utm_source=dashboard&utm_content=abps-nexus&preview=48f0a285c8388b9c894178d8f4f837c9&mode=preview

it’s likely because you have tons of different instances of elements for mobile and desktop. The way your site is built is very much incorrect. Have you spent time on https://university.webflow.com watching the many videos on how to properly build your site? I’d suggest watching those and rebuilding your site from the ground up. I don’t think it’s only the images but how many instances you have of the elements, styles etc. Good luck!

@winterdrake, what Dave is probably getting at is there are a lot of redundant elements on your page that are unnecessary so you are loading resources multiple times. It’s okay, I wouldn’t say your site is totally “incorrect”, but there are definitely improvements you can make.

I didn’t see your site before you worked on the images, but I will say is that wasn’t a waste. If we look at the network waterfall of your site you can see that your largest image is 136kb, which is good. Usually when someone is having these issues they are loading 5,000 x 8,000 pixel images that are 5 mb each, so at least you don’t have that problem:

However, you do have redundant elements in a few sections on your page, for instance:

It kind of looks like you are trying to put a different grid in for each breakpoint, which is not necessary. Instead what you should do is adjust a single element for each breakpoint so that the same content is useable at any size.

So your first grid element (which by the way is set to display:flex rather than grid) can handle any scenario, like this:

image

Does that help point you in the right direction?

I would recommend learning a bit more about the concepts of responsive design and how to efficiently lay out your pages. Those concepts are super useful and will make sense after a bit of practice.

Thanks for the helpful advice @sam-g , I can’t remember why exactly i gave each layout its own grid object but i will try it your way. To clarify, does this mean that invisible objects are fully loaded on page load, even though they’re invisible?

It depends, different browsers handle it differently and they are getting smarter, I believe newer chrome versions may not load at least some objects whose parents are set to display none.

However, I would guess this is at least part of your problem. And when it comes to site maintenance you have one element to maintain instead of four. And that’s just for this one div.

Alright, I’ve removed all the duplicate elements and made the grids and stuff adaptive to all displays. Load speed is down to 3.1 seconds on Compare your mobile site speed which is definitely better but still classified as Poor.

Do you or anyone else have any other ideas on how to improve this without compromising the design of my site? I’d love to impress my boss by having a website that loads fast enough to be considered acceptable by google.

Try looking here: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.aandbpets.com%2F

It will give you more specific opportunities for optimization:

@winterdrake It seems your website’s main issue is the size and format of the images.

I recommend you used an SVG converter to change the format of your images to SVG, this will help mobile phones load the images faster and directly improve the website speed overall.

I use online tools like Convertir PNG a SVG (Online y Gratis) — Convertio to make these conversions.

Also, be careful with the number of elements and classes you’re using, this may bring some speed issues as well.

I hope this solves your current issue.

Cheers,

This is a bizzare piece of advice. Converting a raster image to a vector image isn’t simply a compression technique, it requires the computer to trace the image and create a crude copy. I tried putting one of our badges through your converter and as expected, it looks nothing like the original.

I have one image on our site, the logo, of which I have the source svg and I could upload that, but I’m not sure how you’ve made svg conversions work well in the past with that website. It seems like it wouldn’t work well aside from black and white silhouette clipart.

@winterdrake there are several ways to convert images to SVG from PNG or JPEG, sometimes this happens with some images.

You can see that image as SVG on:

https://uploads-ssl.webflow.com/5efa1fa805b7056067c8c02e/5efa29a80240532e764e1479_5d0cf246e8ded07d4b6f439b_YelpAward6.svg

You may have to go to photoshop and convert them.

The svg is 46.3KB and the compressed JPG is 36.3KB. Embedding the file within a vector graphics format doesn’t compress the file, nor does that make any sense to me how it would.

image

Hi @winterdrake, you can read these articles that talk about the type of file you need to use and how to optimize them in order to increase performance.

I hope it helps,

I use convert mp3 https://www.convertmp3.cc/en1 youtube mp3 converter