Performance case study 25-04-2020 bigbasket.com

case-study-01.md

bigbasket 3G Fast optimizing critical rendering path

1. devtools performance comparison - https://bit.ly/bb-perf-01
2. Simply using preload link to prioritize assets in view port
3. Improves cumulative layout shift as well by reducing the content movements
4. link rel preload can also to passed as response header.

extra-params.js

//Remove extra params
if(
  !(h === "/templates/default.location.component.html" ||
    h === "/templates/smart-banner-template.html")
){
  u(a) && A.setRequestHeader(b, a)
}

perload.html

<!-- Below needs to be added to the top of html content or it can also be set in response header -->
<link rel="preload" href="/templates/default.location.component.html" as="fetch" crossorigin="use-credentials" />
<link rel="preload" href="/templates/smart-banner-template.html" as="fetch" crossorigin="use-credentials" />
<link rel="preload" href="/content/images/svg/hamburger-menu.svg" as="image" />
<link rel="preload" href="/content/images/svg/profile-white.svg" as="image" />
<link rel="preload" href="/media/uploads/section_item/images/hdpi/All_Order-Update_App_1-1360x350_25thApr.jpg" as="image" />
<link rel="preload" href="/media/uploads/section_item/images/hdpi/All_bbstar_App_4_1360x350_15thApr.jpg" as="image" />
<link rel="preload" href="/media/uploads/section_item/images/hdpi/2004225_essentials_640_17thApr.jpg" as="image" />