Tmpagespeed Tips

With a theme from Shopify theme store and just by using TMpagespeed, you can get 90+ scores on Google PageSpeed Insights. However, if your theme is customized and has a lot of apps installed, these tips can help you to get the best result.

What is above-the-fold content ? It is the portion of a web page that is visible without scrolling. Above-the-fold content will be different depending on the device. It's the first thing your visitors see and most of web performance tools are using it to estimate loading speed.

What is Critical/Non-Critical Resources ?
_ Any resources ( images, videos , css, javascript ) that affect above-the-fold content should be considered Critical Resources.
_ Any resources that need to be loaded before above-the-fold content should also be considered Critical Resources.
_ Other resources are Non-Critical.

Tip#1 Mark Non-Critical Css and Javascript


At the initial rendering of a page, all Css and Javascript will be loaded. To get high speed and Core Web Vitals scores, we need to find Critical Resources, load them as soon as possible and defer all other resources. By marking a css ( or javascript ) as Non-Critical, you are telling the app this css ( or javascript ) can be defered.

As default, all Css and Javascript are considered Critical, to mark them as Non-Critical, you need to wrap them inside these comments:

<!--Tmpagespeed mark.START-->
...
<!--Tmpagespeed mark.END-->

These HTML comments have no effect to your theme but when you use TMpagespeed to optimize a page, all css and javascript inside will be defered. It's quite simple to do, you just need to know how to edit them files. But before starting, please note that:

_ These comments can only be placed in the <body>, or in the <head> section of an HTML page.
_ Only css and javascript inside these comments will be defered, other resources (images, html, ...) are not affected.
_ These comments have no effect to your theme but when you use TMpagespeed to optimize a page, all css and javascript inside will be defered.
That means after optimized, the execution order of defered javascript will be changed, make sure the new order does not break the optimized page.
_ Javscript that uses document.write() can not be defered and should not be marked as Non-Critical. More details.

Now we will show you how to add these comments to your theme. Don't worry, there is no risk here. If something wrong happens, you just need to deactivate the optimized page and try again or contact us. Before editing your theme, it's a good idea to duplicate it (or download it) to create a backup copy. This makes it easy to discard your changes and start again if you need to.

Step 1 : From your Shopify admin, go to Online Store > Themes.
Step 2 : Click Actions > Edit code.
Step 3 : Click theme.liquid in "Layout" directory.
Step 4 : Find Non-Critical Css and Javascript and wrap them inside app comments.
Step 5 : Click Save and run TMpagespeed again.

But how can we find Non-Critical css/javascript ?
Usually, if you are using a theme from Shopify theme store: _ css and javascript from the original theme are critical.
_ custom css and custom javascript that affect above-the-fold content are critical.
_ css and javascript from an app or third-party that affect above-the-fold content are critical.
_ All other css and javascript are Non-Critical.

In most of cases, you just need to find css and javascript from the original theme, ignore them and wrap all others css/javascript. This is an example on how we use these comments to mark non-critical css/js:





Tip#2 Lazy loading Images


Lazy loading is a strategy to load non-critical images only when needed. It's a very effective way to improve performance when a page has so many images. Most of Shopify themes already have it but if your theme doesn't, you need to hire a developer to add it. The easiest way to check that is using Google PageSpeed Insights If you see "Defer offscreen images" in "Diagnostics" section, click it and you will have a list of images that need to be lazy-loaded.


( But if possible, try not to lazy-load above-the-fold images. We need them loaded as soon as possible )


Tip#3 Our support email is support@tmpagespeed.com


If you need help to setup the app or mark non-critical resources or have any questions, please contact us via support@tmpagespeed.com


X

Request Demo


Request a demo today to see how TMpagespeed can improve your store performance.