Wakefit Engineering

  1. Using webP format for all Images instead of JPEG. (saved ~2 Mb)
  2. Combining all CSS into a single CSS file. (saved ~10 trips)
  3. Combining all JS into one JS file. (saved ~15 trips)
  4. Introduced Cache-Control Headers for static assets like Images, JS, CSS.
  5. Small SVG (1–5kB) files are embedded into html. (saved ~25 trips)
  6. Using Native Image Lazy-Loading.
  7. Pre-Loading essential assets like critical images, fonts & Pre-connecting to important third-party servers in-advance.
  8. Converting fonts to modern woff2 format (having in-built compression) instead of regular ttf.
  1. Since our website was Image heavy, we switched to a more optimal Image format i.e. webP.
Earlier, we use to load 14 CSS files for each visit.
Now, compresed into single CSS file & use gZip compression.
Around 44 requests for seeking javascripts. (Earlier)
Only two javascript bundles totalling 35kB (after compression)
  1. Either we put Cache-Control header so that every repeating visitor is saved from downloading it again. But in this case, every user anyhow has to make all ~20 calls to download all of them at first place.
  2. Secondly, we can embed all of them in the HTML document in base64 encoding. This method would indeed save us from all those ~20 HTTP download calls. But the downside would be that now we can’t use Caching.
14 SVG files we used to download. Also, Small icons (now enbedded) are highlighted.

Analysis across Competitors

  1. Amazon.in
  2. Flipkart.com
  3. Sleepwell
  4. Kurl-On
  5. Urban Ladder
  6. PepperFry
WakeFit stands good at PageSpeed Scores.
Wakefit’s parameters, one of the best across competitors.

Scope

  1. Trying SSR (Server-Side Rendering).
  2. Using HHVM instead of regular PHP to boost throughtput.
  3. Using LightHouse CI (Continuous Integration) to automate Audit checking in future as we build more.
  4. Using Varnish Cache at the Server or trying NGINX default cache.
  5. Using HTTP/2 server push?
  6. Utilizing Service workers for caching?

References:

  1. https://medium.com/dev-channel/javascript-loading-priorities-in-chrome-57c54cfa6672
  2. https://web.dev/lcp/
  3. https://www.nginx.com/blog/nginx-high-performance-caching/#CachingProcess
  4. https://web.dev/lighthouse-ci/

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajat Jain

Rajat Jain

Tech Blogger. Addicted to OSS, PHP & Performance. Born & brought up in India. Software Engineer by profession. Travelled 5 countries. A Table-Tennis player.