How can I improve the speed of my pre-existing site?

Shopify Discussion
1

Hi

My current site speed is a poor 22. I am new to Shopify but I have purchased a pre existing company who has been on Shopify for approx 3 years. Can anyone assist me on how to increase my speed and what changes would have the biggest impact?

Any help would be greatly appreciated.

Thanks

1 Like
2

Hello @mattybcrooze ,

This is Gina from flareAI app helping Shopify merchants get $6Million+ in sales from Google Search, on autopilot.

It is crucial to enhance the speed and efficiency of your Shopify website to provide users with a smooth experience and increase conversion rates. Presented below are the necessary steps for enhancing the speed and performance of your Shopify site:

  • Optimize JavaScript Usage

Remove any unnecessary or unused JavaScript code from your website. Shopify themes often include various scripts and plugins that may not be essential for your specific requirements. Additionally, minimize the size of JavaScript files by eliminating whitespace and comments.

  • Optimize and Compress Images

Reduce file sizes by optimizing and compressing images on your website. Large images can significantly slow down page loading times. Prior to uploading images to your Shopify store, resize them to the appropriate dimensions. You can utilize online tools to compress images without significant loss in quality.

  • Leverage Caching

Enable browser caching to store static resources such as CSS, JavaScript, and images on visitors’ devices. This allows for faster subsequent visits as the browser doesn’t need to re-download those files.

  • Minimize HTTP Requests

Each HTTP request adds to the page load time. Reduce requests by combining CSS and JavaScript files into a single file, a process known as bundling or concatenation.

  • Improve Shopify Theme Performance

Choose a lightweight and optimized theme from the Shopify theme store. Avoid themes with excessive animations, effects, or poorly coded elements that may negatively impact performance.

Let me know if you require any further guidance.

Gina

3

The reply given by FlareAI is a bit of a copy paste even though it is true.

You can directly impact your speed and start by going in the Theme.liquid and check what is in the .

Any code in this part should be critical (as it blocks the rendering of other elements) for the website to work, everything else can wait.

Many apps like to put their code: {% render XXXX %} in the while it can be in the just below.

So have a look and try to move to apps or scripts that are not critical to your website to work.

Hope it helps.

4

Hello

5

Hello @mattybcrooze ,
Low mobile page speed may kill your traffic and affect your conversion.

I will brief you to manage your website speed easily.

1. First Contentful Paint (FCP): FCP measures the time it takes for the browser to render the first piece of content on the screen. To improve FCP:

  • Optimize Critical Resources: Ensure that essential resources such as HTML, CSS, and minimal JavaScript are loaded as quickly as possible. Prioritize the rendering of the initial content.

  • Minimize Render-Blocking Resources: Reduce the impact of render-blocking resources, particularly external stylesheets and scripts. Inline critical CSS or use async/defer attributes.

  • Optimize Images: Compress and resize images to reduce their size without compromising quality. Consider using responsive images to serve appropriately sized images for different screen sizes.

  • Use Browser Caching: Set appropriate cache headers for static resources. This allows returning visitors to load cached resources, speeding up page load.

2. Largest Contentful Paint (LCP): LCP measures the time it takes for the largest visible content element to render within the viewport. To improve LCP:

  • Optimize Images and Videos: As with FCP, optimizing images and videos is crucial for LCP as well. Compress images and consider using lazy loading for images and videos that are not immediately visible.

  • Minimize Third-Party Content: Limit the use of third-party scripts and resources that could slow down rendering. Evaluate the necessity of each third-party element.

  • Use a Content Delivery Network (CDN): A CDN can help distribute your content across multiple servers, reducing the distance data needs to travel and potentially improving LCP.

  • Reduce Server Response Time: Ensure that your web server is responding quickly to requests. Optimize server-side code and database queries.

  • Preload Critical Resources: Use preloading techniques to load large content elements before they come into the viewport, reducing the delay when they need to be rendered.

3. Cumulative Layout Shift (CLS): Cumulative Layout Shift measures the visual stability of a web page. It occurs when elements on a page shift their position as the page loads, which can be jarring for users. To fix CLS:

  • Specify Dimensions: Always include width and height attributes for images and videos in HTML to reserve space and prevent layout shifts.
  • Use CSS Transitions: When changing element sizes or positions, use CSS transitions to create smooth animations that minimize abrupt shifts.
  • Preload Fonts and CSS: Preload fonts and critical CSS to ensure that they are available as early as possible during page loading.

4. Total Blocking Time (TBT): Total Blocking Time measures the time during which the main thread of the browser is blocked and unresponsive due to JavaScript execution. To improve TBT:

  • Minimize JavaScript Execution: Reduce unnecessary JavaScript and optimize its execution. Remove unused scripts and use async/defer attributes where appropriate.
  • Lazy Loading: Implement lazy loading for images and other resources so that they are only loaded when they come into the viewport.
  • Reduce Third-Party Scripts: Limit the number of third-party scripts, as they can significantly impact TBT.

5. Speed Index: Speed Index measures how quickly the content of a page is visibly populated. It’s an indicator of perceived load speed. To improve Speed Index:

  • Prioritize Critical Resources: Ensure that critical resources like stylesheets and scripts needed to render above-the-fold content are loaded early.
  • Optimize Images: Compress and optimize images to reduce their size without sacrificing quality. Use modern image formats like WebP.
  • Minimize Render-Blocking CSS: Minimize and inline critical CSS to prevent delays in rendering.
  • Use Browser Caching: Leverage browser caching to store resources locally, reducing the need to fetch them repeatedly.

Keep in mind that improving these metrics requires a combination of technical optimizations, efficient coding practices, and ongoing monitoring to ensure a smooth and fast user experience on your website.
If you need further help please let me know.

6

Hello Mattybcrooze,

Thanks for reaching out to the community!

Good page speed is liked by both search engine crawlers and users, and it significantly helps the website rank better on SERP. Here are some tips you can consider to improve the speed of your website.

  1. Compress Images: Use image optimization tools or apps to compress the file of the images on the website to reduce their loading time, and optimize the overall speed of the website.
  2. Use Lightweight Shopify Theme: There are various themes on Shopify that require a lot of customization and changes, which can increase the amount of scripting for the website and increase its loading time. Instead, use lightweight Shopify themes that may not require many changes.
  3. Remove Unused JavaScript and CSS: Sometimes, when you uninstall an app or remove some elements from the website, they leave their residue, meaning there are particular unnecessary JavaScript and CSS codes on your website. Thus, ensure removing all the unused and unnecessary codes from the website to increase its speed.
  4. Implement AMP: AMP or Accelerated Mobile Pages is an open-source HTML framework by Google. When you implement AMP for your website, it allows Google to store the cached versions of these websites in the server, reducing the website’s loading time on mobile devices.
  5. Use GZIP: GZIP is a file format for textual compression and decompression; thus, you can use this file format to compress the scripting on your website and improve website speed.
  6. Implement Lazy Loading for Advertisements: Lazy loading is a technique that involves selecting certain website resources and programming them to increase their waiting time to load, so they load only when required allowing other resources on the website enough time to load quickly. This technique can be implemented for advertisements and big images on the website.
  7. Enable Browser Caching: Browser caching enables the servers to store certain elements of the website in cached version on the server; thus, reducing the loading time of the website.
  8. Compress Font File Size: Sometimes, the website uses large fonts; however, compressing them can still allow the visitor to read and understand the context of the font. This reduces the loading time of the website. You shall also consider removing unnecessary glyphs from the website font.

Hope it helps!

Leesha

SEOKart