Maximizing Website Performance

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):

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)

01

  • Chart

02.png

  • Timeline

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

03.png

Hints with YSlow

Check the Grade and the recommendation

04.png

Hints with Google PageSpeed

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

05.png

Hints with Web developer tools

  • Requests loading

06.png

  • Hover context

07

  • Statistics

08.png

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

09

  • Disable Cache

10.png

Hints with Web Load Testing tool

  • Recording the loading intervals and Save it as Video

10.png

  • 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)

11.png

  • Performance Score

12.png

  • Show First and Repeat View

First byte = first byte received by the browser

13.png

  • Compare (with different websites)

14.png

  • Emulate mobile version

15.png

  • Waterfall View

16.png

  • Tabular View

17.png

  • Content breakdown

18.png

  • Performance review

19.png

  • Single point of failure (SPOF)

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

01

  • Block files

02.png

  • Disable JavaScript

03.png

  • Use Authentication

04.png

Hints with tracert

tracertgood.png

Hints with Google Search engine (Top links)

06.png

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

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
      10.png
    • 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
  • 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
  • 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

Untitled.png

References:

 

 

 

Advertisements

One thought on “Maximizing Website Performance

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s