Re: Total Blocking Time

How can I improve Total Blocking Time for better store performance?

justgoodki
Tourist
12 0 1

My store performance on Google is poor according to diib.com. The cause seems to be in the backend. Currently, my shop has 1,580 ms in the test "Total Blocking Time" which is categorized as POOR. can anyone please advise if this can be improved? I already asked Shopify Support but they have no knowledge of this issue.

Any help very appreciated.

Adam

Replies 8 (8)

flareAI
Shopify Partner
2405 223 541

Hello @justgoodki,


Gina here from flareAI.

 

Please share your website URL for a better review.

 

I can provide some insights into the reasons for the website's slowness. You can check these tips and the actions as needed.

 

1. You can run the Shopify Theme Inspector for Chrome to identify the lines of code that are slowing down pages in your online store.
2. Image compression is important and a necessity for faster loading of web pages. Make sure your images are of good quality and do not add too many images on a single page. You can try some tools like https://tinyjpg.com/.
3. Removing unused app code is a best practice that avoids running code for unused features and makes your theme code easier to read.
4. Using a theme that is optimized for performance means a theme that is responsive, fast, and takes minimal time to load the page.
If you choose a theme with numerous sliders, fancy animations, advanced navigation systems, etc., will affect your page speed. If your theme is loading slowly, consider disabling the theme features you don't need.
5. Themes contain CSS, JS, and HTML which can increase and affect your store speed. So disable theme features you don't use.
6. Loading extra data your customers aren't using can impact your store speed without adding value.
7. Using slideshow, which are high-quality images combined with transitions, takes time to load when the user clicks the link to the homepage. So instead you can use a single high-quality hero image.
8. Use a System font which is a font that is already installed on most computers. For example Segoe UI, Times New Roman. If you use a font that does not yet exist on your customer's computer, then the font has to be downloaded before your text can be displayed. This impacts the time that your store takes to load.
9. Replace GIFs with static images
10. To reduce the initial load time, you can use Lazyload technique
11. Remove third-party JS scripts and Shopify App which you are no longer using
You should disable app features you don't use, or you can remove the app if you don't need it. If you are removing an app make sure to remove the code that was added as part of the app install process.
12. Minimize HTTP requests. For example: Combine & inline your CSS scripts
13. Avoid unnecessary redirects and fix broken links
14. Use minified CSS and JS files
15. Don't add too many images on a page
Adding too many images on a page can be frustrating. It can significantly slow the load time of your website. Also, it can overwhelm visitors, which will ultimately result in a poor user experience, a high bounce rate, and a high probability of lower rankings in relative search results.

 

If your website takes longer than 3 seconds to load, 40% of your traffic will be lost. Apart from speeding up your store, for getting better conversions, make sure your store products are Found on Google. When your customers search on Google, your product can be found only if your page is indexed. Note that once a URL gets indexed, customers will start finding your store through organic searches, you will start getting order conversions for virtually zero cost. Making it sustainable business growth. flareAI helps to get your new products found on Google. flareAI works every day for you. Get sales from Google and 20+ world's largest free sales channels, Single click start!


Hope this helps.


Gina

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing
justgoodki
Tourist
12 0 1
Hello Gina, my website is justgoodkit.com.au

speedboostr
Trailblazer
136 20 26

Hi, to fix your Total Blocking Time you need to defer all javascript and css assets to the end of rendering.

For example take a look at your theme.js script include, and change it to add the defer attribute so it appears as follows:

<script src={{ 'theme.js' | asset_url }}" defer></script>

 

This will mean it gets loaded at the end of execution, thus freeing up rending and stopping blocking.

This is all good for JavaScript - although the trouble here is with removing render blocking on CSS because this will cause a flash of un-styled elements first while the styles are loaded. Which doesn't look so great!

To fix the css render-blocking, you will need to inline your base styles which are required for the first render.

 

For achieving this you simply need to copy-paste the styles used to render your header, and home page content into a <style> block in your header. You can find these in your developer tools under the coverage section.

 

 

Creator of Theme Scientist (A/B testing app and theme scheduler). Creator of Shopify Analyzer (1st performance analysis tool for Shopify, free for the community). Founder of Speed Boostr (Shopify optimization experts + app developers). More apps from our team: Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).
stevenarmstead
Visitor
2 0 0

Hello,

 

I'm working with a client's website and their theme.js include looks a little different than what you are displaying here. How would I update this: 

<link rel="preload" href="{{ 'theme.js' | asset_url }}" as="script">

to defer the scripts like you have shown in your post?

oreoorbitz
Shopify Partner
257 31 132

This isn't a script call, this is a preload hint, which you shouldn't have for javascript files.
see how its a <link> tag, not a <script> tag?

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949
stevenarmstead
Visitor
2 0 0

Thanks for the reply, where would that include be then? The code I pasted was from the theme.liquid file.

oreoorbitz
Shopify Partner
257 31 132

I have no idea, every theme is diferent, do a search for theme.js in theme.liquid, or the entire theme files.

Available for pagespeed consulting
https://www.upwork.com/freelancers/~01a19b6cd90193f4f6?viewMode=1&s=1017484851352698949

Cedcommerce
Shopify Partner
718 76 113

Hello @justgoodki

 

Here are some tips that you should consider for improving the page speed of your website.

 

Page speed can be measured on the following pages 

Pagespeed.web.dev (https://pagespeed.web.dev/)

Gtmetrix (https://gtmetrix.com/)

 

1-) Ensure text remains visible during Webfont load:  Fonts are often larger that take time to load and browsers hide text until the font loads, causing a blank appearance. To avoid this, you can allow only those fonts to load first that are relevant to that page text.

 

2-) Reduce the impact of third-party code: There are a few third-party codes that reduce page speed while loading the page like Facebook, Instagram, etc.  We can make the theme execute after some time when the whole page gets displayed.

 

3-) Use passive listeners to improve scrolling performance: Passive listeners enable developers to opt-in to better scroll performance by eliminating the use of mouse wheel scroll or touch scroll when not needed with event listeners. 

 

4-) Minimize main-thread work: Removing third-party JavaScript, and reducing the complexity of your styles and layouts can help you optimize the page speed.

 

5-) Avoid an excessive DOM(Document Object Model): Reducing the DOM size can help Increase the speed of your website.

 

6-) First Contentful Paint: The First Contentful Paint (FCP) metric measures the time difference between a page load start time to the page's first content appearance. According to lighthouse, FCP must Be Below 1.2.

 

7-) Reduce JavaScript execution time: Javascript code must be optimized and compressed for better page speed.

8-) Serve static assets with an efficient cache policy: Serving static assets with an efficient cache policy helps improve page load times on repeat visits by storing these files locally in the user's browser.

 

9-) Avoid chaining critical requests: Chaining critical requests is a sequence of requests that depends on each other and are crucial for generating content on the web page. The “avoid chaining critical requests” warning means that the critical resources that load the web page are excessively large.

 

10-) Largest Contentful Paint element

Largest Contentful Paint (LCP) is a Core Web Vitals metric, that ensures how fast the main content of a web page loads. A good website must have an LCP of 2.5 seconds or less for at least 75% of page visits.

 

11-) Avoid large layout shifts: Large layout shifts can affect your page speed. It can be reduced by using a media query and fixing the image by assigning the width and height of images thus helping to better page load speed.

 

Hope it helps, let us know if you have any other queries related to site speed optimization.

 

All the best, 

CedCommerce

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here