ReactFoo Delhi

ReactFoo Delhi

On React, alternatives to React, ReactNative and front-end engineering

Prateek Rungta

Prateek Rungta

@rungta

Page Loading Performance Strategies from the Field

Submitted Jun 30, 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.

Outline

Page loading strategies that I will demonstrate include:

  • Bundling
  • Minification
  • Automation
  • Image optimisation
  • Responsive images
  • Critical resources
  • Micro-caching
  • Web font loading
  • Link pre-fetch
  • Unused CSS
  • CDN edge cache

Princinples behind these strategies that we will discuss:

  • Network latency
  • Network requests
  • Bandwidth
  • Client hardware
  • Render blocking
  • Perceived speed
  • Reduce developer effort

Speaker bio

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.

Slides

https://speakerdeck.com/rungta/page-loading-performance-strategies

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

A community - for and of - front-end engineers to share experiences with ReactJS, performant apps with React, crafting better User Interfaces (UI) with React and GraphQL ecosystem. ReactFoo also discusses design patterns and user experience. more