WebPage Weight and Performance

What is the most important aspect of web application which user likes?
And definitely answer is Performance.

In the latest survey 40% of user not interested or abandon a website/web page which take more than 3 seconds to load. 1 second delay in page response or page load can result in a 7% reduction in conversion

Search engines and users struggle to trust unresponsive websites, even if the site is useful or beautiful.

Even on Google's Company belief page, one of the most important point is “Fast is better than slow. We know your time is valuable… We keep speed in mind with each new product we release.”Speed of webpage is inversely proportional to Weight of page.

Speed of webpage is inversely proportional to Weight of page.

Reduction of Weight is most important and difficult whether it is human or webpage, however if we take care from beginning of developing of product it is really easy to be Fast.

Here are some precautions/tips to achieve your websites ideal weight

1) Optimize/compress Images - Un-Optimized images can weigh a page highly down. Whether they are big or of wrong format, they contain unused amounts of data that adds up the web page load time. Dropping such images is a fast and easy way to speed up your website/webpage.

You can use lazy-loading technique to load Images. Means, to lazy-load an image means that the image is not loaded until it is needed

You can optimize your images using Google’s PageSpeed functionality (extension to the Chrome). It’s built into Chrome’s developer tools and can be accessed by right clicking on a page and selecting “Inspect Element”. PageSpeed is a tab at the top and you can use it to analyze the page you’re inspecting. When it’s finished, you can select “Optimize images” then identify the biggest offenders.

You can then replace the problem images with an optimized version from Google. Simply click on “See optimized content”, save that version, and then replace the existing one.

2) Better Use of CSS - Removing unused CSS is a good first step. Allowing that code to stick around results in downloading unnecessary bytes. Avoiding CSS expressions is a smart move as well.

3) Use of Cache - Cache what you can. Optimizing caching is particularly helpful for websites with repeat visitors. Rather than making the user’s browser load your web page’s images, CSS, and JavaScript, every single time they visit the site, you can opt to have them stored in the browser’s cache. That way, their return visit requires far less loading.

4) Useless Plugin - Plugins are really great. Implementation is fast, functionality is diverse, and most of them are free. But, definitely it has impact on page size and load times.

If you’re managing a website that has lots of plugins installed, perform a quick audit and uninstall or deactivate anything that’s not in use.

For WordPress users, the P3 (Plugin Performance Profiler) is a great way to determine what’s causing your website the most grief.

5) Minification - Minification (or minimization) is the process of reducing the size of text-based files by removing unnecessary characters such as whitespace, newline characters, and comments. File size can drop by over 30%. JavaScript, CSS, HTML and SVG can all be minimized.

6) Avoid custom fonts - Particularly on mobile devices, do you really need custom fonts? Most visitors won’t notice the difference between a fancy web font and the nearest standard one. If you insist on using a web font, it might possible to get a version of the font limited to only those characters you need

Apart from this there are many ways to increase speed of your website/webpage, but above are the most common and important factors.

Always Remember, Neglecting your website’s performance is like skipping leg day at the gym. Your upper body may get most of the spotlight, but your legs are doing most of the work throughout the day.