Introduction

• Avoid using high scaled images.
• Avoid Jpeg , Jpg format or low quality images.
• Avoid layout shift on the web page.
• Avoid too lengthy content on your home page.
• Avoid too many sliders on home page & Product page.

• Pass all web Vitals.
• Higher Conversion rates.
• Higher SEO ranking.
• Better user experience.
• Any online store’s success is largely determined by user experience and speed is a very crucial factor for user experience.
• Cumulative layout shifting (CLS) has become an important factor of user experience and should be considered an integral part when Shopify speed optimization is done.

How to Audit Shopify Site Speed?

• Google Page Speed
• GT Metrix
• Pingdom

• → Google analytics is used for average server response time and average page speed.
• → Google search console for web vitals.
• → It’s not just checking a page on these tools. It’s about overall user experience across pages and during peak load that should be thought of.

How to Improve Image Payload :

• Use PNG or advanced image format, so that shopify converts png to webP format.
• WebP is a new format that is supported by browsers which requires less space for media storage.
• Deliver responsive images : using picture tag.
• Use Apps for image optimization.
• Remove hidden images.
• Use Lazy loading Method
• Redesign the page if necessary
• Reduce third party images
• Use CSS instead of images.
• Use SVG

Replace GIFs With Static Images :

• GIFs are a valuable asset for customers’ experience.
• File types affect the size of your images. According to Shopify, the best image file type is PNG (30 kb – 100 kb), followed by JPEG (approximately 30 kb), and GIF (approximately 35 kb), so replace the GIFs with static images.
• It looks like an excellent job of improving your business, but Gifs can take a large 10 MB or more.

Decrease Thumbnail Image Size :

Reduce Apps Impact On Performance :

• When you install any app, then it may have a significant performance impact on the stores.
• Use Shopify API methods instead of using Apps.
• Lots of shopify apps may load at the same time, it may affect the loading time. So find the apps which are lighter & usable for your store.
• When you Uninstall any non-essential apps then there should be the unused app code in your theme files, so you should find that & remove it from the shopify store.
• Apps should be removed properly. It should be a great start.

• Popup images
• Image gallery
• Faceted search
• Product meta data

Choose a Lightweight Shopify Theme

• It’s a good decision to start with shopify and when you select the shopify theme, then you should be aware of their ratings , services & features before the purchase.
• Check their reviews. & live sites for scores where the Shopify theme has been used.
• Theme should be super fast, well Optimized & light weight, instead of the one that is cluttered with fancy elements.
• Their main goal is to help visitors navigate around your store and perform the action they came to do.
• There are many themes available in shopify that are well optimized.

• → Prestige Theme
• → Flex
• → Turbo
• → Shoptimized
• → Boostertheme
• → Shella
• → Fastor
• → Debutify

Choose The Right Font :

• The experience of your customers will be quick and easy. That’s why the potential customers will not face any trouble navigation your store.
• There is no doubt that readability is the most important factor. It doesn’t matter if you’re looking at the font for a header, a button, or the body of a blog post.
• If a customer is not able to read the text on the website, they will not want to buy the product or use the service.
• I want to suggest limiting the fonts to one. Use a standard web font.
• Shopify’s font library contains a collection of fonts such as system, Google fonts, and licensed fonts from Monotype. You can use all fonts freely available to use on all Shopify online shops.

Advance Technique to Improve Optimization.

Optimize Cumulative Layout Shifting :

• Cumulative Layout Shift measures the movement of visible elements within the viewport.
• To solve the CLS issue, you have to arrange the layout. Avoid large layout shifts.
• The Image element should have explicit width and height. Also for video elements so that the correct spacing is used for images/video.

For example :

• Webfonts that are Invisible Should be Prevented.
• You should avoid adding content above existing content, except in response to a user interaction.

Optimize Total Blocking Time :

• Any improvements to JavaScript execution ( generally, optimizations that improve TTI ) will likely reduce your TBT.
• You can use the async & defer method. Remove unwanted javascript code or unused app JS code.
• Replace the large javascript libraries with smaller alternatives.
• Reducing JavaScript payloads with code splitting, removing unused app code, or efficiently loading third-party JavaScript should improve your TBT score.

<!-- Defer Attribute -->

<head>

<script src="Magento_Theme::js/lazyload.js"defer/>

</head>

<!-- Async Attribute -->

<head>

<script src="Magento_Theme::js/lazyload.js"async/>

</head>

• Reduce the impact of third-party code & Reduce JavaScript execution time.
• Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this.

Optimize Largest Contentful Paint :

• Deliver your images in lighter formats.
• Eliminate render-blocking resources
• Optimize web Fonts.

Optimize First Contentful Paint :

• Reduce your DOM size.
• Serve images in next-gen formats.
• Avoid lazy load images above the fold.
• Host your fonts locally.
• Avoid multiple page redirects.
• Don’t use bulky elements above the fold.
• Ensure text remains visible during web fonts load.
• Optimize store images.

Remove, Replace or Move Code on a High Priority Basis :

• Remove commented additional HTML.
• Eliminate render-blocking resources.
• Unused CSS
• CSS above fold to go to critical CSS.
• Unused JS from previous uninstalled apps.
• Check with app providers for CSS, JS and other payloads due to their apps.
• Make sure that JS are not across all pages if they are needed for some specific page then add js condition wise.
• Shopify Themes and page builders can result in lot many code lines so make sure that your JS is less than 16 KB( recommended but difficult to achieve).
• Replaces 3rd party JS libraries like Jquery and others with Javascript code or a lightweight library. Core Javascript code is recommended.
• Go for PWA

Health Check Your Shopify Store Weekly and Keep a Record :

• Google Analytics : If implemented it will keep history of average response time and average page load time.
• Google Search Console keeps data of 3 months for web vitals.
• Keep a good handy document with monthly/weekly updates of the score preferable via some tool or services.
• Keep a note of JS payload, image payload, CSS and HTML stats for a few pages as developers and apps on times results in additional payloads which will impact score.
• Keep a log of modules added removed and the purpose of the module used.

Simplify Your Homepage Design

• Use design to improve user experience.
• Add more valuable & important content.
• Add testimonials, reviews, and logos.
• Make your store mobile responsive.
• Include trust indicators on the homepage.
• Homepage content should be strategically decided.
• Add ‘Call to action banner’ ‘New arrivals’, ‘Top selling products, Most popular collection, announcement bar.

Minify Webpage

• Minify JS
• Minify CSS

• Compress (done by Shopify we do not have control if the content is coming from Shopify site).
• When a user opens the webpage, the entire page’s images are downloaded, So instead of loading all of the images at one time, It can be loaded when scroll on viewport. You can resolve this issue by using lazy loading.
• For Example, if your web page contains 100 or more images then instead of loading all the images at one time we can add images in lazy loading and load only required images on page scrolling.

Remove Unnecessary HTTP Requests :

• Combine & inline your CSS scripts.
• Use inline JavaScript code for smaller snippets.
• Load less priority JavaScript on page load or page scroll.
• Convert images to Base64 code.
• Limit the number of social buttons.

https://www.oscprofessionals.com/blog/how-to-make-fewer-http-requests-to-speed-up-your-site/

JavaScript and CSS Performance Optimization :

• Some apps will come with CSS and JS.
• As an expert you need to identify how some of the CSS or JS of an app can be removed.
• Always beware of excessive liquid loops.

List of Opportunities or Audit Tool :

• Defer off screen images
• Render Blocking CSS

Conclusion :

Choose your Shopify Optimization Plan

If you are looking for expert Shopify Speed optimization and other services : you can always reach out to us!