Defer/PostLoad/LazyLoad/Async

Many of the components from 3rd party affect the page load performance.

A nice slideshare article on 3rd Party SPOF(Single Point of failure) and how to mitigate the same by using the following options

  1. Defer
  2. LazyLoad
  3. Async

Ref : http://www.slideshare.net/guypod/third-partyperformancev3

Advertisements

Pagespeed – critical path analyzer

Critical path analyzer is a new addition to pagespeed tool.

Critical path analyzer provides the rendering events(time) in the form of waterfall. This helps in you identifying what is the rendering order, why an resource is rendered late(slow/delayed).

Also provides the dependency of these rendering events to identify if the rendering has been blocked by any Javascript execution.

Check of this video on how to use the critical path analyzer  : http://www.youtube.com/watch?v=UxgMS19S134

Measuring the webpage AFT(Above the Fold Time) performance

Aritcle on how to use webpagetest.org to get the AFT(above the fold time)

http://assets.en.oreilly.com/1/event/62/Above%20the%20Fold%20Time_%20Measuring%20Web%20Page%20Performance%20Visually%20Presentation.pdf

Mobile Website Performance Optimization – 15 awesome slideshows

http://econsultancy.com/in/blog/10506-15-awesome-mobile-website-performance-optimization-slideshows

Setting-up webpagetest private instance — In Draft

Webpagetest setup has two components

  1. Web Server (Can be Windows/Linux machine)
  2. Agent (Only Windows machine)

Both of these components can be run on single windows machine or split across machines

Webserver Setup

  1. Download and install Visual C++ 2010 SP1 Redistributable Package x86
  2. DOWNLOAD and install WAMPSERVER (32 BITS & PHP 5.3) 2.2E
    • www.wampserver.com/en
      • After the successful installation you should see the green ‘W’ icon in the system tray
      • Enable the rewrite_module –> This is required for video comparision and traceroute functionalities(urls)
        • This can be done by clicking on the ‘W’ system tray icon , selecting apache and extensions, and then select rewrite_module
  3. download ffmpeg from ffmpeg.zeranoe.com/builds/
    • Extract the zip file with winrar/7zip
    • Point the system ‘path’ variable to the directory containing ffmpeg executables
  4. Download the webpagetest 2.7 zip file
    • http://webpagetest.googlecode.com/files/webpagetest_2.7.2.zip
      • Unzip the webpagetest_2.7.2.zip and copy the www directory into the WAMP ‘www’ directory and rename as webpagetest
      • Update the httpd.conf

        Set the directory options to the following
        <Directory c:/performance/wamp/www/webpagetest>
        AllowOverride all
        Order allow,deny
        allow from all
        </Directory>
    • Set root directory to c:/performance/wamp/www/webpagetest, as all the references of webpagetest expect this to be root directory(for example CSS and JS files are expected under root directory)
      DocumentRoot "c:/performance/wamp/www/webpagetest"
  5. Setup the Location configurations as per : https://sites.google.com/a/webpagetest.org/docs/private-instances/locations

Agent Setup

  1. Copy the agent folder(of webpagetest_2.7.2.zip)

IOS Mobile Agent Setup

  1. http://andydavies.me/blog/2013/03/05/adding-ios-test-agents-to-a-webpagetest-instance/

References :

  1. Webpagetest Prviate instances doc

Setting up HttpArchive private instance

Create mysql instance for httparchive using the following schema

Download the source code from

  • http://code.google.com/p/httparchive/source/checkout
  • This source code contains the two components
    1. UI components : Files under checked out home directory. Responsible for showing the HttpArchive WebApplication.
    2. Batch processing components : Files under bulktest folder under home directory. Responsible for submitting the URLs to WPT and get the details like HAR, page load time, getting other stats and trends.

Move the checked out directory into webserver folder

Customize the code for your instance

make the changes into following files in the checked out code

File : settings.inc

  • Update WebPageTest(WPT) Instance URL. If you have a private instance set this to private URL else set to webpagetest.org
  • Update Mysql DB Name, username, password
  • Update HttpArchive WebApp URLs of local instance
  • Update HttpArchive filesystem path
  • Update PrivateInstance  to True

Optional : If you have a private instance of WebPageTest.org, you can change the default value of IE8 to your own location preference for WPT private instance in all the files in the source code.

File : bulktest/bootstrap.inc

  • Update Locations(in lieu of IE8) and WPT Key

Once the setup is complete. You can see the application running in the following URL

HomePage : http://localhost/httparchive/index.php

Adding URL Page : http://localhost/httparchive/addsite.php

Approving the URL for crawling : http://localhost/httparchive/admin.php

The crawling of the URL happens in the background as the batch process through the following scripts

  • run “php batch_start.php” to kick off a new batch testing.
  • run “php batch_process.php” repeatedly to perform a single batch testing.
  • run “php statscompute.php” to generate the stats after the batch_process is complet

Basic documentation for batch process available in the code Readme : http://code.google.com/p/httparchive/source/browse/trunk/bulktest/README.txt

I have setup the following crons jobs on my instance

  1. Run batch_start.php every 00:00 hrs
    • crontab 0 0 * * * user httparchive/bulktest/batch_start.php > /home/user/logs/yhttparchive/batch_start_out_err.txt 2>&1
  2. Run batch_process.php every hour except 00:00hrs
    • crontab 0 1,2,3,4,5,6,7,8,9,10,11,12 * * * user httparchive/bulktest/batch_process.php > /home/user/logs/yhttparchive/batch_process_out_err.txt 2>&1
  3. run php statscompute.php to populate the stats table
    • crontab 0 14 * * * user httparchive/bulktest/statscompute.php > /home/user/logs/yhttparchive/stats_compute_out_err.txt 2>&1

Database Tables Explaination:

  • urlschange : http://localhost/httparchive/addsite.php –> Newly added URLs go into ‘urlschange’ table
  • urls : http://localhost/httparchive/admin.php –> Admin will approve these newly-added-urls and then these get into ‘urls’ table
  • status : batch_start.php will create the entries into ‘status’ table by reading from ‘urls’ table
  • pages : batch_process.php will create the entries into ‘pages’ table with data pertaining to pageload time, pagespeed rank, total requests etc.. This table data is used to display in ‘viewsite.php’
  • requests : batch_process.php will create the entries into this table with data pertaining to all the requests generated for loading the page.(like HAR content).
  • stats : statscompute.php will create the entries into this table. This table data is used in ‘trends.php’ page
  • There are other tables which precede with mobile. These are for mobile URLs

Importance of webpage performance

Refs :  http://www.impressivewebs.com/importance-of-website-performance-sources/