@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
@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?
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.
@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/
@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?
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 )
For display: swap;
For preloading your 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.