How To Speed Up Mobile Website Performance [Infographic]

Helen Tarkhanova

3, 2,1… Bang!

I’m sorry. But your precious customer has just sneaked out of your loving arms into those of your savvy competitor’s. Why? Because your mobile website is not speedy enough to catch up with the ever-running present-day society. And yes, you had only three seconds to do it. No more.

Studies show, that even a 1-second delay in page load time yields 11% fewer page views, dramatic 16% drop in customer satisfaction and 7% conversion loss. Is that what you were looking for? Hope, not.

That’s why improving your mobile site performance is critical. Your eCommerce site should be tuned like a race car, ready to blaze down the superspeedway that is the world wide web. If it’s as slow as a rusty ramshackle vehicle, very soon you will find yourself in the middle of nowhere, be sure.

The benefits from a snappy, performance-boosted site are numerous:

  • Fast sites rank better in search engines. Google has specifically stated that one of their ranking factors is site performance, especially for mobile users. Bing also has focused its webmaster guidelines more towards site speed.
     
  • Speed optimization reduces server load. Say goodbye to capacity problems and crashed servers, and hello to less bandwidth usage. Most optimizations aimed at increasing speed also decrease file sizes, saving storage space and reducing the amount of information that the server needs to send to each visitor.
     
  • A fast website increases conversions. Fast page loads make happy customers, and happy customers buy more. If it takes ages to load up the page, then they are much less likely to hit continue shopping and browse for additional products.

Table of Contents:

CHAPTER 1: Infographics
CHAPTER 2: Tips On Speeding Up Mobile Site Performance

  1. Enable Browser Caching
  2. Enable Image Compression
  3. Minimize HTTP Requests
  4. Optimize images
  5. Minify Resources (HTML, CSS and JavaScript)
  6. Measure and minimize web server response time
  7. Avoid or minimize redirects to increase mobile page speed
  8. Put JS at the bottom and CSS at the top
  9. Use gzip compression to reduce file size
  10. Use Solid State Drives and Managed Hosting
  11. Improve Latency With A Mobile CDN
CHAPTER 3: How to determine your mobile site’s speed
CHAPTER 4: Speeding up your WordPress website

CHAPTER 1: Infographics

Speed Up Mobile Website Performance

So, now that I have you ready to optimize your site, where do you start? Below are 11 proven techniques to increase your site speed. Read on.

CHAPTER 2: Tips On Speeding Up Mobile Site Performance

a. Enable Browser Caching

The World Wide Web is a truly exciting place and many of us totally rely on it these days. No wonder, it puts us in touch with people and events across the globe and brings all of the world’s information to our fingertips in no time.

This powerful experience is possible with the help of web browsers on any internet-connected device in the world. Why not make your this process even more seamless for your users?

The thing is that all modern web browsers today can keep the copy of your store’s files. They are stored on your user’s device the first time he lands on your website. If the user comes back again, the next day or even in a week, it will load much faster because some of the content is already downloaded and stored in the browser’s memory. This trick is called “browser caching“. Do not fling it aside.

Put simply, you regularly travel to your fav Waianapanapa Black Sand Beach on the island of Maui, in Hawaii, and take a super heavyweight luggage, full of flip-flops, pareos, and bathing suits. What would happen if you could leave all these things there? You’ll travel without luggage next time.

Web browser caching is like a luggage room where you store your files. It can greatly help you improve your mobile website performance by saving files, just in case your user comes back and needs them again. Performance research by YUI Team shows that it can instantly reduce the website loading time from 2.4 (with an empty browser cache) to 0.9 seconds (with a full browser cache). 62,5% speed boost is darn well!

More info: Applying caching techniques in X-Cart to achieve high performance

b. Enable Image Compression

Image compression can be extremely valuable for increasing your mobile website speed as well. I am consistently amazed at the webmasters that do not pay attention to the file sizes of their images. PNGs, GIFs, and JPGs should all be compressed for the web by at least 30-40%.

Make sure that the image is the exact size that it needs to be for the space provided, don’t let the web browser scale down the image, resize it in an image editor like Photoshop. If you need a free image editor that can perform most functions, take a look at the GNU Image Manipulation Program, or GIMP for short.

Be very wary about filesize, and experiment with different formats to see which will give you the best balance between size and quality. Try out the numerous free image optimizers on the web.

с. Minimize HTTP Requests

HTTP requests are one of the biggest killers of site speed. A request happens when either the HTML or the CSS files reference separate elements, like images, scripts, Flash or stylesheets, and “request” them be loaded by the browser one by one. So, the more on-page components you’ve got, the longer the load time.

The quickest way to increase your mobile site speed is to simplify your design:

  • Streamline the number of elements on your page. A general rule of thumb is to limit the links in your main navigation to no more than seven; remove unnecessary features; make your copy concise and get rid of overlapping forms.
     
  • Use CSS instead of images if possible. Such effects as rounded corners, shadows, gradients can be easily achieved with the help of CSS.
     
  • Combine multiple style sheets into a single one. X-Cart uses a skin system: there’s a base directory for the templates with the primary CSS file (main.css), and then there is the currently selected skin directory with the secondary CSS file (altskin.css). This makes it easy for you to customize your design without overwriting core files, but it can lead to some “doubling up” of code when it comes to CSS. You may need to transfer styles from one file to the other to significantly increase site speed.
     
  • Put scripts at the bottom of the page or get rid of them. This way the HTML content will be loaded first, and your users won’t have to wait for a script to finish downloading.
     
  • Combine images into a CSS sprite sheet, a larger image that contains all of the different images that you need to use in your design. It will reduce the references to individual images and boost your mobile store’s load speed. Read more about CSS sprites at CSS-Tricks.

d. Optimize images

A large volume of full-sized unoptimized images is one of the most common culprits for slow websites. Big images 1mb or 2mb+ consume a large bandwidth while loading, use a lot of server resources and, sure thing, get on your customers’ nerves. You need to focus on three things: size, format and src attribute.

Here are a couple of useful tips:

  • Crop your images to the correct size before uploading them to your site. 1200×1200 px will be quite ok both for retina and regular displays.
  • Try to avoid BMBs, TIFFs or GIFs. JPEG is your best option. Remove image comments and reduce color depth to the lowest acceptable level.
  • Make sure there are no empty <img src=’…’> codes as this can add unnecessary traffic to your servers.

e. Minify Resources (HTML, CSS and JavaScript)

We need spaces and formatting in order to read an article, in styling sheets these elements are of no use at all.

For example, the code that ships with X-Cart is human readable for your ease of customization. This is a quite handy while designing a site, however, the code itself may contain extra text that is not always useful to the browser. So, after the design phase is over, you should better reduce that code to a smaller size by sucking out the “air”.

The first step to minifying is to actually remove unwanted and unneeded code, thus significantly improving your website speed.

Next turn your attention to JavaScript. If you have any extraneous files or scripts that can be removed, by all means, do it.

After all, take out all the extra spaces and line breaks. You can do this manually, of course, or you can use an automated tool like cleancss.com.

Believe me, both your styling sheets (CSS files) and code used to display the page (HTML and JavaScript files) will benefit dramatically from minification and increase your store’s load speeds.

There are several (recommended by Google!) online tools that you can also use to minify files. Check them out now:

Just be sure to keep a human readable backup of the file, so you can make changes in the future.

f. Measure and minimize web server response time

Mobile site speed is not only about keeping your code clean and well-organized. It also depends on a big, fat tech tool, also known as a web server. It means that the longer your server has to wait before receiving data from customer’s browser, the slower your website. The reasons can be different — from slow database queries to memory starvation.

Your target should be reducing your server response time under 200ms. Google experts recommend analyzing the existing performance and then, with data at hand, fixing top performance bottlenecks. Here are a few more things you can try to enhance your server response time:

  • change your web server software or configure it better
  • reduce the resources required by your web pages
  • if nothing helps, find a better web host for your store. Consider hosting your store with X-Cart — lightning-fast solid-state drives will give you faster page loads by 300% and turn your slow website into a supercharged race car.

g. Avoid or minimize redirects to increase mobile page speed

“We strongly encourage webmasters to minimize the number or ideally eliminate redirects entirely,” – that’s what Google experts recommend.

Why? That’s quite simple. While you make your customers “travel” from one page to another, trying to create a better user experience, the time is marching on. And the more time they have to spend waiting for your page to load, the more unsatisfied they become.

From a tech point of view, redirects create additional HTTP requests and thus reduce your website’s page loading speed. So, try to keep them to a minimum.

h. Put JS at the bottom and CSS at the top

Both CSS and Javascript can make or break your eCommerce site performance.

The primary purpose of JS (JavaScript) is to bring interactivity and animation to your eCommerce website. Yes, this technology can help you create a rich user experience, but the content should be your top priority, especially for mobile users, browsing your site on the go. That’s why it’s crucial to display your JavaScript after HTML content is loaded.

Placing CSS (Cascading Style Sheets) at the top of the page will help you prevent FOUC (Flash of Unstyled Content) when a web browser shows your web page’s content without having any style information. Also, all your pages will be loaded faster that is sure to increase your site speed.

i. Use gzip compression to reduce file size

Another great option for speeding up your site is Gzip compression. You’ve probably already tried compressing files on your computer and are well aware that a huge 300Mb file can be instantly reduced to a tiny 25Mb file. Gzip compression works the same way, but for websites.

I know it might seem too complicated for a non-techie, so contact your hosting provider if you are unsure whether you currently use compression or not.

You might simply need to add some code to your .htaccess file or turn on the different file types in cPanel. There are several mime types (types of files) that need to be compressed, the basic ones being: “text/html text/plain text/xml text/javascript text/css”. Also consider compressing the following types: “application/xml, application/xhtml+xml, application/javascript, application rss+xml, application x-javascript, text/css”.

Gzip compression should strongly minimize your file size and increase your site speed as a result.

j. Use Solid State Drives and Managed Hosting

The new era of Solid State Drives (SSD) can give your website an awesome performance boost and increase the load speed by about 20 times if compared to a normal HDD. Also, servers with SSD are more resistant to shocks, run quietly, have lower access times, and less latency than an HDD.

Another effective way to speed up your site performance is to host your eCommerce website on a dedicated server — a machine fine-tuned to power your store exclusively. That means you get better speeds and your customers — better user experience.

k. Improve Latency With A Mobile CDN

This is the final step, but perhaps the most important. A content delivery network (CDN) can take a major load off your server, and speed up your website pages enormously. With a CDN, many of your images and scripts can be stored on their distributed network of servers, with the closest web server to the client actually sending the content.

This way your client from India will get the content from a local Asian web server. And the one from Norway will get the data straight from European servers, not from your server in the US. This removes the latency associated with traveling around the world and, as a result, increases your mobile website performance.

Popular CDNs are MaxCDN, CloudFlare, and EdgeCast. AmazonCDN is another option, and X-Cart team offers a module which integrates your store with it.

CHAPTER 3: How to determine your mobile site’s speed

After implementing all the above tips, you should test your eCommerce website speed to see if there’s any difference. Of course, you need to have some tools in your belt before you start doing that.

Different tests will invariably provide different results, so I encourage you to test your site using multiple tools:

First off, you can try Webpagetest.org. It can produce a nice waterfall chart and a screenshot using different browsers and locations around the world. I like that they do a comparison between the first page load, and the second, after your files have been cached.

Then, run Pingdom Website Speed Test. It will help you analyze the load speed of your eCommerce website, learn how to improve its performance and compare your website speed to other websites online.

Another option — built-in Google PageSpeed Module for those who use Google Chrome. Just open the developer tools by hitting F12 (try it now), or right-clicking and selecting “inspect element” on a web page. One of the tabs should be “Audits”, which can make suggestions as to how to speed up the page you’re checking.

Now take a look at the “Network” tab. This is a list of all the resources that were downloaded for this page, their size, and the time they took to load (you may need to refresh the page to see the report). At the bottom of the page you should see a total: 100 requests | 1MB transferred 6.50s — example of a slow website. These numbers represent the requests, individual files that must be downloaded from your site, and then the total file size of the page, and finally, the time in seconds that it took to load.

CHAPTER 4: Speeding up your WordPress website

Many of our customers use X-Cart with their existing WordPress sites. Oftentimes, we get requests on speeding up their WordPress blogs and I wanted to take a minute to offer up some of the best tips we use to speed up WordPress sites:

  • Choose the right theme. WordPress themes based on a strong and lean framework not only make it easy to design & tweak the appearance of your website, but also increase website speed.
     
  • Use Lazy Load for text, images, and videos. Lazy Load WordPress plugin couldn’t be easier to use — you just install it (no tweaks needed, luckily) and it starts to lazily load images, thus improving page load times and server bandwidth.
     
  • Compress your code. WP Super Cache and W3 Total Cache WordPress plugins should be a good solution here — it will formidably compress your website’s files and, as a result, lower load times and speed up your WordPress website.
     
  • Compress your images. Use EWWW Image Optimizer to automatically give your digital images the perfect size.
     
  • Optimize your site’s database. Use a WordPress database optimization plugin, like WP Sweep, to get your site’s database in order.

You may also use all the other techniques, stated in this article for your WordPress site as well. Among them are combining images in CSS sprites, using a CDN, choosing a better place to host your WordPress website and so on. All these life hacks can turn your WordPress blog into a super-speedy eCommerce website.

The Bottom Line

Speeding up your eCommerce website is something that should be the top priority if you want to stand out from your competition. It may be a daunting task, but it is sure to be rewarding.

Even if only 2 or 3 of the above tips prove useful for your store, that would be really great. Happy running your marathon!

P.S. Any new tried-and-true life hacks? Share them with us in comments. Do not be shy.

Sign in
Share2
Tweet
+1
Email