Web Optimisation

Web optimisation is the key part of web development and it is the trick to increase the viewers count.

Seeing as 47% of users expect a webpage to load in under 2 seconds, and 40% will abandon a page that takes more than 3 seconds to load

Eliminating the unnecessary downloads.  

Web pages are the systems installation not required. They are always downloaded from the server and show the application view to the users. So if we are not optimised the page. It is downloading whole resources and shows to the users it takes more time. So we need more concern on optimising the downloads to the user what he really wants. 

Encode and optimise the transfer size.

Improve the page speed, we have to optimise the overall download size and minimised it by using the following techniques. 

Data Compression 

The next step in the optimisation is to compressing the resources the browser has ready to download. we are able to do the pre-processing to compress the resources like texts, images, videos and etc. on the server. 

# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16


The above message contains 200 character message. which include comments, headers information key value pairs and some payloads respectively,

How can we optimise this message? 

  1. The comments are awesome, but they do not affect the meaning of the image, so eliminate it when you transmitting the message to the browser.
  2. The message have format and date on all its headers so make them into id like that, we skip for now this conversion
  3. The payload has some repeated characters so we change them into another format. or we are able to use any efficient chipping techniques. 
If we do the above compression we got the compressed message as follow

format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

Here this message have only 54 characters and the compression rate is 72%, But we are not the concern on the algorithms, we need to concern about the compression based on the different algorithms based on the data types so we need to do preprocessing, context-specific optimisations, and different algorithms for different content.

Minifications : preprocessing & context-specific optimisation 

The best way to redundant the arbitrary data is to reduce the size of we convert them to other optimised format without changing the meaning. 

An example below shows the simple code of a page. 

     /* awesome-container is only used on the landing page */
     .awesome-container { font-size: 120% }
     .awesome-container { width: 50% }

   <!-- awesome container content: START -->
   <!-- awesome container content: END -->
     awesomeAnalytics(); // beacon conversion metrics

How we are going to reduce the size of the above page?

  1. Simply we are doing this remove the comments as we did above. 
  2. Also, a smart CSS composer notifies the .awesome-container is handled on an inefficient way. 
  3. An additional composer removes the white spaces.

So our final code looks as follow

<html><head><style>.awesome-container{font-size:120%;width: 50%}

After we did the compression our page goes to from  406 to 150 characters, a 63% impression. 

Similarly this technique can be extended to images, videos and other content types. 

For example, whenever you take a picture with a camera, the photo also typically embeds a lot of extra information: camera settings, location, and so on. Depending on your application, this data might be critical (for example, a photo-sharing site) or completely useless, and you should consider whether it is worth removing. [ Google Optimised Tutorial ] 

Text compression with GZIP

GZIP compression is the highest pay-off technique to compress the texts and libraries.

If you are a web developer, you should be experienced in the area of GZIP compression. Have you ever seen jquery.min.js the .min is normally used to identify the GZIP compression files? 

The compression ration of the popular libraries as follow 

Popular posts from this blog

Hide the navigation bar in jHipster Angular 2