Page Loading Performance Strategies from the Field
Submitted by Prateek Rungta (@rungta) on Saturday, 30 June 2018
Performance on the web isn’t a simple switch that can be flipped on but a vast, multi-layered subject. Page loading speed is one of the layers that has received a fair bit of attention recently thanks to tools like PageSpeed Insights and WebPageTest. While these profilers serve as great checklists to measure our sites against, their recommendations can often be difficult to incorporate or grasp fully.
This talk will examine modern page loading best practises and attempt to demystify them. For each performance strategy, I will break down the why and how. We will discuss the principles on which these loading strategies are based, and dive into ways to implement the strategies with real-life examples.
The ideas and experiences presented in this talk are based on my experience building and maintaining CMS-based websites for clients both large and small. The learnings and performance gains should be applicable to all websites, independent of the technology stack.
Page loading strategies that I will demonstrate include:
- Image optimisation
- Responsive images
- Critical resources
- Web font loading
- Link pre-fetch
- Unused CSS
- CDN edge cache
Princinples behind these strategies that we will discuss:
- Network latency
- Network requests
- Client hardware
- Render blocking
- Perceived speed
- Reduce developer effort
Prateek Rungta architects information and builds content-heavy websites at Miranj — a web design and development studio in New Delhi which he co-founded in 2011. Besides work, he likes to travel and experience different cuisines, most of all on a remote hill or mountain, far away from the reaches of the internet.