Speed up Your Website Pages’ Loading Speed [Part 1]

136
4.80/5
06/24/2020
3 minutes

One of the most common reasons of losing customers on eCommerce websites is a page loading speed. Modern users have no time to wait. In order to sell well, your website should look impeccable, work perfectly, and load really quickly.

In this series of articles I am going to address some topical issues concerning eCommerce platforms. Let’s begin with the most general one.

Server response time

Performance matters. Everybody knows that there is a strict correlation between website speed and revenue. That’s why eCommerce website owners should really care about it. If you still aren’t using Nginx you have to start doing it! Nginx is an open source high performance web server and load balancer. It serves significant part of busiest websites on the Internet. From our experience, we are usually able to shorten response time 4-10 times compared to a more popular Apache web server.

Compression

Most web servers support GZIP compression method using mod_deflate for Apache or HTTP Gzip Module for Ngnix. It can save you up to 60% of traffic and the same amount of idle time for user.

CDN

Content Delivery Network allows you to distribute files over multiple servers and deliver them much faster to your users. All static files can be stored on a CDN, such as but not limited to: Images, Videos, JavScript, CSS and Fonts.

Here’s what difference it makes in comparison with hosting all your files on the same server:

  • Distributed data centers across the globe.
  • High availability.
  • Resolves issue with browser limiting concurrent connections to single domain.
  • Reduce hosting costs.

Optimize images

Reduce image files’ size by using appropriate format JPEG for photos or PNG for all other images by reducing quality and color depth. You can also use tools like JpegTran and OptiPNG to reduce image size without visible quality loss. You can gain up to 80% size optimization using this technique.

Minify CSS and JavaScript

Minifiers remove unnecessary spaces, tabs, comments and new line characters from the code. JavaScript minifiers can also shorten function and variable names whenever possible.

You can sufficiently reduce size of your website CSS and JavaScript files by minifying them using YUI Compressor or cssmin.js for CSS and Closure CompilerJSMin or YUI Compressor for JavaScript files. Minifiers usually allow you to save at least 30-40% of file size.

Render-blocking JavaScript

Another common issue is the so-called “Render-blocking” JavaScript. Websites often have <script> tags inside <head>, this prevents browser from rendering page prior to loading all scripts defined there, so, it is an additional time for a user to wait. You can put “async” parameter to <script> tags in order to load them asynchronously or move javascript somewhere to the bottom of the <body> tag.

How fast is your website?

There are a lot of useful tools to check that. Here are just a few I use:

Did you enjoy the read? Was it useful? Your sentiment helps us to create better content. Use the reactions to assess the article. Or leave us a note in the comments. We are out here to boost your tech savvy.
4.8/ 5.0 rating (9 votes)
Vadim Ilyasov

Vadim is one of the hardcore ninjas of productivity and responsibility. He understands intuitively what you need, and dealing with him allows you total peace of mind, because you know everything will always be done properly. He loves fast cars, good weather and a nice cup of tea. A normal guy with a taste for success. Don’t miss your next chance to work with him directly.