[Resolved] Is it possible to upload images specifically for mobile?

[Johanna]

Hi,

We’re trying to optimize our page speed load on mobile. I’ve heard that it’s possible to upload images specifically for mobile on other WP theme builders, is that also possible to do in GeneratePress?
If yes, how can I do that?

BR

[David]

Hi there,

there is no function within WordPress that allows you to select an alternative image for mobile.
What WP does do is auto generate src-set images of various sizes for different display requirements. If there is no CSS or other function interfering with the intrinsic image size then then the Browser will select the most appropriate sized image.

Is there any specific area where you’re having issues? Happy to look at the site to see if we can suggest some improvements.

[Johanna]

Well, long story short, Google search console shows that we have poor LCP on mobile. A SEO consultant looked at the GSC results and said that one easy way to improve that is to make sure that images are optimized for different screen sizes.

However, when i’ve been reading on this matter, it seems like WP already optimize the images for different screens to some extent- a set of default sizes (as you said).

I’m stuck… I guess it’s possible to optimize the images even more than what WP already does but that may require adding some additional code (which is not really my expertise).

Thanks tho!

[David]

The LCP time provided by Google simply refers to how long it takes for the Largest element ( as Google assumes this is most relevant to the visitor ) on the page to be displayed. Maybe the LCP element being identified is an image – but they are loading responsively and there is very little improvements to be made.

I ran a Page Speed Insight report and your LCP is 4 seconds. But your FCP ( which is the time taken to display the first pixel of content ) os over 3 seconds.

So the problem starts before any content is actually displayed.

Running a GT Metrix report, good news is your sites server is responding fast, but i can see the site is making 83 network requests. Which is a lot. In perspective the generatepress site makes 30 something.

Lets begin with some simple improvements regarding fonts:

1. Customizer > General change Icon Type to SVG. It won’t make much of a speed difference but thats 2 less font requests for the themes icons ( Search icon, nav toggle etc. ).

2. Google Fonts – you’re using Montserrat and a lot of the variants ( font weights ). If you know which variants you’re NOT using then you can deselect them in Customizer > Typography > Body:
https://docs.generatepress.com/article/google-font-variants/

The less variants means the less requests to google servers.
If you wish you can serve them locally ( so no DNS lookups for google ) you can use this Plugin:

https://wordpress.org/plugins/host-webfonts-local/

It is still recommended that you remove as many redundant variants as you can.

Now lets look at 3rd party requests – over 30 of your requests are made to other servers. Google Fonts ( resolved above ), Google Analytics, Facebook, Hubspot etc. Not much you can do about changing how quickly they load – but you can defer the loading of those scripts using the Flying Scripts plugin:

https://wordpress.org/plugins/flying-scripts/

Its a bit techy but you can see what scripts you may want to defer by Right Click > Inspect your site and look at the Network Tab > Javascripts. Only defer scripts that are coming from another server.

Finally if you think there is still room for improvement you can follow our optimization tips here:

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

Sorry if thats a lot to take in – might be best to work through them one at a time. Remember the main goal is to reduce FCP – any improvements there will be reflected in the LCP

[Johanna]

Thank you so much for your tips! I will definitely take a look at it!

[David]

You’re welcome 🙂

[Author]

Posts