1. SPEForums need your contributions to build up a strong repository of performance engineering resources.

    Dismiss Notice
  2. Whatsapp Group For Software Performance Engineering Professionals!! Click here to get added . No Spam for strictly professional discussions only.
    Dismiss Notice
Dismiss Notice
Hello Guest,

Please reach out to us at admin@speforums.com/+91 8600177662 in case you face any issues with SPEForums. Share your feedback - Click Here

Please support us by sharing performance engineering tutorials/resources with SPEForums.com

-Crew

Best Practice For Web Performance Optimization

Web Performance Optimization

  1. Ashish
    The performance of a website was always been a critical requirement. If your site is performing well then it will result into a better user experience, repeated site visits and hence increases the revenue.

    Below are some Best Practices that should be followed to speed-up website performance from the front-end.

    1. Enable HTTP request compression:

    Whenever a HTTP request is make, contents travel from server side to client side and vise-versa.

    Performance Gains:
    Compression can reduce the size of the HTTP request/response by up to 90%, which can significantly reduce the amount of time to download the resource.

    Tools & Technique:
    Apache: Use mod_zip, mod_deflate
    Nginx: Use ngx_http_gzip_module​

    2. Assets Optimization:

    Use CSS Sprites
    Use lossless Image Compression

    Performance Gains:
    Results in multi-fold benefits such as reducing the number or resource requests and reduced image size.
    Image compression would decrease the size by ~ 25%.

    Tools & Technique:
    Smushit Image Compresser
    Trimage

    3. Minify/Merge all the JS and CSS files:

    If it's not absolutely required, it doesn't need to be there: remove whitespace, code comments, reduce duplicate entries and remove unused code.

    Performance Gains:
    Minimize the total number of resource requests.
    Network round trip for additional resource trip is avoided.

    Tools & Technique:
    CleanCSS: CSS Formatter & Optimizer
    JSCompress: Online JavaScript Compression Tool
    YUI Compressor: The Yahoo! JavaScript and CSS compressor​

    4. Use Content Delivery Network:

    Remember that 80-90% of the end-user response time is spent downloading all the components in the page:
    A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users.​

    5. Implement browser caching & expiry mechanism:

    Fetching resources over the network is both slow and expensive: the download may require multiple roundtrips between the client and server, which delays processing and may block rendering of page content.

    Performance Gains:
    Reduce the amount of information that needs to be transmitted across the network and this reduces bandwidth and processing requirements of the web server and helps to improve responsiveness.

    Recommendations: When the server returns a response it must provide –
    Cache-Control - defines how, and for how long the individual response can be cached by the browser and other intermediate caches.
    Etag - provides a revalidation token that is automatically sent by the browser to check if the resource has changed since the last time it was requested.​

    6. Defer Parsing of Javascript

    In order for a web page to be completely shown to the user, the browser needs to download all its associated files. JavaScript files should not be loaded into the head of your HTML document, but rather near the bottom as it displays the web page content before the JavaScript is fully loaded.​

    7. Serving Scaled Images:

    A Scaled Image is an image whose size matches exactly with the size defined in CSS or HTML.
    If your original image called twitter-logo.png is of let’s say 300 x 250 dimension but the dimension defined in the HTML statement is 600 x 500, then the browser will first download the original image (which has a dimension of 300 x 250) and will then resize it to match the dimensions defined in the HTML statement. i.e. 600 x 500
    This resizing of images in the HTML or CSS slows down the overall page rendering considerably and should be avoided.
    To resize images (and to optimize them losslessly) you can use a free software called RIOT(available only for Windows).​

Recent Reviews

  1. admin
    admin
    5/5,
    Good read for web performance optimization. A must to have knowledge for every performance engineer dealing with portal apps.