Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
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
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.
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?
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?
Thanks for the reply, where would that include be then? The code I pasted was from the theme.liquid file.
I have no idea, every theme is diferent, do a search for theme.js in theme.liquid, or the entire theme files.
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
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025