Thank you Sanjay, Beautiful article, explained in the most lucid way possible...
Could you please write an article on 'flushing HTML'...ie. how in code, do we flush only the 'Above the Fold' HTML while in the second round trip fetch the remaining 'below the fold' and the entire document as a whole..
I mean is there any function in PHP or some Wordpress function that could do the same..
Advice on this would be really helpful, or could I just write the CSS and JS inline until I hit Below the fold and then start requesting external files, would that be helpful instead of some weird buffer concept of flushing?
Once again thank you Sanjay, It was really a beautiful article, eagerly waiting for the next one..
Hey Subin, thanks so much for the feedback and questions, and my apologies for only seeing this now :)
What you're asking is something we've just done at work and seen a massive boost in our page scores, I may start working on a relevant article soon but it will take a while to research and write.
In the meantime I would advise you that yes it's really worth it to have above the fold content prioritised and then load the rest asynchronously.
In the broadest way, I would suggest inlining critical styles in the head. Defer as many scripts as possible. And use the loadcss git/npm package to then async load the below the fold styles.
If you actually want to send below the fold html async then look at something like how webpack can codesplit and write html files.