Site speed Largest Contentful Paint element 11,810 ms

Site speed Largest Contentful Paint element 11,810 ms

Babycoo
Tourist
7 0 2

Hi, 

 

I tested website speed by page speed insight, the result shows that LCP is 11s due to the H2 headings. How can I optimize the code? I am using Minion theme, AVADA SEO APP.     The bouncing rate is extremely high, due to the low speed.  I11.jpg

BabyCoo Australia - Your Local Top Choice for Premium Baby Products with affordable price! Explore our eco-friendly toys, high-quality baby carriers, Toddler Balance Bike and stylish nursery essentials. Find the perfect gifts. BabyCoo - Where Little Wonders Meet Big Adventures!
Reply 1 (1)

PageFly-Oliver
Shopify Partner
878 190 186

Hi @Babycoo ,

 

These are the following reasons that cause the low speed:

1. Image Size: 

Serve images that are appropriately sized to save cellular data and improve load time, you need to optimize image sizes before uploading

=> Convert your images to a next-gen format

The only downside of these next-gen formats is browser support is not universal for them. Check out these links below to see the current browser support for each format.

  • WebP
  • JPEG 2000
  • JPEG XR

Image formats such as JPEG 2000, JPEG XR, and WebP generally compress better than PNG or JPEG, which means faster downloads and less data consumption

2. Many DOM sizes or code from the theme you are using

3. Minify files

The best place to get started to reduce page load is to minimize HTML, CSS, and JavaScript files. These files determine your site’s appearance – like the clothing and shoes that you wear – so it’s vital to run them through some quality filters.

Let’s start with reducing the size of each file and the total number of files. This task includes removing unnecessary formatting, whitespace and code.

  • To minify CSS files, you can use CSS Minifier.
  • To minify JavaScript files, you can use JavaScript Minifier.

4 Eliminate render-blocking resources 

The most common render-blocking resources are JavaScript and CSS files that are located at the head of your web page. They load in the above-the-fold area (or the area that you normally see on a website before scrolling down to see the rest of the content) and they are a part of the critical rendering path used by a web browser.

5. Defer unused CSS 

To defer unused CSS, you can remove unused rules from stylesheets to reduce unnecessary bytes consumed by network activity.

I noticed that your store has some code from other third-party apps, you can contact them for more details.

Prioritize above-the-fold content (lazy loading)

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.