Get your server issues fixed by our experts for a price starting at just 25 USD/Hour. Click here to register and open a ticket with us now!

Author Topic: Steps to Speed up the web page  (Read 3048 times)

0 Members and 1 Guest are viewing this topic.

sachinj

  • Guest
Steps to Speed up the web page
« on: September 29, 2017, 01:25:06 am »
Step 1 – Use a CDN (Content Delivery Network)

A content delivery network involves a series of high-bandwidth servers located in data centers spread all over the world. Essentially you can load web objects of your choosing such as images, scripts, videos, etc. onto these CDN servers, so that when a visitor comes to your site these objects are loaded from a faster, more reliable server in tandem with the objects loading from your own server.

By placing such files on a CDN you significantly reduce your server load, and these objects are loaded in parallel to those on your server, thus significantly improving both actual and perceived page load speeds. Because the files are distributed to data centers around the globe, load speed can be fantastic regardless of where a visitor is coming from.

One of the best CDNs out there is Akamai, though there are quite a few options available. If you want to improve the page load speed of your site, this should be one of the first things you look into.
Step 2 – Reduce the Quantity of Objects Loading

When a page loads, every single item on the page contributes to the page load speed. A good rule of thumb is each object contributes an average of 500-1000 milliseconds in perceived page load speed (though this can vary drastically based on type and size of objects.) So, if you have 70 objects loading, you’re probably looking at a 3.5-7 second perceived page load speed.

Every image, every JavaScript file, every CSS file, every ad call, every analytics tracking file…the bigger the file, the longer it takes, and they all add up! After a CDN, minimizing the number of files needed should be your next step. A fast loading, well thought out site should have no more than 15-20 objects loading on any given page.

A few common tactics for doing this are to combine multiple CSS and JavaScript files into one unified CSS file and one unified JavaScript file. At the same time, you should also eliminate any unused or unnecessary CSS and JavaScript from said files.

Another common tactics is to combine images and to reduce the file size of those images by changing file types and by removing unnecessary color channels.

You can also use CSS Sprites, which combines background images into a single image that uses CSS positioning to display the desired image segment in the right place. You can significantly reduce the total number of images and the overall file size this way, potentially saving quite a bit of load time.
Step 3 – Set Expires Header as Far Out as Possible

When a visitor comes to your site, the code on the page can tell the browser how long to cache the various files from your site. While this won’t help for first time visitors, it will drastically improve page load speed on subsequent visits.

There is a great article on Yahoo that talks about the details, but you essentially want to set all static elements to never expire, and variable elements should be set with conditional requests.

You should keep in mind how often your site changes when doing this, and set the length accordingly. If you make visual and code changes to your site once per year, set your expires header to 12 months. If you make changes monthly, set it to 30 days. You get the idea.
Step 4 – Gzip Compression

It’s possible to use compression to reduce the file size of HTML, XML and JSON file requests. This is a more complicated tactic, but it can save on overall bandwidth usage and thus on load time. It’s explained in detail here, and all major browsers can handle this type of compression.

Depending on the size of your files and the amount of unnecessary space that can be compressed, this could result in significant load speed benefits.
Step 5 – Order Your Code for Users

Browsers render websites based in the order of the code on the page. If the visual and user facing elements (text, CSS, images) appear at the top of the code, they will be rendered first, thus decreasing the perceived page load speed. Though it may take some time for additional elements to load, it will appear to site users that the page has fully loaded (this tactic really works in conjunction with the other tips we’ve covered.)

To do this correctly, put any non-external scripts and non-visual coding elements at the bottom of the code (except for asynchronous Google Analytics script, which belongs in the <head> section.)

At the same time, you can also “minify” your HTML, CSS and JavaScript (reduce unnecessary spacing, comments, etc.), and work to reduce your overall text-to-code ratio, which can have an SEO benefit.

Overall your code should be clean, as simple as possible, and ordered in such a way that visual elements come first and heavier or less important elements come last.

And that’s it! While there are dozens of other tactics (many are explored in the Yahoo article in Step 3), these 5 things will provide some quick wins for any page load speed problems you may be experiencing.

As you implement these changes, keep an eye on your average page load speed in Webmaster Tools (or wherever you’re tracking it), and definitely track your conversion rate, bounce rate and average time on site.