Why maximizing website performance?

To meet these goals:

• User satisfaction and business expectation
• Improved Search ranking
• Support Mobile Users (slow and limited Internet connection)
• Reduce the costs (less bandwidth + less network latency + less resources usage (Servers, RAM …))

Note:

Network latency = (how long a packet takes to move between the server and the client).

Why websites are slow?

More than 80% slowness issues come from front end side and the rest percentages come from the back end side, client side means (HTML, CSS, JavaScript and images).

Note:

Performance measurement should be done periodically because of data changes.

What are the tools used to analyze website performance?

Use these tools to analyze websites performance before and after applying optimization to know where you are (benchmark):

• Fiddler
  • To download the tool ,http://www.telerik.com/fiddler
  • Good Reference: Fiddler book https://fiddlerbook.com/book
• IIS Logs
  • To query IIS log files and check for different HTTP status and Response time
  • To check most visited pages
  • You can write SQL queries to query the log files http://www.iis.net/downloads/community/2010/04/log-parser-22
  • Example 1: https://blogs.msdn.microsoft.com/friis/2014/02/06/how-to-analyse-iis-logs-using-logparser-logparser-studio/
  • Example 2:https://www.weblogexpert.com/info/IISLogs.htm
• YSlow
  • To download the tool ,http://yslow.org/
• Google PageSpeed
  • Online tool ,https://developers.google.com/speed/pagespeed/insights/
  • Analyzes web page for performance best practices and then produces a score and recommendations
  • In most cases ,You can’t achieve 100% score because sometime you reference resouces you don’t have permission to edit them like Google analytics link or others, Also sometime you can’t minify dynamic contents like HTML
  • You can use its API to integrated with your testing processes
• Google Web Developer tool (Network tab) in Chrome browser
  • Show requests loading time
  • Test the site with different throttling like 3G or 4G …
• Google analytics
  • Online tool ,https://analytics.google.com
  • Identify most viewed pages
• Google Search
  • Show high ranking pages
• Loader.io
  • Allows you to stress test your web-apps & apis with thousands of concurrent connections
  • MY EXPERIENCE WITH LOADER.IO ,https://fabdulwahab.com/2016/04/02/my-experience-with-loader-io/
• http://azurespeedtest.azurewebsites.net
  • To test the Network latency if your website hosted in Azure
• Web Load Testing
  • Online tool ,http://www.webpagetest.org/
  • Enterprise tool with many options and configurations
  • Can record the interval of page loading
  • Can be integrated with your local network
  • Support different test locations to know the website behavior
  • Deployed in Azure and based on agents to run the test
• Tracert
  • To check the network latency issue
• Pingdom Website Speed Test
  • Online tool ,http://tools.pingdom.com/fpt/

Note:

Before running web performance testing, make sure to disable extensions in your browsers which could affect the result like AdBlock, FlashBlock …

Hints in using these tool:

Hints With Fiddler

• Statistics tab (to see Number of requests , size , time and response contents)

• Chart

• Timeline

First request takes less than 1 sec which is from server side and the reset timeline represent the client side loading

Hints with YSlow

Check the Grade and the recommendation

Hints with Google PageSpeed

Show testing result for Mobile and Desktop and their Suggestions for improvements

Hints with Web developer tools

• Requests loading

• Hover context

• Statistics

• Filters (for example , filter to show only images and then check the statistics)

• Disable Cache

Hints with Web Load Testing tool

• Recording the loading intervals and Save it as Video

• You can select browser versions , device types and test location (to test network latency) , also you can run the test up to 9 times (to see different behavior based on internet connection and cached view for second test)

• Performance Score

• Show First and Repeat View

First byte = first byte received by the browser

• Compare (with different websites)

• Emulate mobile version

• Waterfall View

• Tabular View

• Content breakdown

• Performance review

• Single point of failure (SPOF)

What if your website use twitter API, to know how your website will behave when twitter is down

• Block files

• Disable JavaScript

• Use Authentication

Hints with tracert

Hints with Google Search engine (Top links)

General Rules for Good Website performance:

• Reduce HTTP requests
• Send as little as possible over the network
• Send it as infrequently as possible (using Cache)

Hints for some rules:

• HTTP Compression in IIS
  • Reduce page size for less bandwidth usage
  • Browsers send which type of compressions is supported in Accept-Encoding
  • If the server then uses compression for its response, it includes the response header Content-Encoding
  • To check Website compression implementation use this link  ,http://www.gidnetwork.com/tools/gzip-test.php or http://www.whatsmyip.org/http-compression-test/
  • In IIS, you can enable it for static content (like html , CSS and JavaScript files) and for dynamic content (like aspx , cshtml or json data files)
  • When you enable it, IIS will add the following settings to applicationHost.config file
    
  • To support json or xml files then add these settings to dynamic section
    
  • For more information ,https://www.iis.net/configreference/system.webserver/httpcompression

Note:

Don’t add images because they are already compressed

• Content Expiration
  • Cache the files (static files like images and JavaScript) in client side
  • Client send “if-modified-since”, if modified then the server will send the new content with 200 http and if not then the server will send 304 http request
  • The expiration time stored in Cache-Control
  • Caching common resources will help to increase the performance in all pages
  • Sometime proxy server causes issue with Caching by telling the client there is no updates but in reality there is an update
  • In IIS, to enable it
    
  • To check where the browser stores these files, for example in chrome, go to C:\Users\<user-name>\AppData\Local\Google\Chrome\User Data\Default\Cache
  • For more information , https://www.keycdn.com/blog/a-guide-to-http-cache-headers/

• Content Distribution Network(CDN)
  • Locate files which geographically closer to users
  • And offloads work from your servers
  • Also if multiple sites using the same files then the browser will get it from the cache
  • Typically for static files like (CSS, images and JavaScript)
  • Common example, jQuery CDN https://code.jquery.com/
• ETags
  • Better to remove it using Http Module or IIS Rewrite Module
  •  Read: Should I Remove ETags From My Headers?,http://blog.cloudfour.com/should-i-remove-etags-from-my-headers/

• Remove unused HTTP headers
  • Also improve the site security (less information, less attacks)
  • Reduce Response size
  • Headers to remove
    • X-AspNet-Version
    • Server
    • X-Powered-By

• Put CSS and JavaScript in Files
  • Reduce page size and Good for reuse
  • To cache them
• CSS and JavaScript Minification and Bundling
  • Remove whitespace, comments, blank lines and make variable name shorter
  • Combine files into one file to reduce the number of HTTP requests
  • Avoid runtime bundling, read this example https://fabdulwahab.com/2016/04/17/combining-client-scripts-into-a-composite-script-could-kill-the-website-performance/
  • When using bundling, group the libraries which will never be modified like JQuery plugins into one bundle and create another bundle for custom files which will be modified regularly to avoid broken the client cache benifits
  • Bundling and Minification approaches
    • Asp.Net 4 and earlier http://getcassette.net/
    • Asp.Net 4.5 http://www.asp.net/mvc/overview/performance/bundling-and-minification
    • Asp.Net 5 (no hashed Query string like previous) http://docs.asp.net/en/latest/client-side/using-gulp.html

• Image Optimization and right scaled images
  • JPEG can be smaller because of compression without affecting the quality
  • Remove unnecessary metadata from JPEG using tools like
    • http://jpeg-optimizer.com/
    • https://tinypng.com/
    • http://paint.net
  • Use right Scaling (Exact width and High)

• CSS Sprites
  • To combine small images into a single image to reduce the number of HTTP requests
  • http://www.w3schools.com/css/css_image_sprites.asp

• Fav.ico caching
  • Most browsers look for this file into the root folder of the website
  • Use <link> to point to this image
• OutputCache in Asp.Net
  • You can use substitution to exclude server method from caching
  • http://www.asp.net/mvc/overview/older-versions-1/controllers-and-routing/improving-performance-with-output-caching-cs

• Multiple domains for static Resources
  • Browsers will open a series of background connections to retrieve objects from web servers
  • Each browser has simultaneous limit
  • Be balanced, more domains mean more DNS initiation which cause slowness
  • http://www.browserscope.org/?category=network

• Viewstate in Asp.Net Web forms
  • For example to optimze it
    • http://www.alachisoft.com/resources/articles/asp-net-performance-view-state-caching.html
• Ajax
  • To update portion of a page
  • Common example is Ajax jQuery
• Correct ordering for JavaScript and Styles files
  • Put CSS before JavaScript files
  • Put CSS in the document head because browser can’t render the page until all CSS has been downloaded and parsed to avoid reflow the page layout
    • Only inline styles <div style=”” do not cause reflow the page layout
  • Put JavaScript files before the end of </body> because no DOM elements can be rendered if the script is not downloaded and executed if it’s placed in the head
    • If the website is vertical in design, then place the JavaScript files after the end of first DOM section
    • Sometime, JavaScript file affect the DOM structure espcially with websites using angulare or other libraries
  • Async Attribute and Scripts At The Bottom ,https://css-tricks.com/async-attribute-scripts-bottom/
  • if you can do it with CSS then better to go with JavaScript
• Remove unneeded resources
  • Remove comments
  • Remove unneeded javascript files
  • Used the requried Modular scripts espcially for libraries like JQuery UI
• Web Socket
  • JavaScript does not support multi-threading ,https://msdn.microsoft.com/en-us/hh549259.aspx
  • The Good and Bad of WebSockets Over AJAX , http://justbuildsomething.com/the-good-and-bad-of-websockets-over-ajax/
• HTTP/2 (Binary frames)
  • How HTTP/2 Is Changing Web Performance Best Practices ,https://blog.newrelic.com/2016/02/09/http2-best-practices-web-performance/
  • Online test tool ,http://http2.loadimpact.com/entry/

References:

• http://stevesouders.com/hpws/
• https://www.pluralsight.com/search?q=web-performance&categories=course