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

Browser – dns-prefetch , prefetch, prerender

The latest browsers support the following new attributes in <link> tag.

  1. dns-prefetch
  2. prefetch
  3. prerender

If we can predict (know to which next page the user is moving to) destination URL, we can prefetch/prerender the page in browser memory. This gives an improvement to perceived webppage  performance

A nice article from Stevesourders on the same : http://www.stevesouders.com/blog/2013/11/07/prebrowsing/

Adding iOS agents to Webpagetest

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

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

25 great tips for improving the Web Page Performance

The following site contains 25 great tips for improving the web page performance

http://browserdiet.com/

Spdy protocol from google for faster web

SPDY is an experiment with protocols for the web.  Its goal is to reduce the latency of web pages.

http://www.chromium.org/spdy

More detail in the following video

https://mozillaignite.org/resources/labs/lab-5-spdy-eliminating-web-bottlenecks-and-taking-full-advantage-1-gbs/

Image compression with webp

WebP is a new image format that provides lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index. WebP supports lossless transparency (also known as alpha channel) with just 22% additional bytes. Transparency is also supported with lossy compression and typically provides 3x smaller file sizes compared to PNG when lossy compression is acceptable for the red/green/blue color channels.

https://developers.google.com/speed/webp/

http://www.igvita.com/2013/03/07/faster-smaller-and-more-beautiful-web-with-webp/

Webp format has been implemented in Opera . Check the following value for “Accept” header. This includes “image/webp”

Opera text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1

More details in : http://blog.netdna.com/developer/how-to-reduce-image-size-with-webp-automagically/

Follow

Get every new post delivered to your Inbox.