Skip to main content

Theme Page Speed Improvements Guide

How to Measure?​

There are widely 3 methods by which we measure Page Speed online.

  1. GT Metrix: https://gtmetrix.com/

GTMetrix is an online performance analysis tool that measures the speed and optimization of web pages. It provides a comprehensive report on page load time, page size, and other key performance indicators, along with recommendations for optimizing page speed and user experience. GTMetrix uses a combination of Google PageSpeed Insights and Yahoo! YSlow rulesets to generate its report, making it a useful tool for website owners and developers who want to improve their website's speed and performance.

Additionally, it offers a range of advanced features, such as video playback and waterfall charts, to provide deeper insights into website performance. We will use this for measuring page speed.

QG11

  1. Chrome Lighthouse :

Chrome Lighthouse is an open-source tool for measuring the performance, accessibility, and best practices of web applications. It is built into the Chrome Developer Tools and can be used to audit any website or web application. Lighthouse provides a comprehensive report that includes metrics such as page load time, time to first byte, and first contentful paint, along with suggestions on how to improve performance, accessibility, and other areas of the website. The tool is designed to be easy to use and can be run directly from the Chrome browser, making it a popular choice among developers and website owners alike. Additionally, Lighthouse can be customized with various plugins and extensions to provide even more detailed analysis and reporting. GT Metrix Internally uses Chrome Lighthouse only.

QG11

  1. Pagespeed Insights: https://pagespeed.web.dev/

PageSpeed Insights is a tool developed by Google that provides a comprehensive analysis of a web page's performance on both desktop and mobile devices. It uses a variety of metrics to evaluate a website's speed and provides suggestions on how to improve the page's loading time. Some of the metrics that PageSpeed Insights measures include time to first byte, first contentful paint, and largest contentful paint.

It also evaluates the website's accessibility and suggests ways to improve the user experience. The tool is easy to use and provides detailed reports that can be used by web developers and website owners to optimize their websites for better performance and user experience.

Additionally, PageSpeed Insights provides a scoring system that rates a website's performance on a scale of 0 to 100, making it easy to compare the performance of different websites.

QG11

Factors Affecting Pagespeed :​

Several factors can affect a website's page speed performance on GTmetrix. Some of the most important factors include:

  1. Server response time: The time it takes for the server to respond to a request from the user's browser. A slow response time can significantly increase page load times.
  2. Image optimization: Images that are not optimized can slow down page loading times. GTmetrix suggests optimizing images by compressing them to reduce file size without sacrificing image quality.
  3. Minification: Minifying code by removing unnecessary whitespace, comments, and other elements can reduce page size and improve loading times.
  4. Browser caching: Caching allows the browser to store frequently accessed files, such as images and CSS files, locally, which can significantly reduce page load times.
  5. Content delivery network (CDN): Using a CDN can improve page load times by serving content from a server closer to the user.
  6. Render-blocking resources: CSS and JavaScript files that block page rendering can slow down page load times. GTmetrix provides suggestions for optimizing these resources.
  7. Page redirects: Too many redirects or redirects that are not properly configured can increase page load times.

By addressing these factors, website owners can improve their website's page speed performance on GTmetrix and provide a better user experience for their visitors.

How to tackle from UI (Theme) side?​

Severely score depends upon server response time, CDN, and image optimization but still, some steps can improve the score from UI Side.

  • Dynamic Import : Dynamic import is a feature in the Vue.js framework that allows components to be loaded asynchronously at runtime instead of during the initial load. This can improve the overall performance of the application, as components that are not immediately needed do not have to be loaded until they are required.

QG11

  • Packages Optimisation: Uninstall all unused and unwanted packages from the package.json Always check package size and SSR compatibility before adding new packages. Also, have a brief discussion before adding a package about its usage impact then decide whether it is needed or can be avoided. Also move packages installed for development and coding standard purpose to devDependancy Array.

QG11

  • Asset Optimization: Delete unused assets (images/audios/videos) from the code repo. Only keep what is used in the theme. Try to use .svg for icons and always use compressed images . Use the SVG loader plugin to load SVG which also allows us to pass color from our newly designed color palette instead of using SVG directly or creating different copies for a different color.

QG11

QG11

  • Code Optimisation: In the default theme repo we get lots of files and components which we do not use or not needed delete those files and code to optimize the build. We have to be careful about finding usage and then deleting such files. Always follow good standard coding practices. Do not create a single component and add all business logic in the same file. For eg. Instead of adding everything in the header.vue we can create separate components for search, Menu, Mobile, and desktop UI. Removed commented code, unused functions unused templates unused CSS. In the following screenshot we can see, we can reduce the theme bundle from 108kb to 70kb . This can be achieved by following all above steps.

  • Existing Emerge

QG11

  • Astra

QG11

  • Image Optimisation: For images always use appropriate resize sources so images will be resized accordingly and size can be reduced. Always pass Breakpoints for width which will definitely help in improving score especially in Mobile devices.

QG11

  • Intersection Observer : Another important concept which can be used to improve intersection oberserver. Intersection Observer is a web API that allows you to efficiently detect when an HTML element enters or exits the viewport, or when it intersects with another element on the page. This can be useful for a variety of web development scenarios, such as lazy loading images or videos, implementing infinite scrolling, or tracking user engagement with certain parts of a web page.

The Intersection Observer API works by creating an observer object that watches for changes in the visibility of a target element or group of elements. The observer will then notify your code when these changes occur, giving you the opportunity to take appropriate actions based on the current visibility state of the target element.

One of the main advantages of using the Intersection Observer API is that it is designed to be more efficient than traditional methods of detecting element visibility, such as scroll event listeners. This is because the observer only runs when changes occur, and it uses a separate thread to execute its code, which can help prevent performance issues and improve page load times.

For components which needs to load heavy files like video or youtube Player or any third party resources we can add intersection observer which won’t load these file unless users won’t interact with them or it is not in viewport. This is hugely impact GT Metrix score.

QG11

QG11

Third Party Image Optimisation:​

Ideally, for every new image upload in different pages of the theme editor, It should automatically optimize and have webp Conversion. Ideally, if an image is coming from an Old cdn it may have a large size which will definitely impact GT Metrix score Ideally, this can be verified in the network tab . You can use any online tool to compress an image without affecting its quality.

  • Without resize and webp conversion

QG11

  • With Resize and webp conversion

QG11

Tips for sellers to enhance page speed:​

  • Optimize Image Size: Reduce image dimensions and compress image files without compromising quality to decrease loading times.

  • Lighten the First 3 home page Sections:

    • Minimizing content, scripts, and media in the initial sections of the page to ensure faster rendering for users.
    • Eliminate resource-heavy elements like image sliders and videos in the top part of the page to expedite loading.
    • To improve the initial page load speed and reduce the number of network calls and data loading, it is advisable to refrain from loading extensive product listings or collections right at the beginning of the page. This will help in providing a faster and smoother user experience.

  • Eliminate Unnecessary GTM Tags: Review and remove unnecessary Google Tag Manager (GTM) tags to streamline the loading process and reduce server requests.

  • Remove Unused Extensions: Review and remove unnecessary extensions to reduce the server requests.

Why my GT Metrix score always change?​

It is normal for GTMetrix scores to change frequently as they are impacted by various factors such as the server response time, network traffic, and the content on the website. It is also possible that changes made to the website or server configuration can affect the scores.

To get a more accurate representation of the website's performance, it is recommended to run multiple tests over a period of time and compare the results. It is also important to understand that while GTMetrix scores can be a useful indicator of website performance, they should not be the only metric used to evaluate website speed and optimization.

This happens for all websites. Even for those who claims to have booster themes. Usually we do not need to worry about it.

Here is a good Blog read about same from GT Metrix https://gtmetrix.com/blog/why-is-my-performance-score-always-changing/

Below is snapshot of report for same application in same config.

QG11

QG11

Don’t Chase Perfect Scores​

If doing something which is affecting user experience but we are still doing it for performance improvement this type of changes can always be discussed in team and if needed then with Brand / Client. Even GT Metrix also says same.

https://gtmetrix.com/blog/dont-chase-perfect-scores/