Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
The page speed of my store is unfortunately at only 20. What can I do to improve this?
thank you for your message, how can you help me?
Hello @Florianhvs,
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
Hello @Florianhvs,
The faster your site is, the more users you are likely to convert.
Follow the below tips that will help you decrease the load on your web pages.
1. 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.
2. Reduce the HTTP requests. For example: Combine & inline your CSS scripts
3. Minimize broken links and redirects - Avoid unnecessary Redirects and fix broken links
4. 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.
5. Always choose 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.
6. 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.
7. Use Lazyload wherever required to reduce initial load time
8. Remove all unwanted Shopify Apps which you are not 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.
9. Replace GIFs with static images
10. You can run the Shopify Theme Inspector for Chrome to identify the lines of code that are slowing down pages in your online store.
Google Search, the world's largest and most trusted FREE ecommerce channel will show more of your store to customers on Google Search if your site is fast. So site speed is critical for organic channel sales. Did you know, that ecommerce on organic channels is greater than all paid ads and social media combined? We created flareAI to deliver feeds to organic channels on a regular basis without taking your time. flareAI helps to get your products found on Google, the world's largest FREE eCommerce service. Let flareAI help you to grow your revenue on the world's best free sales channels.
Hope the above tips will help you.
Gina
Add flareAI Shopify App today!
Hi @Florianhvs,
When it comes to site speed, please note that there are several factors impacting your online store speed, some of which you can control, others you cannot.
Factors you can't control
Your customer's device, network, and location
Shopify infrastructure
Content delivery network (CDN)
Local browser cache
Server-side page cache
The assets inside the content_for_header Liquid tag
Factors you can control
When you add apps to change the functionality or appearance of your online store, they add code into the theme so they can run. Some code can be removed or reordered to improve your online store's performance. If you're not using an app, then you can remove it.
Themes are made up of Liquid, HTML, CSS, and JavaScript code. When you edit or customize themes, file sizes can increase and affect your store speed.
You can edit almost all of the Liquid that is used to render your store. There are efficient and inefficient ways of writing Liquid code. Doing complex operations repeatedly can increase your Liquid render time, which impacts your overall store speed.
High-resolution images usually require large files and therefore slow down page loading times.
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.
I suggest you try AVADA SEO Suite which has great features that can help you with improving site speed such as Image Optimization, Speed Up, Lazy Loading, and Minification (removes unnecessary information from the source code).
You can also refer to this Shopify post about Improving Speed.
I hope my answer can help you achieve your goals.
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024