Do you notice the lazy loading on this site?

chazeichazy1
New Member
3 0 0

@asjain what else do you think i can do? I'm looking at pagespeeds test results and was thinking of working on taking out unused css next https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fmairobotics.com%2F

0 Likes
chazeichazy
Tourist
27 0 3

@oreoorbitz thats a good point about safari. native loading might not be the best choice for us in this case then since a majority of our visitors are on mobile. any recommendations on how to move forward?

0 Likes
oreoorbitz
Shopify Partner
100 10 63

So if you want to further improve your pagespeed insights score, here are my recommendations, and thoughts

Remove unused css:

This is really tricky to implement in shopify, mainly because of all the conditional logic.

Imagine you get rid of the css for the newsletter section, since your not using it, but then you decide you want to have it, you'd have to go through the trouble of adding it back. Or imagine you have content that will show depending on whether a user is logged in or not.  There is a library to remove unused css, PurgeCss , but to implement it into  shopify via automatic build process would require a complicated setup.

So things I recommend you do:

Remove lazyloading from the largest contentful content, in your case the image of a cellphone

Add preload hint pointing to your largest contentful content ( the image of a cellphone )

Make resources non render blocking

Don't load the youtube video till a user clicks on the banner for the video's banner image. Load it using AJAX once a user clicks on the image

Consider deferring the load your chat app if it can be done.

Add display: swap; setting to your fonts. 

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes
0 Likes
asjain
Excursionist
9 1 1

@chazeichazy1  TO improve your score in pagespeeds test results you need to do some changes in code and defer js and lazy load UN-use Css file which are not needed to be load at first fold of website and load them all on mouse move but i warn you by doing so may result in break in website functionality and design so take help from developer who have expertise in Liquid programming language because shopify use Liquid language or for any support or help ping me i have expertise in Liquid programming language or for more help read here :-    Best Practices and Tips to speed up your Shopify Store or contact me for more help :- https://w3speedup.com/contact-us/

Founder of W3 SpeedUp (Shopify optimization experts, theme customization, Can Speedup all types of CMS and Framework).
E-mail: support@w3speedup.com
Skype: support@w3speedup.com
0 Likes
chazeichazy
Tourist
27 0 3

@oreoorbitz i will check out purgecss thanks. so youre suggesting i replace the lazyloading with preload hint? how do i do that? can you point to a specific example where i can make a resource non render blocking? how can i implement the non-loaded youtube video if i uploaded the url using shopifys video block? what does display:swap do to my fonts?

0 Likes
oreoorbitz
Shopify Partner
100 10 63

There's a limit to how much help I give out for free, because of time constraints, so I can't break down every fix I recommend exactly.

But if you want to implement these suggestions yourself, there are plenty of resources to help understand.

For making resources non render blocking( in your case just css )

https://web.dev/render-blocking-resources/

https://stackoverflow.com/questions/32759272/how-to-load-css-asynchronously#answer-46750893

https://web.dev/extract-critical-css/

https://www.sitepoint.com/how-and-why-you-should-inline-your-critical-css/

 

For display: swap;

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

https://css-tricks.com/almanac/properties/f/font-display/

For preloading your largest contentful paint:

https://web.dev/preload-responsive-images/

https://www.marfeel.com/resources/blog/speed-up-largest-contentful-paint

When I say remove lazyloading, I mean only from the largest image that is above the fold.  You want the first big image a user sees to load as fast as possible, since that's the draw of your page. The rest of your images should be lazyloaded

Not loading the youtube video until a user clicks depends on each set up. I suggest not attempting it unless your comfortable with front end coding.

This is just an example of someone's set up to "lazyload" a youtube embed: https://webdesign.tutsplus.com/tutorials/how-to-lazy-load-embedded-youtube-videos--cms-26743

However, your code in your theme will be completely different, I'm just sharing the link as an example of the idea.

 

If your not comfortable with coding enough to apply any of these, and really want to improve your PSI score, I suggest you hire a developer to help.

Keep in mind, you might not need to do all these suggestions, they will certainly help your PSI score, but maybe your site does just fine as it is.  There are developers that don't think google's metrics are important, I think they are, but it's up to you to decide.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes