Building High Performance Site



What will we cover

  1. Answer to 1 Frontend interview question
  2. Saving company money
  3. Helping marketing team retain users
  4. Loads of gyan 

Importance of performance

47% of consumers expect a webpage to load in two seconds or less, and 40% abandon a website that takes more than three seconds to load.

Effective measures-Basic

1.CSS Sprites








Effective measures-Basic

  • CSS Sprites










Effective measures-Basic

2.Inline Images

<img src="data:image/png;base64,iVBORw0KGgoAAA
5ErkJggg==" alt="Red dot" />

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Base64-encoded Data URLs are ~33% larger in size than binary images. With gzip it's ~3% larger

  • ​Compress scripts, stylesheets, XML, JSON.
  • Never Gzip Images, PDFs.


3.Compression and Minification

Effective measures-Basic

Google now compresses display ads with Brotli, reducing data usage by a ~15% to 40%  

60% of page weight is images




Effective measures-Basic

  • Async / Defer
  • Combined scripts, combined stylesheets
  • Header and Footer Scripts


4.Move Scripts to the bottom

Effective measures-Basic

5. Caching

  • ETags
  • Cache-control
  • Application cache 
  • Service Worker 

But what if you are giving a SDE III interview

RAIL Model

RAIL Step Key Metric User Actions
Response Input latency (from tap to paint) < 100ms. User taps a button (for example, opening navigation).
Animation Each frame's work (from JS to paint) completes < 16ms. User scrolls the page, drags a finger (to open a menu, for example), or sees an animation. When dragging, the app's response is bound to the finger position, such as pulling to refresh, or swiping a carousel. This metric applies only to the continuous phase of drags, not the start.
Idle Main thread JS work chunked no larger than 50ms. User isn't interacting with the page, but main thread should be available enough to handle the next user input.
Load Page considered ready to use in 1000ms. User loads the page and sees the critical path content.

PRPL Pattern saw a ~10% improvement in Time to Interactive when they switched to preloading key late-discovered scripts for their Progressive Web App saw a ~18% improvement in Time to Interactive when they switched to dns-prefetch for their Progressive Web App


Twitter Lite







“The perception of performance is just as effective as actual performance in many cases”

                                                                                         - Apple

Show Loaders

Better Loaders

Performance Test Tools 


  1. Google Pagespeed insights
  2. GT Metrix 
  3. Web Page Test

Browser Based

  1. Yslow
  2. Speed Tracer


Instant loading

By Prathik S

Instant loading

  • 1,325
Loading comments...

More from Prathik S