By: Oliver Lindberg
Front-End Development
January 14, 2020
Read time: 17 minutes
Introduction
We can now add more features to our websites and use more tools and techniques than ever before. However, the downside is that our choices can significantly slow down the speed of our sites, causing customer frustration (in a 2018 survey, 80 percent of users said that a website that takes too long to load is more frustrating than a site that is temporarily down). When websites become inaccessible or unresponsive in slow network conditions or on low-spec devices, it can completely exclude potential customers.
1. Build the site primarily for mobile
Mobile customers are becoming more prevalent, and the percentage of customers who use only mobile phones is increasing. However, conversion rates on mobile are lower. Andy Davies, an independent web performance expert who worked on the aforementioned popular clothing retailer’s site, says it’s time to change that and treat mobile as first-class citizens.
“Responsive web design has given us the ability to build sites that can work well on both desktop and mobile devices,” he explains. “Unfortunately, it seems we often design and build sites first for desktops and then try to shrink our sites to fit the constraints of mobile. This leads to a slow and unsatisfactory experience on mobile, especially for visitors using Android devices, as their devices often cannot handle the amounts of JavaScript and other content we serve them on desktop.”
To create fast experiences for mobile, Andy recommends building sites that can be used on low-cost Android phones, like the Alcatel 1x, and then enhancing them at runtime to provide a richer experience for visitors with more powerful devices and larger screens.
2. Stop using sliders and carousels
Sliders and carousels may seem like a great idea on paper, but Alexander Lam, a speed optimization expert at Shopify and CEO of Rvere, which is behind the Shopify Hyperspeed app, warns that they have two major drawbacks that we should educate our clients about.
“They don’t convert visitors into customers, and they slow down your site,” he cautions. “Usability tests conducted by the Nielsen Norman Group have shown that sliders are completely ignored by visitors. What’s more, a test conducted on the University of Notre Dame’s website showed that only 1 percent of visitors clicked on the first slide. The subsequent slides received even fewer clicks.”
Sliders not only fail to convert visitors, but they also bog down the site. Alexander warns that fancy moving slides require additional JavaScript and often consist of multiple large images.
“Getting rid of the slider can make a page load much faster, as you will see a substantial reduction in total page size,” he advises. “Consider using a well-placed hero image with a compelling call to action instead of the slider. It will load faster, and you’ll get more visitors clicking on what you want them to.”
3. Optimize your images
Images are an essential part of any online store and often make up the largest portion of it. However, large images can significantly slow down the site, as larger pages take longer to load.
If you want to keep all your images, Alexander Lam recommends at least compressing them.
“Before uploading any image to the store, run it through a free image compressor like tinyjpg.com or shortpixel.com,” he suggests. “These services will reduce the image size in terms of data without sacrificing quality or changing its actual dimensions. Raw images can be reduced by up to 70 percent with no noticeable change in quality.”
From
It is also important to ensure that you are using the correct file format. PNG images are very useful if you want transparent pixels in your image, but they usually take up more space than JPEG images.
“If you have a PNG image that doesn’t have transparent pixels, consider converting it to a JPEG image before uploading it,” advises Alexander. “Use Photoshop or a service like PNG2JPG to change your file format.”
4. Delayed Image Loading
Anna Migaas, a speaker at conferences and a software engineer at Castle, a startup that helps businesses keep their online customer accounts secure, agrees that images are one of the biggest factors affecting web performance.
“Images can say more than a thousand words, but they can also take a thousand milliseconds or more to load, and worse, they can delay the loading of other content,” she warns. “Imagine what could happen if your site has 20 images all competing to load!”
Anna explains that it’s good practice not to load all images on the page by default, but to use a technique called “lazy loading images” instead. This means only serving images from the top of the page initially and starting to fetch the rest of the images when the user scrolls down and gets closer to where more images can be found.
“Lazy loading images is usually implemented using JavaScript, and you can find many small libraries to help you achieve this effect,” Anna advises. “My favorite libraries are LazyLoad and yall.js. In Chrome, you can use a built-in feature to load images specified by adding the loading=”lazy” attribute to the tag, but it won’t solve the problem for other browsers.”
5. Load Fonts with Font Replacement
While images make up a large part of attracting customers in an online store, users also want to see the price and product description quickly. Therefore, it is important that text is visible as soon as possible, but it doesn’t always load quickly, due to the fonts.
“One reason text may not be visible is the use of external fonts that are not supported by default on the user’s device,” explains Anna Migaas. “In this case, the site needs to load the fonts first before they can be displayed on the screen. This can take some time, so it’s good to provide a fallback font that shows up without any delay and then gets replaced with the desired font.”
To do this, Anna suggests either adding the font-display: swap property to your @font-face declaration, or if you are using Google Fonts, you can add the display=“swap” URL parameter (for example: ).
6. Create Smooth Animations
Animations – when done correctly – enhance the user experience smoothly and unobtrusively on the website. However, when done incorrectly, they can distract and detract from visitors’ attention.
Taylor Childs, Senior Software Engineer at Netflix, recommends some techniques to improve animations created using CSS or JavaScript. CSS
“There’s a little secret to achieving smooth animations using CSS, which is to use properties that do not force a layout change or repaint pixels,” explains Taylor. “The general rule is to use opacity and transform only, but if you want more, check out CSS Triggers.”
Opacity and transform only affect the content being styled. The styled content stays in place relative to the rest of the page, and as Taylor explains, magic will happen for the user:
7. Reduce Third-Party Impact
With
the impact of external applications, it is important to regularly review and assess the apps you are using. Consider uninstalling any apps that are not essential to your business or that are causing slowdowns.
Implementing performance tracking and monitoring tools can also help you identify which apps are affecting your site’s speed. You can use this data to make informed decisions about which apps to keep and which to remove, ensuring that you maintain optimal site performance.
Moreover, it’s beneficial to work closely with your app developers to ensure they optimize their applications for your specific use case and that they follow best practices in performance optimization. Regular communication can lead to improvements that benefit not only your store but all users of the app.
In summary, while third-party services can greatly enhance your e-commerce operations, it is crucial to take the necessary steps to ensure they do not negatively impact your site’s performance. By focusing on performance, optimizing scripts, and managing third-party apps effectively, you can create a faster, more responsive shopping experience for your customers.
The impact of performance on a Shopify store, there are two steps that Gavin Ballard recommends. Do you need an app?
First, consider whether you actually need an app in the first place.
“Many Shopify store apps are available to merchants without any HTML/CSS/JavaScript skills, and they just want to solve a problem with one click,” notes Gavin. “Things like countdown timers, announcement bars, or pop-up windows can be built directly into the template using nothing more than a sprinkle of Liquid, CSS, and JavaScript. Building these features directly into the template gives you more control over performance impact (for example, avoiding loading 30 versions of jQuery) and allows you to apply the other techniques discussed here and elsewhere on the web to improve how your code is delivered to the browser.” Does the app give you control?
Second, if you decide that you really need an app to support the functionality you require, explore whether the app gives you control over how it interacts with your template.
“For example, the popular Back in Stock app provides customers the ability to sign up for email and SMS notifications when a product is back in stock – something that cannot be achieved through the template alone,” explains Gavin. “However, it gives frontend developers a range of options regarding how to integrate its functionality into the Shopify template – either through an automatic installer, or through a snippet of Liquid that can be copied and pasted, or by building a completely custom integration using their API.”
10. Monitor the number of requests per subdomain
Browsers have evolved significantly since Emily Nakashima, Engineering Manager at Honeycomb.io, started coding for the web in the early 2000s, but for those of us who still need to support http 1.1, one thing hasn’t changed – there is still a limit to the number of concurrent requests that the browser will make to any single subdomain, usually six.
“The goal of this limit is to prevent accidentally launching a DOS attack on a small cute web server anywhere when you’re trying to load a full catalog page of images or other resources at once,” explains Emily. “But in today’s web, where many of us use highly scalable cloud services and serve images from CDNs, this limit can unnecessarily slow down your experience.”
To overcome this, Emily recommends a technique known as Domain Sharding, which loads a set of resources from several domains or subdomains to increase the number of concurrent requests. For example, you can use several subdomains (cdn1.example.com, cdn2.example.com, etc.) with your same CDN to enable loading more images at once. But there are some costs associated with using multiple domains – you will need to make an additional DNS request for each new domain before you can start downloading your resource.
If you want to know whether your domain sharding is optimally configured, or if you need to add more, analyze the number of concurrent requests per domain.
“When you look at distributed performance tracking on the client-side or the network waterfall in the browser’s developer tools, look for the pattern of requests,” advises Emily. “If the waterfall is relatively narrow, and requests are primarily made concurrently, you likely have enough shards. If you see sequential blocks of requests to the same domain in a ladder pattern, you probably need to configure more shards.”
11.
Use Performance Budgets
For many developers, performance optimization is one of the most interesting types of engineering, so it’s easy to get caught up in work that may not be important to your customers. Therefore, Emily Nakashima recommends making sure you’re optimizing what really matters.
“At Honeycomb, we’re big fans of the Service Level Objective (SLO) approach to prevent unnecessary optimizations,” she reveals. “When using SLOs, you’re setting pre-defined goals for your site’s performance and reliability based on your customers’ expectations and tolerances (for example, ‘My customers use our site all day at work, so it needs to be fast – home page requests should complete in under one second’).”
“You also define a budget for the amount of time you can exceed the goal (for example, ‘response time in the 95th percentile should be less than one second, 99.9% of the time’). When you’re above budget, that’s your signal to spend time optimizing things that will bring you below budget, so you can ensure you’re working on what matters most to customers. For the rest of the time, you can feel good about non-performance work, such as investing in new features or cleaning up technical debt.”
In the world of web performance, performance budgets are a specific type of SLO designed to ensure that your site loads quickly. There are many great tools that make tracking performance budgets easier than tracking average SLOs.
At Honeycomb, where Emily works on a real-time development tool that helps software engineers understand what’s happening in their production systems, the team measures their performance budget by tracking page load times in production. For teams that don’t heavily use real user monitoring (RUM), Emily says the easiest way to track and enforce a performance budget is by building it into their build tools (for example, webpack) and ensuring their HTML, CSS, and JavaScript are limited to a specific file size and file count.
Check out Google Lighthouse Audit tool and MDN Web Docs, as both provide good suggestions for how to set up your performance budget.
Put It All Together
As our experts’ tips have shown, images and third-party services remain two of the main reasons for slow sites. Allocate time and resources to optimize images and minimize third-party impact as much as possible, and you’re likely to make a big difference in the performance of the site you’re working on. Also eliminate carousels and optimize fonts and animations, and you’ll save more seconds.
Combine that with a mobile-first approach and performance budget, and you’ll have a solid web performance strategy that delights both your customers and their customers. Now, speed up that site!
Your Best Tips for Web Performance Improvement?
Share them in the comments below!
Frequently Asked Questions About Web Performance
What does web performance mean?
Web performance is a measure of how fast and efficiently a website loads, responds, and behaves for users in a given environment. It includes factors such as page speed, load times, server response times, and more. Web performance is important because it can affect user experience, search engine rankings, and the overall success of the website.
What is good web performance?
Good web performance is defined as a combination of speed, reliability, and usability. Speed is important for providing a good user experience, as users tend to abandon sites that take too long to load. Stability is essential to ensure the site is available and functioning properly at all times. Usability is critical to ensure that users can easily interact with the site and find what they’re looking for.
How
Can I improve web performance?
You can improve web performance by using a Content Delivery Network (CDN), reducing HTTP requests, enabling browser caching, optimizing images, minimizing the size of HTML, CSS, and JavaScript, reducing server response time, and
Source: https://shopify.com/partners/blog/web-performance
Leave a Reply