Increase your Ecommerce site performance & speed to 2X conversions
Increase your Ecommerce site performance & speed to 2X conversions
An ecommerce site can suffer from a sudden surge in traffic or sales. This is bad news for your website performance, page speed and brand image. You can prepare for sudden surges.
You'll lose more customers to faster competitors if you delay optimizing your website for speed. Google's mobile speed study has shown that the bounce rate of a website increases with every second that it takes for a page load. Google will ship an update in May 2021 to help prioritize sites that have strong core web vitals (i.e. site performance) in its search engines.
Ecommerce sites are facing greater challenges than ever. This is why we have created this guide.
A condensed version can be found in the video below.
What does page speed have to do with ecommerce?
Page speed is the time taken for the URL's content to load. Site speed is a measure of how well your site performs overall. Google PageSpeed Insights, which aggregates various load times for your site, gives you a score.
Skilled analysed 12 case studies to determine customer expectations regarding site performance.
- 79% of customers “dissatisfied” with a site’s performance are less likely to buy from them again
- 64% of smartphone users expect a website to load in four seconds or less
- 47% of online shoppers expect web pages to load in two seconds or less
Also, a delay in time can impact sales. Web performance optimizers Crazyegg found that speeding up pages by one second can increase conversions by 7% through client experiments.
That means if a site makes $100,000 per day, a one-second improvement generates another $7,000 daily, and the opposite is true too. Online shoppers will never learn to be patient with slow pages.
Slow loading sites can also impact your searchability. Slow landing pages can also negatively impact your searchability when you use paid search. This is because slow landing pages will lower your Google AdWords quality score, which means that you pay more per click.
Experts in search engine optimization (SEO), will tell you that slow pages can hurt organic rankings across all devices.
Let's now look at these factors and discuss how to win more customers through search and overall. We will also talk about faster loading times and improved site performance.
13 ways you can improve your ecommerce website performance and page speed:
1. 1.Look for an ecommerce platform which is fast and out of the box
A platform that can speed up load times is essential for your business. You, as merchants, should talk to your platform provider about improving your backend so your sites load quickly for shoppers.
Shopify's Storefront Renderer is an infrastructure upgrade that speeds up site speed. SFR, a Ruby application that was built from scratch is dedicated to serving storefront orders as quickly as possible.
What performance improvements can we expect?
Storefront Renderer makes it possible to serve read requests in a different way, which results in server-side performance improvements of 2.5 to 5.0% compared to requests that were not served without SFR.
Performance gains with SFR are greatest in cache misses. These instances in which a page or any other requested data can't be found in the cache memory must be retrieved from the main memory or another cache level. This causes delays and slowdowns.
Shopify is quick and easy to use. Rhone Apparel began using SFR in April 2020, and noticed dramatic improvements over the month before.
- Revenues increase by 15%
- Conversion rate increase of 17%
- Average page load decreases by 12%
- 36.75% reduction in the average server response times
- A decrease of 3% in the bounce rate
Rhone continues to see positive results. Shopify Plus stores are now powered via Storefront Renderer.
Site speed can be affected by many factors, but Shopify will do its best to ensure that your site runs as fast as possible. If speed is not a priority for your commerce platform, the other suggestions won't be as effective. Shopify allows you to control the speed of your website by knowing this.
2. Use reliable and fast hosting
Your ecommerce site's performance can be affected by your hosting service and infrastructure, especially during high-traffic or high-transaction days.
Name-brand retailers continue to experience ecommerce site crashes during key sales periods such as Black Friday, like Lululemon and J.Crew. ITIC's survey found that 81% of respondents stated that downtime of 60 minutes costs their business more than $300,000.
Look out for these things when researching requirements.
- Limits on bandwidth or memory for scaling during seasonal promotions
- To avoid sudden spikes in visitors, project traffic and peak user loads are important.
Shopify Plus boasts a 99.98% uptime overall due to its cloud-based infrastructure. Our storefront loads 2.97x faster than other SaaS platforms.
Shopify's peak Black Friday Cyber Monday (BFCM 2019) saw businesses make $1.5 million per minute.
Ask your commerce platform provider for help before any major sales event.
Site outages can be frustrating, especially when a company is $5 billion and has its largest sales season. Site issues caused JB Hi-Fi's website to go down for nearly two hours during BFCM. Chris Lang, JB Hi-Fi’s general manager of engineering, says that "we have seen websites go down for high-profile retailers." It is known throughout the country. It's bad news for customers and bad for the brand. We would do anything for that to be avoided."
JB Hi-Fi achieved record-breaking sales after replatforming via Shopify Plus. This was due to almost double the traffic during BFCM--all with no site performance issues.
3. Utilize a content delivery system (CDN).
A Content Delivery Network, or Content Distribution Network (CDN), is a collection of servers distributed around the globe. It distributes content delivery load through the closest server to the visitor's location, making local user experience faster.
A CDN, or in the case Shopify, dual CDNs, is a requirement for platform performance as more ecommerce sites go global.
Shopify provides a world-class CDN powered with Fastly for no additional cost. Shopify stores can be found almost instantly anywhere in the world including the U.S. and U.K.
Today, there are fewer and more powerful Fastly Points of Presence in strategic locations all over the globe. They can serve more content from cache with high-density PoPs, including event-driven and static content. This increases your cache hit rate, which results in better user experiences.
Overall, CDNs increase speed while reducing costs. “Getting our license, hosting, and CDN from Shopify Plus saved us about $100,000 per year right off the bat,” says Red Dress Boutique owner, Diana Harbour.
supplier
relationship management
How Shopify's CDN works
Slow performance is often caused by visual content. Shopify notifies the CDN whenever your assets (e.g. Images, JavaScript, or CSS have been modified by Shopify.
The asset_url filter is used to automatically add version numbers to URLs that we create. A URL could look something like this:?v=1384022871. The asset_url filter adds the version ID to the URL, telling the CDN which version it should pull. You may not be able to see the asset that you want after making changes to your content. An asset_url filter is required to link to an image.
The URL will also be static if content is referenced directly in your CSS. The URL will not include the Shopify asset version.
Change your CSS syntax to include asset_url filter in order to ensure automatic updates. Visit the Shopify Help Center for more information about URL filters that allow you to pull assets.
4. Google Tag Manager allows you to organize your tracking.
Your ecommerce and digital marketing strategies will be fueled by customer data. However, collecting this data can slow down your website's performance. Many JavaScript tracking tags are to blame (e.g. for general analytics, goals, conversions and behavioral retargeting).
Collecting customer data can be time-consuming and costly for developers, IT, and marketing teams. A Tag Management System (TMS), such as Google Tag Manager, condenses all of your tags into one JavaScript Request. A TMS can also help you quickly remove a tag if it causes your website to crash.
Tag Inspector says this will "reduce outside calls." This also sends the request asynchronously (in background, letting your website load independent of the outcome).
The ConversionXL diagram below shows how a TMS can speed up your page's loading time.
All you need to manage Shopify Plus store tags is one snippet code. Refer to the Shopify Plus Help Center for more information. __S.119__
Let's now look at some strategies and testing tools you can use for speeding up your site. You should always start with your smartphone.
5. 5.
A browser must first parse the HTML before it can display a page for your customer. Parser-blocking Scripts can interrupt this process. A browser must stop all other activities when it encounters a parser blocker script.
There is an easy solution. All you need to do is add the "async", or "defer" attributes.
Parser blocking Not blocking
JavaScript does not itself block browsers. It is how JavaScipt loads that will determine whether JavaScript blocks the browser. Make sure you check your website after making these changes.
6. To optimize your mobile performance, prioritize testing
Mobile commerce strategies are more important than ever. 67% of all sales were made via mobile devices during Black Friday Cyber Monday 2020, compared to 33% for desktop. Only 39% of the U.S. ecommerce market was overall. This discrepancy is likely to be due to Shopify's better mobile-first experience.
Mobile shopping will continue to grow, with mobile commerce sales expected to exceed $319 billion annually by 2020.
Mobile 1st, found that slow pages are the top complaint of mobile users despite their high mobile purchase rates. Site crashes rank higher than the irritation at slow pages.
Merchology, a corporate apparel and gift brand, realized that most of its mobile visitors were not converting. It decided to redesign its mobile site to provide a mobile-first experience for customers. Merchology saw a 40% increase of mobile conversions within two months of launching its mobile site.
We outline below how to ensure your mobile first presence and overall site speed match or exceed your competitors.
(A) Optimize your mobile site speed
PageSpeed Intelligences from Google Labs gives you customized suggestions to improve the performance of your mobile website (separately with desktop data). It will also alert you to any elements that may slow down your page like JavaScript and CSS.
You can also look at the mobile site performance of your competitors. You can learn from your competitors what is wrong so you don't make the same mistakes.
Also, Google’s Test My Site tool will help you calculate how site speed can boost your mobile conversion rates:
(B) Then, test your desktop page speed
PageSpeed Insights also offers a Desktop report with similar suggestions. Compare your site's performance to those of top competitors.
(C) Get a cumulative grade
GTMetrix assigns your website an A-F grade based on speed. It combines data from PageSpeed Insights and Yslow. You can also get a performance report to help you identify optimization issues.
(D) Score your site performance on final optimizations
Pingdom.com is your final test. It will give you a score ranging from 0 up to 100.
You can also use the "waterfall analysis" feature to identify other potential problems. This line-by-line scoring can be a valuable reference tool.
Keep in mind
Each third-party tool, such as GTMetrix or PageSpeed, is configured differently. Tools that provide "page loading" timing must specify a time marker (e.g. "time to the first byte (TTFB),) in their results.
Each speed testing tool has a unique scoring system, just as every team has a different definition for good site speed.
These speed tests can be used to help you make your decisions, but it is important that you remain open-minded. Your site must be fast, but you also need to create a user interface that maximizes the customer's experience.
These tools are not designed to crawl or analyze Shopify websites. These tips will be discussed next.
Shopify Speed Optimization
Let's look at the most common Shopify page speed problems and how we can fix them.
7. Pop-ups should be used sparingly
It might seem common sense to provide a popup quick view window. Pop-ups display the product directly from the product listing page, rather than forcing you to visit the product detail page.
It should, in theory, save your customers the time of deciding if they are interested.
But it can actually impede a customer’s experience on your ecommerce site.
- This adds another step to the customer’s journey
- It can also be accidentally clicked on, which can frustrate the user.
- It could be mistakenly taken to mean a product page
- It can also significantly slow down page loading times.
Pop-ups on product pages
Quick view popups can be either built into a theme, or from an application. They can pre-load information from a product page in the event that a visitor clicks on the "Quick View".
This is a lot of data, especially if you have 20 to 30 product thumbnails. Click mapping, a JavaScript-based tool which tracks where users scroll or move their cursor in order to click on your website pages, can help you determine if your customers even use quick view.
These apps can be of assistance:
If your customers don't use quick view, or if there is no compelling reason to keep it, we recommend that you remove it.
Detection
You should be able to easily see whether there is a Quick View button next to your product thumbnails. This function can be disabled or enabled in your theme customizer.
This option is not available in the theme customizer. You can check to see if it's being sent from an application. If it is, you should know how to get rid of it.
If these steps fail to help, the problem is likely embedded in the theme. You will need to hire a developer in order to find and fix it.
Solution
AJAX can pull product information from a visitor's browser when they click the "Quick View” pop-up button. You can also save some product information to data attributes on the product grid. Next, create the HTML and then pop-up dynamically using JavaScript.
Either of these options is better than removing the quick view. Each product still needs to have its product information loaded. It's still better than downloading all product images and links.
8. Avoid excessive liquid loops
Liquid is an excellent Shopify coding language. However, there are some cases where you have to weigh the tradeoffs against the benefits.
One of these cases is Forloop Iteration. Forloop is a system that loops (e.g. crawl, or searches through) all products in a collection. It happens when it's searching for a particular condition (e.g. Price, or a tag.
Looping can take too long if you have a large product catalogue. These are the cases where looping is an issue:
- Mega-navigation and advanced collection filtering:They use nested forloops in order to look at all products and determine which ones are applicable to them.
- Swatches The code loops through each variant of the product page and then all images, rendering the color associated with the image.
- Paginating collections containing thousands of products: Instead of keeping the number of products to a manageable level, sites display everything simultaneously and then use JavaScript for progressively loading the page.
Some features, such as the ability to output images or product variants, can be very useful. These features can be useful when there are fewer products on a collection page. However, they can have an impact on loading times.
Solution
Check your theme code to ensure you're not running multiple liquid for loops looking for the exact same information. This happens when multiple developers are working on the same theme. They may also duplicate tasks or create conflicting code. This will help your page load quicker by removing duplicate code.
Findify has found ways to provide advanced collection filtering without compromising load time. The load time for a collection of 30,000 products was reduced from 15 seconds down to 2.5 seconds. Shopify Plus clients saw a 20% increase in conversions.
This is how Findify operates:
- All filters in the Shopify backend are pre-calculated by the developers
- A collection may only return a small number of products when it is loaded.
- The displayed products are personalized as customers browse the web or use filters to personalize them.
- All filters are dynamic so that you only see filter options relevant to the products within a particular collection
- This documentation can be used by developers to output color swatches. However, this documentation is often problematic.
In the screenshot, the system is looping through all of the product options. It then finds the index of the color option—if it exists. Next, it loops through all of the variants and outputs the color option of that variant (assuming it hasn’t already been output).
It is often simpler to use an easy product.options_with_values loop Learn how Shopify's liquid loops and templating language work.
9. Decrease thumbnail image sizes
A carousel feature to display "Best-selling products" on your homepage could cause speed problems, since information is pulled from product pages and displayed in thumbnails.
Problems can arise when product images are pulled from product pages in a larger format than necessary. A larger image will cause your browser to reduce it for the thumbnail. This can impact the page load speed.
Solution
Shopify's image size parameters are available. This will allow you to download the smallest image possible while maintaining the highest quality. Shopify is asked to specify the image size that will be displayed. It reduces the file size and the browser-side scaling required by Shopify.
All Shopify-built themes now have the ability to display the correct image sizes based upon device viewpoints.
Advanced options
You can also set your theme to use
10. Slideshows of homepage heroes are easy to use
Multi-hero-image slideshows can be a great way to showcase your products. However, they have a disadvantage. Load times can be increased by the size and quality of hero slides, especially if there are four to five slides.
Solution
Reduce or eliminate the number of homepage slides One high-quality, well-thought out hero image, with a clear call for action, will help you draw customers in quickly. The brain processes visual imagery 60 times faster than text.
Use UX best practices if you have to use a slide. Use srcset and Lazy Load to catch all. Stick with 2-3 slides.
11. Consider the advantages of using another app on your website
You probably don't use all 20+ Shopify app (paid or free) that you have installed on your store. Perhaps you tried them out and then forgot to uninstall them. These apps can be running in the background and affecting your site's performance.
Most script/CSS files downloaded via Shopify Plus Admin are injected directly into the website. of your theme.liquid file within {{ content_for_header }.|Your theme.liquid file is located within content_for_header.}
Before any code can be loaded, an app must be rendered.
Jason Bowman, a Solutions Engineering Team Leader at Shopify Plus, says that there is a tension between faster loading and the sales value of apps. "We async load the scripts with Script Tag API so the page load doesn't halt." "However,Added directly to theOften, this has an immediate effect on performance."
Ask yourself if the potential slowdown in load speed is worth the added value.
Solution
To remove unnecessary apps, we recommend that you hire a developer. Next, run speed tests with PageSpeed Insights or GTmetrix. Or you can do a manual test with Chrome's Developer tools. Reload the page by clicking the "Network” tab.
12. Reduce the size and number of images by compressing them
Images make up between 50% and 75% of the total weight of your web pages. Higher quality images will result in a larger number. Lossless compression can reduce image size but not compromise quality.
TinyJPG and TinyPNG can be used to reduce the size of any new images you add.
Reduce the overall number of images you use: Each image on a page will create a new HTTP request. You can speed up page speed by trimming images. This allows you to do more with less.
Watch out for empty source images-- - in your code. They add an extra load to the browser and send yet another request through your servers.
You can use sprites to simplify the process. They combine multiple images, such as icons, into one image. This reduces the number of requests for individual images. This improves page speed. SpritePad is a free tool that allows you to upload your images and generate sprites.
13. To add video, use lite embeds
Video is rapidly becoming the internet's language. However, loading times can vary depending on how embedded they are on your site.
YouTube's standard embed code can make your site larger. Some files can be downloaded before the visitor clicks the play button.
The solution is called "lite embeds", which allows you to load the videos directly from your website. The site embeds only the thumbnail image from the YouTube video when the page loads. The video player (and all JavaScript that comes with it) loads only when the user clicks within the thumbnail.
YouTube thumbnails are approximately 15KB. Lite embeds can reduce web pages' size by almost 1 MB.
14. 14.
Google Developers created "minification" to help you get rid of poorly coded HTML, CSS and JavaScript from your website. This can slow down your site's performance.
You can also find a list of HTML and CSS resources as well as JavaScript-specific resourcess. More information on kangax/htmlminifier can be found on GitHub.
Note that Shopify automatically handles SCSS.liquidminification. To help theme developers eliminate bloat from the rendered HTML, we also offer whitespace control tags.
15. Reduce redirects and broken hyperlinks
Site speed and SEO rankings can be affected by too many broken links and redirects.
Redirects
Make a clean sweep of your redirects. Your SEO can be hurt by 302 redirects. These redirects indicate that a page was temporarily moved. These redirects can also cause additional HTTP requests and slow down data transfers. Instead, you can use an " cacheable URL" or Shopify’s built-in redirects function (which are 301s by default) within your Navigation panel.
Do not redirect URLs to pages which are already redirects. Although it sounds obvious, it is often done.
Broken links
Broken links to page elements such as images, CSS and JS files can slow down your site's speed and increase HTTP requests. To remove broken links, use Broken Link Checker.
Visitors who enter incorrect URLs for your site can be assisted by creating custom 404 error pages.
It takes time to improve the performance of an ecommerce website
It is important to have buy-in from your entire team in order to invest time and resources in optimizing your site's performance and speed. You can use the data and tools that we shared to help you build a case.
Many of these optimizations can be done yourself. If this is not possible, you can seek the assistance of a Partner. These partners can help you speed up your Shopify website.
You can ask for additional assistance by leaving comments below.
Comments
Post a Comment