August 30, 2016

248 Views

Enhance your web experience with performance optimization

What is Performance Optimization?

Performance is a feature which means how quickly you deliver your content to users. It deals with the process which makes your page’s interaction and rendering as smooth as possible. It is directly proportional to generating revenues and business.

  1. Strategy

    There are 2 major strategies involved in Performance optimization: Bottom up and top down strategy

    1. BOTTOM UP Strategy

      This strategy involves keeping an eye for implementing the fundamental rules of performance and developing pages by adhering to basic principles.

    2. TOP DOWN strategy

      This strategy involves taking remedial actions on an already developed website, when performance issues are encountered.

  2. How we do it?

    COMBINING FILES

    A web page may have many style sheets or scripting files as per project requirement. But we can combine all the required CSS files and minify it in a separate CSS file, thereby reducing the number of HTTP requests. The same applies for scripting files as well. It is also advisable to compress your CSS files by removing extra white spaces. E.g.

    It reduces the white space and helps in reducing the file size of the CSS file. There are some online tools available which help to minify CSS files e.g. http://cssminifier.com/

    USE IMAGE SPRITES

    A page can have a number of images, and all these images require individual HTTP requests to load. This increases the page load time and decreases the performance.

    So, we should use an image sprite which combines all related images in a single file. Thus, a single HTTP request for the sprite image will be generated. This reduces the load time considerably.

    JS CONCATENATION

    Let us assume that we are working on an eCommerce project where we have to walk through the checkout process. To reduce HTTP requests and to gain maximum performance benefit, we can club the identical files into a single min JS file which lists all linked Javascripts. We can then minify it to accelerate the performance.

    1. Minimize HTTP requests

      The number of HTTP requests in your page is based on number of elements (images, scripts, and style sheets). It increases the page load time. In order to reduce the page load time, we have a couple of paradigms which can help to reduce the HTTP requests.

    2. Avoid Inline Scripts

      Putting scripts and CSS in external files ensures that they are cached by the browser. If you use inline styles, they are loaded every time as your web page loads.

    3. Remove unused CSS with help of Grunt/Gulp

      Let’s talk about lots of CSS written which is unused. This will only increase the file size and eventually lead to latency in loading of the web page. Here, Google Chrome Audit helps us by pointing out the area or concern which you may enhance.

    4. Remove Duplicate Scripts

      Mozilla provides a nice add-on “SpeedView” which quickly shows all external JavaScripts and CSS files on the current page. It figures out the number of repetitive files which increase number of HTTP requests.

    5. Image Optimization

      Images are the prime element of most of the web pages. Optimizing images can be helpful in major byte savings and performance improvement.

      USE IMAGE WHEN IT IS ACTUALLY REQUIRED

      • Use CSS3 transitions to get the special effects (Shadow, Transform) and you can save a good amount of file size.
      • Use CSS3 web fonts in place of images, if we are writing text. There should not be any image for showing the text.
    6. No 404 Errors (Remove Broken Links)

      It consumes a lot of memory on the server to deliver the 404 error or customized 404 error page, which is unnecessary and slows down the user experience.

      So, the optimum solution is to periodically verify your web pages with the help of some good ‘broken link checkers’ and get rid of those broken links.

    7. Use over @import

      CSS placed at the top allows progressive rendering and a better user experience. But in IE, @import behaves the same as using

      tag at the bottom of the page, so it is advisable not to use it.
    8. Lazyload

      LazyLoad is a fast, lightweight and flex ible script for loading images only when they're about to enter the viewport of a scrollable area. It delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. Using Lazy Load on long web pages will make the page load faster. It will also have lower number of HTTP requests and hence lead to a better user experience.

  3. Tools used for Performance Optimization Analysis
    1. YSlow

      YSlow analyzes web pages to find out why they're slow, based on Yahoo’s rules for high performance web sites. It summarizes the page's components and displays statistics about the page. It also provide tools for performance analysis, e.g. JSLint.

       

    2. Ghostery

      Ghostery alerts users about the web bugs, ad networks and widgets on visited web pages, news, screenshots and download. It empowers consumers and businesses globally to create safer, faster, and more trusted digital experiences. It controls how they are tracked online.

References