Website speed optimization is critical for any ecommerce site not just to rank well on search engines, but to keep customers satisfied and bottom line profits high.
While there is no benchmark as to how fast a site’s loading time should be, did you know that 40% of visitors will abandon a site that takes more than three seconds to load?
In this article, we will discuss 7 site speed optimization tips you can implement on your site to shave seconds off and enjoy better conversions.
Minimize HTTP requests
When a visitor is on your site, their browser requests the server that hosts your site to send the different source files contained in it. This request, called an HTTP request, affects your web site speed because the more files there is to downlaod, meaning more HTTP requests, the longer your site will take to load.
Reduce the elements on your site. On the average, 80% of a site’s loading time is dedicated downloading its different elements – images, content, multimedia, style sheets, and scripts. So to minimize HTTP requests, you need to simplify your design.
Streamline the number of elements on your site, use CSS instead of images whenever possible, and reduce scripts and place them at the bottom of your site. Try to reduce the number of downloaded files on your site within the 10 to 30 range.
Evaluate your images. With data from the Google Chrome Network panel, you now have an idea which elements are taking the longest time to load, and more often than not, that would be your images.
To reduce the number of requested files, remove unnecessary images on your site. Remove images you could do without, and for the images that you do keep,consider using image sprites.
Image sprites is a collection of images placed into a single image, reducing the number of HTTP requests and saving bandwidth.
Combine CSS files together. The CSS files you use for your site contributes to the number of HTTP requests needed to load your site, so combining two or more together can significantly improve your page load speed.
Pro tip: Check the current number of HTTP requests. The Google Chrome Network panel records all the elements that a browser requests and transfers to download a site. It shows what is on your page and how much time each element took to load.
To access the Network panel, open your site in Google Chrome. Access the menu and go to More Tools > Developer Tools.
Check the bottom left number pointed by the arrow in the illustration above to know the number of HTTP requests made.
Use a Content Delivery Network (CDN)
A CDN is a network of distributed servers based in different parts of the globe. Sites that have a decent amount of traffic can take advantage of a fast loading time with the help of a CDN.
When someone visits your site, regardless of where they are located in the world, the server closest to their location will deliver the view of your site. That server will make a copy of your site’s content such that when someone in the same location accesses your site.
Your site will be delivered from just around the corner instead of across the globe, improving your site load speed because there is less physical distance for your site’s content to travel.
There are tons of CDN providers out there that you can consider, such as MaxCDN, Amazon CloudFront and Cloudfare.
Reduce server response time
Server response time measures how long it takes to begin loading all HTML elements of the page from the server. According to Google, your server response time should not exceed 200 milliseconds.
Slow application logic, slow routing, or memory starvation are factors that can slow down your server’s response time.
To keep your server response time under 200 milliseconds, you need to measure it using an automated web application monitoring solution or gather and inspect any existing performance and data that you have.
From there, identify and fix any performance bottlenecks you will find and constantly monitor for any performance regressions that will occur.
Yslow and Google’s Page Speed are examples of resources that can help you reduce server response time.
Yslow can help evaluate your site’s speed and provide you tips on how to improve performance. Google Page Speed improves web page latency and bandwidth usage by automatically applying best practices to web pages and other assets, such as CSS and JavaScript.
Enable compression
Compression significantly reduces response times by reducing the size of the HTTP response.
If you have high-quality design with lots of HTML code on your pages, your page will most likely be bulky at 100kb and more. A compression tool you can use, such as Gzip can significantly reduce HTTP response size by 90%.
Almost 90% of today’s online traffic travels through browsers that recognize Gzip, making it a great option for improving your web site speed.
Optimize your images
Images are valuable assets for ecommerce because of the strong visual experience it provides. However, if your images are too large, you definitely need to make some changes.
Large images won’t contribute much value to your site as it takes a longer time to load and every one-second delay in your site’s load time can lead to loss in conversions of up to 7%.
To address this, reduce your images to the correct size. Do not resize large images on the page because this will prolong your site’s load time and it won’t be a good experience for your customers.
If the width of an image on a page is 720px, reduce your image file to that width. It is not the same as setting the width parameter at 720px when the image’s actual width is 2000px.
Aside from correctly reducing the size of your images, do not compromise its quality. EWWW Image Optimizer and Kraken are image editing tools that can do both for you.
As a general rule of thumb, try to keep your image sizes below 70kb.
Prioritize content above the fold
Regardless of the screen size, what appears at the top of the page will always influence your visitor’s interaction with your site.
In fact, 84% is the average difference in how users treat information above the fold vs. information below the fold.
For this reason, make the above-the-fold content load faster even if the rest of the page will take a few more seconds to load completely.
To do this, structure your HTML to load above-the-fold content first. Lazy Load is a plugin you can use to delay the loading of images in a long web page. It does not load images outside of the viewport until a visitor scrolls to them. This makes pages load faster and helps reduce server load.
Switch off unnecessary plugins
Having plugins can help you increase sales and improve customer experience, but having too many may not be so beneficial. Simply, having more plugins means adding more server requests and more code that your browser needs to load, slowing your site speed down.
Switch off unnecessary plugins by making a quick inventory first and evaluate it with these three questions:
Does it load a lot of elements, scripts, or styles on the page? If so, specify plugins on pages where it is necessary, instead of letting it appear on every page load. Also, consider loading assets asynchronously or after all assets have been loaded on the page.
Does it add an extra database query to each page? Evaluate the importance of your plugins’ functionalities and weigh it against the load speed of your site. You can also look for similar plugins that have fewer database calls.
Does it perform a lot of remote requests? Consider caching remote requests so a request does not need to be made every time you load a page.
Lastly, a practical way to evaluate the current state of plugins on your site is to deactivate all of them from the plugin menu and then load your site. Activate one plugin at a time and load the page every time you add one to identify which plugin is harming your site speed.
Conclusion
How to improve site speed is to have a practical approach on all the different elements of your site.
Minimize your site’s HTTP requests, use a content delivery network, reduce server response time, enable compression, and evaluate your site’s plugins. Optimize your images well and given how above-the-fold content influences your visitors’ initial interaction with your site, prioritize its loading time and defer the rest.
While these are generally easy to implement, there is no harm in implementing more sophisticated tactics to optimize your site speed further. Resources from Google Developers are great places to learn in-depth site speed optimization.
Also, do not forget to optimize your site’s speed on mobile.
Lastly, regularly check if your site speed is optimal by using web monitoring tools, such as Pingdom and Ruxit.
Digital & Social Articles on Business 2 Community(33)
