Why does my website speed fluctuate?

Shopify Discussion
1

Hi my website is https://incensesticks.com/.

Due to some reason, my website behaves unusual while loading. Some times its very fast whereas sometimes it hangs and the page become unresponsive.

I am already using the Core vital booster app for that but nothing has changed.

Can anyone suggest a better solution for this?

2

Hi, @diananh
I just checked your store’s speed score on the Google page speed insights & GT Metrix & although you have added the Core Web Vitals app still it shows the Web Vitals failed.
This kind of app can’t completely fix the web vitals and improve the speed of the store. You need a Shopify developer to check the store, Find out where is the issue & fix the issue regarding the optimization.

Rishihuptech_0-1691413842465.png
Rishihuptech_0-1691413842465.png1299×838 45.4 KB

Rishihuptech_1-1691413870737.png
Rishihuptech_1-1691413870737.png1264×853 45.5 KB

3

Hello @diananh ,

As I can see you have multiple issues with your website. I will brief you on this.

oscprofessional_0-1691566918860.png
oscprofessional_0-1691566918860.png962×619 65 KB

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.

4

Hi,

Thanks!

Can you suggest the best app to achieve this?