Mobile loading and header issues

Dazzling
1

Hi,

I’ve recently been working on speeding up my pagespeed and yslow scores for thriveprimal.com, and while I’ve been able to dramatically improve the loading and response speed of the site on desktop, there’s still a huge lag time when loading on mobile. Nothing happens for at least 3 seconds, which I believe is enough to scare off many viewers. I’ve installed lazy loading, run super cache, optimized images to the bets of my abilties etc. Any pointers on what I can do to improve this?

Another mobile issue - I notice that my header image on mobile is pixellated. As per the Dazzling specs, I’ve uploaded a 300x66 image, but this seems to be getting distorted on mobile. Any solution to this?

Thanks in advance,
Will

2

Hello there,

I hope you are doing well today.

Another option to reduce the page load time is to reduce the number of posts that appear on the frontpage, be cause this will reduce the amount of content being displayed and reduce the website loading time.

I have checked the header images for the posts but they do not seem to be pixelated, would you have an image for me to see it?

Best Regards,
Support

3

Hi,

I’ve attached screenshots of mobile and desktop views. I think perhaps the mobile view is stretching the image, even though it’s the correct dimensions?

I’ve played around with reducing number of posts on the home screen, but it hasn’t made any difference to that initial lag on mobile. Just trying to look for other options, as there’s about 3-5 seconds of blank screen before anything becomes visible on the site.

Thanks,
Will

4

Hi there,
Thanks for keeping in touch with us.

Upon further investigation of your site, I’m seeing where your images could do with a little more compression.

For this, have a look at this plugin: Smush – Lazy Load Images, Optimize & Compress Images – WordPress plugin | WordPress.org

For the logo, please add and save the following code to Appearance > Customize > Additional CSS:

#logo img {
    height: 80px!important;
    width: auto!Important;
}

Please let me know if this works.

Best Regards,
Support

5

Hi,

That code worked well, thanks!

I’ve already installed and run WP smush, not really sure how much more I can do in terms of image compressions.

Thanks,
Will

6

Actually now that I’ve incorporated that code and checked the desktop view, I notice that the logo is blurred on desktop. Is there any way to adjust that code to make it only apply to smaller screens/mobiles?

7

Hi there,
Thanks for keeping in touch with us.

So sorry about that, I was supposed to wrap that code in a media query but it totally slipped. Here’s the revised code:

@media(max-width: 550px){
#logo img {
    height: 80px!important;
    width: auto!Important;
}}

Please let me know if that works. :slight_smile:

Best Regards,
Support

8

No worries, glad we got there in the end! Yes it works well, thanks.

9

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support