Quick Tips to Optimize Page Load Time

Page loading speed is very important for both usability and SEO. The fast loading time will provide better user’s experience. Based on research, people will leave your site if your webpage loads slower than 3 seconds. Moreover, Google considers page loading speed to be one of ranking factors in the search ranking results. Here are the 11 tips to help you optimize your website for fast loading.

1. Avoid Landing Page Redirects
Why you need to avoid redirect? Redirects will produce an additional HTTP request to your server which make a delay in page rendering.

Example:
example.com → m.example.com

In this example, when user visit example.com on their mobile, the server redirect them to m.example.com. This will make slow mobile experience. Solution is to use responsive web design, no redirects are needed.

2. Enable Compression
When you enable GZIP compression, it can reduce the size of the transferred response by up to 90%. All modern browsers support and automatically negotiate gzip compression for all HTTP requests.

Apache: Use mod_deflate
Nginx: Use ngx_http_gzip_module
IIS: Configure HTTP Compression

3. Minify HTML, CSS, and JavaScript
You should minify your HTML, CSS, and JavaScript resources by removing unnecessary code comments and formatting, unused code, using shorter variable and function names and so on. This will reduce the size of your scripts and the page will lighter to load. Here are some useful minifying tools:

Jscompress.com - Online JavaScript Minifier
Cssminifier.com - Online CSS Minifier
Willpeavy.com - Online HTML Minifier

Rememver, always keep the original versions of your scripts, because it is easier to modify your scripts when you want to update them later.

4. Optimize Images
Your images should be optimized to reduce their file size without significantly impacting their visual quality. When you saving image for your website in Photoshop make sure that you use Save for Web and Devices feature and try to choose between JPG, PNG and GIF file formats.

Usually, flat color image is better optimize to save PNG format.

You can also remove unnecessary image metadata such as geo information, camera information and so on.
This will also reduce the size of the image. You can use this tool ExifTool to remove those information.

5. Use a Content Delivery Network
A CDN is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. Deploying your content across multiple location servers will make your pages load faster for the users. Here are the three well known CDN services:

6. Place StyleSheets at the Top
The webpage will load from top to bottom. Putting CSS at the top will make the style load at the very beginning. This ensure the visitors will see what we intended them to see.

We do not want users to see un-styled page when viewing the sites.

7. Place JavaScript at the Bottom
Usually, JavaScript is used for functionality and validation features. Most of the time, it can be loaded after other important things such as CSS, text and other assets on the page. That is why you should put it at the bottom of the page.

8. Reduce HTTP Requests
You can reduce HTTP requests by combining your JavaScript and CSS files into single or fewer file as possible. This will reduce the numbers of requests for the web page.

9. Use Image Sprites
Image is the most important element in web content. We use a lot of images in our website such as icons and logos which would produce a lot of requests to the web server.
For the solution, image sprite is implemented. Image sprite is a collection of images put into a single image and then use CSS to position those image. This will reduce a lot of requests and make page load faster.

10. Avoid Inline JavaScript and Style
External JavaScript and style is recommend because when the page load the browser will caches external scripts and styles. This will reduce HTTP requests and page load time. While inline JavaScript and style will increase page size.
11. Leverage Browser Caching
You can take advantage of browser caching. Web browser will store a local copy of your files and assets so it can be reused for return visitors. This make the page load faster. You can leave it up to the browser to handle the caching for you, or you can tell the browsers what to do by modify your .htaccess file.

Source from : Howoptimize.com