[Resolved] Problem with my site speed on mobiles

[Vesna]

Hi!
I did a google site speed test, and it showed very poor speed on mobiles – 33 out of 100, while on a desktop is great (91)!
Here’s what I’ve got from PageSpeed Insights as a suggestion: https://developers.google.com/web/tools/lighthouse/audits/offscreen-images
Could you, pls. help me with some code to install it on my site in order to improve my site speed and solve this issue.

Thank you in advance.
Best regards,
Vesna

[David]

Hi there,

here are our optimization tips:

https://generatepress.com/fastest-wordpress-theme/

Regarding images, the slider at the top of the page has about 7 slides. each of them have a background image which is render blocking, ie. the rest of the page don’t load until they have. I would reduce the number of slides ( or personally avoid having sliders especially above the fold )

The rest of the images are fairly small and shouldn’t be a real concern. You can look at one of the may Lazy Load plugins out there, this may resolve the issue.

As a general note the Google pagespeed test for mobile can be quite deceiving. It simulates the loading across a base 3G network, and is reporting a 13sec load time when in reality it is only taking a few seconds.

[Vesna]

Hello David,
Thank you for your quick reply.

There are a few things I’d like to highlight:
-There’s a slider with 3 slides (not 7)
-The slider was there from the beginning… I have this site for about year and a half
and haven’t been having speed problems so far…
-My website speed is tested both using my site hosting platform tools and Google Developers test. The result was the same! They both showed poor mobile performance.
-In my message, there’s a link with a Google Devel. suggestion of having an intersection observer in order to improve my site speed on mobiles. I think that this suggestion makes sense.

I’d like to hear your opinion about all-above-mentioned, as well as to have your support in direction of really improving my site speed on mobs. That was the main reason to choose GeneratePress and that’s why I’m Premium.

Thank you in advance.
Best regards,
Vesna

[Tom]

Offscreen images are images that the browser is downloading which aren’t immediately viewable by the user. Sliders (no matter how many slides) would definitely trigger this kind of warning. So will images that are further down the screen.

One solution is to use a lazy loading plugin, which makes it so images on your page only load when they’re viewable. I’m not sure if slider images can be lazy loaded – it might be something you need to ask the slider support team. There are quite a few lazy loading plugins out there if you do a quick search for them.

Other than that, I would make sure all of your images are optimized. An online service like this can be really helpful for that: https://imagecompressor.com/

The other issue I’m seeing is Font Awesome being loaded by Elementor. If possible, I would try to not load Font Awesome, and only load specific icons you need.

Hope this helps 🙂

[Vesna]

Hi, Tom!
Thank you very much for your detailed answer:)
I appreciate your suggestions and hope to solve the issue as soon as possible.
Wish you all the best!
Kind regards,
Vesna

[Tom]

Glad I could help! 🙂

[Vesna]

Hello, Tom and GPress support,

Your suggestions were really great! Unfortunately, my site speed issue is not completely solved.
My hosting platform support has informed me about the following: “We apologize for the inconvenience caused to you. But, we can see that there are some render-blocking resources and unused CSS which need to be eliminated. Also, there are some images which need to be optimized. In this case, you will have to discuss this with your theme provider as that will certainly help”.

Thank you in advance.
Vesna

[David]

Hi there,

the optimization tips link i provide here are worth performing. It will combine, minify and cache CSS and Javascripts. Which should make a significant improvement.

Unused CSS cannot be stripped out as your Theme and Plugins are loading them and would be needed if you add more content or use different features. GP’s CSS is tiny – uncompressed its around 30kb. In comparison Elementor alone is around 300kb. You can look into other cache plugins like WP Rocket, although complex to setup, they provide Critical Path CSS which loads just was is was required for above the fold first. But the biggest render blocker on that page is still the Slider.

I am not sure where your server is based, but i ran a London and US test and from both locations there i around 1.5 second waiting time.

[Author]

Posts