Push Your Website Into Overdrive With These 5 Speed-Boosting Tips for Maximum Performance
The year is 1839. Outside the only watering hole located within a hundred miles, two stone-faced combatants stand twelve paces apart along a lonely, windswept desert road. At one end, the villainous outlaw cowboy who’s hit every bank and casino across the southwest. On the other, the courageous county sheriff who’s looking to bring him to justice. Showdown at high noon. The fastest gun wins. Be quick or be dead.
Okay, so maybe owning and operating an Internet retail business isn’t exactly a matter of life and death like it is for the two gunslingers in our story, but speed can definitely impact your earning potential for better or worse. What we’re talking about here is website loading speed. Speed–more appropriately, the LACK of speed–is a killer. According to this article from Medium, 52% of online shoppers cite website performance as a detrimental factor to their site loyalty. 47% of shoppers expect a page to load in 2 seconds or less and 40% will leave if a page takes longer than 3 seconds to load. Poor website performance is the online retail world’s equivalent to to rude salespeople. If shoppers are being turned away by slow-loading websites, this will not only negatively affect your business’s sales and revenue, it will hurt your overall standing with search engines. And there’s nothing more disheartening than opening up shop just to see your shoppers taking their business elsewhere.
There are plenty of free website speed tests available if you do a search. Go ahead. Try one out. If your website checks out and everything’s all in perfect working order, pages are loading in lightning-fast speeds, then you can probably stop reading this and go about your day. But if you’re being passed up and your site is showing some serious lag, we’ve got 5 easy tips on how to put some horsepower into your pages and decrease those lengthy loading times.
#1: Optimize Images for Web Use
Websites rely on eye-pleasing, captivating design layouts and imagery to help engage their visitors. In ecommerce, this is even more important as product pages have to act as the “silent salesperson” in lieu of shoppers physically walking into a store and being able to see and touch the merchandise for themselves. In one of our earlier entries, How to Optimize Your Product Page for Higher Conversion, we list product photography as a factor to help improve customer conversion rates. Clear, detailed photographs can aid the customer in making the decision to purchase. However, the higher the image resolution, the longer it will take for the item to load thus, affecting the page loading time. Super high-resolution photos are not necessary for web use as they’re better suited for print work. Cut down image resolution and optimize to drastically cut down those load times. The JPEG format is the best for retaining image quality, color saturation, and clarity through compression but be mindful of the compression technique, as well as the image dimensions, to reduce artifacting. If possible, avoid GIFs unless a transparent background is absolutely necessary. GIFs can be quite weighty in size and, in smaller document dimensions, resolution can suffer. Using a PNG image will also suffice if you wish to show an image with a transparent background, but be warned that some browsers have difficulty in handling .png files and these may not properly display on screen. NEVER use .PSD or .BMP formats.
#2: Limit the Use of Apps, Add-Ons, and Integrations
BigCommerce does a pretty good job with their packaging of regularly-used features as standard equipment, but additional third-party apps and integrations allow for even greater expanded functionality of your ecommerce webstore. Some apps are essential to the overall usability of your site and are non-negotiable; the webstore will not function without them. Others, however, are non-essential and act more as customer convenience tools and UX enhancements. Are these kinds of apps nice to have for your site’s visitors? Yes. Are they absolutely 100% important? No. Too many supplemental apps and add-on integrations run the risk of not only slowing down your website’s performance, but they can also potentially cripple your page entirely (see BigCommerce VS. Shopify: The Shopify Ceiling). Some apps and integrations don’t play well with others; this can be attributed to the custom coding required to write said app and integration that is specific to your webstore’s exact needs. Before you start adding random miscellaneous apps to your ecommerce website, do the research and find out which ones are compatible with each other and the ecommerce platform on which your site is based. Also, determine which apps are absolutely crucial for your store and which ones are there just for UX filler. Make no mistake, UX is a major part of online customer satisfaction, but it should never come at the cost of functionality and website reliability. The more apps and add-ons there are, that’s more data that needs to be transmitted and more data means more time required to load.
#3: Reduce Render Blocking Files
In the late 90s, the Internet was nicknamed the “Information Superhighway”. Well, as hokey as that name sounds in today’s age of smartphones, tablets, and even cars and kitchen appliances with onboard Internet connectivity, ‘superhighway’ can still be considered relevant as phrasing. Think of the Internet as Interstate 80, the highway that which connects the east and west coasts of the United States from Teaneck, NJ to San Francisco, CA. All of the vehicles traveling along Route 80 can be collectively called data. A steady flow of traffic at consistent speed helps ensure smooth travels. The cars are all keeping steady pace and on their way to their respective destinations when suddenly, there’s a couple of slowpokes hogging the left lane and that steady traffic flow has slowed to an excruciatingly aggravating crawl. These slowpokes are called render blocking files and these include Javascript and CSS. Javascript and CSS offer dynamic content presentation over the static and old-fashioned HTML language, but the disadvantages of dynamic over static is that dynamic frameworks can be interpreted differently by different web browsers. The browser has to build a DOM tree before rendering a page and when it encounters Javascript or CSS, it stops loading the other resources in order to focus attention on executing the script (this happens for both internal and external scripting). Like the slowpoke in the left lane who refuses to move over, this adds unnecessary seconds onto your valuable travel time. Render blocking files slow the loading process and, as their name suggests, blocks the page from completely rendering. Fortunately, there are multiple solutions on how to optimize or remove these render blocking Javascript and CSS files. You can move the Javascript files to the bottom of a page so that they’re the last to load. If the Javascript is small, it can be inlined directly into the HTML code. You can delay loading of Javascript by parsing and for CSS, you can link the HTML element to load CSS files. Perhaps, the most overlooked ways to reduce load times through cutting down render blocking files: add any CSS styling into the head tag instead of the HTML element. Many WYSIWYG editors incorrectly add CSS to the HTML elements and they do it automatically, so it’s something to be on the lookout for if you use such an editor to write code.
#4: Minify Javascript, CSS, HTML5/6
This is related to reducing render blocking files. As stated in the previous section, dynamic frameworks (Javascript, CSS, HTML5/HTML6) are much more versatile in their execution of complex layouts and presentation, but the unfortunate side-effect is complicated code structure that can bog down and add seconds to that precious load time. Script optimization (minification) cleans up any dead code, as well as useless white spaces, blanks, commas, comments and the like so that the code, when encountered by the browser, loads cleanly and efficiently with minimal hesitation. Like trimming excess fat off of a cut of meat, dynamic frameworks have their share of empty calories that can afford to be discarded for the sake of website performance. You can find Javascript minification tools online. Five excellent examples include Google Closure Compiler, YUI Compressor, UglifyJS, JSMin, and Packer.
#5: Limit the Number of Redirects
Almost all websites have undergone some sort of revision over the course of their individual lifetimes. Things get added, deleted or, as often is the case, the sites themselves move to entirely new platforms. If you’re new to BigCommerce and have recently made the transition from another platform, chances are the data from your old website had to get migrated over to the fancy new BigCommerce site. If you had any legacy content that you wish to transfer over to your new site, you would use a 301 redirect. 301 redirects are a necessary evil; your website loads elements other than straight code and redirects are part of those other elements. Any redirect is going tack on more page loading time but without them, your new site’s navigation may not be complete and the site might not be as visible to search engines as it once was. They’re recommended for SEO use; many websites that neglect to redirect their old content often suffer the consequences of losing their pre-established SEO ranks and drop further down the search engine results. Google suggests eliminating non-essential, unnecessary redirects. They recommend to not link to pages that already have known redirects on them as well as not using multiple redirects per one resource. This creates needlessly complicated redirect chains that only handicap your ecommerce website’s performance. Find and remove old redirects and redirect chains (for secure sites, use HSTS to remove SSL redirects). You can check your .htaccess file or other server config files for any old legacy redirects.
BONUS: The AMP Project for Google
Mobile technology is rapidly becoming the preferred method for which people will use for Internet access. This includes anything from social media to ecommerce. According to this chart by statista, the number of mobile shoppers in the United States has seen significant yearly increases, from 122.9 million shoppers in 2013 to 188.4 million in 2017. That’s a substantial growth of 53.3% over the course of only 4 years. 2018 is projected to gain another 5.5% as the total climbs towards 200 million total shoppers. The AMP (Accelerated Mobile Pages) Project is an open-source technology that’s designed to allow for publishers to create mobile-friendly content that’s not only compelling and cutting-edge, but also loads rapidly and in an efficient manner. AMP is supported by a vast range of platforms, vendors, and partners and is compatible across the most popular web browsers in use today, including Google Chrome, Apple Safari, and Mozilla Firefox. AMP pages use 3 core components, AMP HTML, AMP JS Library, and the Google AMP Cache. All of which use pre-existing technology and frameworks and enhances them for optimal mobile use. The AMP Project for Google takes your AMP pages and further refines them for easier integration into the Google search engine. Google Search indexes AMP pages and purposely features them on mobile search (results and rankings for mobile sites differ between Google Mobile Search and standard Google Search). The Google AMP Cache will make AMP pages load even faster by saving valid AMP content published to the web in an AMP-dedicated cache of its own. For webstore owners, AMP integration across Google’s already ecommerce-friendly features will act as a complete overhaul of your Internet-based business. There will be AMP-enhanced Google Analytics, Google Adwords, DoubleClick, and other Google Shopping tools to help boost your website’s performance. BigCommerce has recently added native support for AMP pages, making it possible for more than 55,000 merchants on BigCommerce to reach an even broader audience across the Internet. It’s another, among an already impressive list of advantages that BigCommerce ecommerce websites have over the competition.
To learn more about how Diztinct can help you optimize your ecommerce website for maximum earning potential, feel free to contact us or read about our services. Don’t forget to follow us on Twitter and “Like” us on Facebook.