big gap between PageSpeed Insights from mobile and desktop

[tharwat okab]

Hi,

I ran a PageSpeed Insights test for my website, after solving many optimization issues, finally I've reached 90 score for desktop, but only 74 for mobile, why that big difference?

Regards,

[Rick Steinwand]

Possibly because mobile is fussier about the total mb it has to download and whether compression is turned on.

Probably because your images are too large to fit the mobile screen.

Since you neglected to include a URL and you saw the results, why don't you tell us?

[tharwat okab]

Sorry about the url.

Url: resumesmag.com

About images, I've optimized all of them till there are no warnings.

Regards,

[Rick Steinwand]

Some good suggestions here: https://gtmetrix.com/reports/resumesmag.com/bMteum2P and here: https://www.webpagetest.org/result/171101_2F_ba888563ea8f47ea4a71d4f51159acb7/ You could also try this: https://www.pingdom.com/

You might try moving jquery and your other scripts to the bottom of the page and load them deferred, or better yet, if you use the same scripts on all your pages, combine them into one file. I only use jquery and form scripts on a few pages so have a heavy script file for home, contact us, etc and a lighter one for other pages. That way it's cacheable and I load only what I need. Another option for me would be to load the light file for all pages and a second script with jquery and form scripts for pages that need them.

You have a LOT of css in the head of your page. ideally you should load just what's needed to render the page and load the rest with your LoadCSS file. Have you tried LoadCSS for your fonts? These are good: https://jonassebastianohlsson.com/criticalpathcssgenerator/ AND https://www.sitelocity.com/critical-path-css-generator

I improved my heavy home page by deferred loading (via JS) things like Youtube video and slider images. Most of my content is visible after half a second and page complete after 2 seconds. 

I see you use LoadCSS. Have you seen this: https://github.com/filamentgroup/loadCSS/issues/238

[tharwat okab]

Hi Rick,

Thank you for your response, and sorry for the late one from me.

About moving jquery and your other scripts to the bottom of the page and load them deferred, can you provide description for that, or you may refer me to a link.

I did many steps trying to optimize the website, one of those was using Critical Path CSS Generator which improved speed by about 7%.

Regards,

[Rick Steinwand]

Loading deferred, just means adding "defer" to the script line like this:

<script defer type=text/javascript src="/scripts/allscripts.js"></script>

You might also try async, but defer preserves the current loading order so in theory is safer.

Moving scripts to the bottom of the page means removing them from the head section to the bottom, just before the closing body tag.

In theory, just adding defer or async to all your external scripts might fix the issue, but definitely move your inlined scripts to the bottom.

[tharwat okab]

Thank you Rick !

I'll give it a try, and will give you a feedback later.

Regards,