How to fix Max content draw make them to be good

[NinescapeLand]

Hi guys, My store is the Ride theme, and I according to the Shopify advice adjusted my store, but the max-content draw still hasn't improved.

Now, I don't know how can I fix Max content draw for my store, can you give me some advice?

[NinescapeLand]

By the way, My store URL is https://ninescapeland.com/

Thanks for your help.

[HAPOApps]

Hello @NinescapeLand ,

Improving Max content draw is one of the most important thing to enhance the user experience on your site. No one wants to access a site that loads for so long. This element is core web vital that measures the time it takes to load fully the largest content element in the viewport. As I checked your site via Google PageSpeed Insights, your performance score is pretty low in the mobile version and just reached an average score in the desktop version as you can see as the image below:

In the diagnostic section, Google has recommended some best practices to improve your overall site performance. But I think it’s gonna be best if you have a developer in your team who can read, check, and troubleshoot the errors and know how to fix them. As I observed, not so many Shopify merchants are familiar with these diagnostic recommendations. 

Okay, now turn back to your question, about how to improve your Max content draw, there are still some ways that I think you can apply right away on your site:

• Optimize the media files and images: compress your images to a lower size, you can use some online tools by searching them, they can help you compress without losing the quality of the image. The media file format should be standardized with modern image formats like WebP that can load faster than PNG or JPG. Additionally, lazy loading is another great way to try, but you need some assistance from a developer.
• Optimize your fonts: Don’t use so many fonts, font variants, or weights,... It can take your site more time to load. 

I think the best way is still to hire a professional Shopify expert or developer to troubleshoot and fix these performance issues. Because with the two practices above, you have just solved the surface of the iceberg. 

[onescales · Accepted solution]

First of all your website looks good in speed when loading so i wouldn't obsess too much about this score. Even if you make it perfectly, you would not see a difference in your seo or probably conversions as it is already good. 

that doesnt mean that you shouldnt improve further, but don't spend too much time on it. 

what i would do is:

1. preload the main banner image on homepage

2. lazyload the youtube video

3. remove the last sections on homepage

also made a diy tutorial for speed - https://www.youtube.com/watch?v=9P0ZUkLAEQY

[NinescapeLand]

HI @onescales 

Thank you very much

I according to your advice to lazyload the YouTube video, I think that's helpful, but my main banner has a URL, so I don't know how to preload this image. I will be glad if you tell me how can I preload my banner.

[onescales]

can you specify on which page and which url? i can check

[NinescapeLand]

hi @HAPOApps 

just my home page: https://ninescapeland.com/

The banner have link

[onescales]

The link doesnt matter in the preload, only the loading of the image. You can keep the link while preloading.

The steps are theme dependent so hard to know without access. Do you have a developer? It should be a 5 minute task for them if they are familiar with your setup

[NinescapeLand]

okay, thank you for your reply