Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The 12MB Web Page: A tale of perfect PageSpeed ...

Avatar for Ben Smithett Ben Smithett
May 09, 2016
Technology
1
340

The 12MB Web Page: A tale of perfect PageSpeed scores & developer happiness

Quick little talk I did at an Envato Code Party on May 9 2016.

Avatar for Ben Smithett

Ben Smithett

May 09, 2016
Tweet

More Decks by Ben Smithett

See All by Ben Smithett
Atomic CSS with Fela
Avatar for Ben Smithett bensmithett
0
130
Objects in Space: A practical guide to CSS display, position & z-index
Avatar for Ben Smithett bensmithett
0
55
The UI is an Application
Avatar for Ben Smithett bensmithett
0
1.2k
Hands on with the modern front end stack
Avatar for Ben Smithett bensmithett
0
1.2k
The New Front End Stack: A really really really high level introduction
Avatar for Ben Smithett bensmithett
1
530
Smarter Sass/Less Builds with Webpack (MelbJS Edition)
Avatar for Ben Smithett bensmithett
0
340
Smarter Sass builds with Webpack
Avatar for Ben Smithett bensmithett
1
240
Faking Real Time: Optimistic Updates & Eventual Consistency (Decompress 2015)
Avatar for Ben Smithett bensmithett
0
510

Other Decks in Technology

See All in Technology
We Built for Predictability; The Workloads Didn’t Care
Avatar for Michael Stahnke stahnma
0
150
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
680
旅先で iPad + Neovim で iOS 開発・執筆した話
Avatar for ZOZO Developers zozotech
PRO
0
100
インフラエンジニア必見!Kubernetesを用いたクラウドネイティブ設計ポイント大全
Avatar for 高棹大樹 daitak
1
390
AI駆動開発を事業のコアに置く
Avatar for 鬼澤輔 tasukuonizawa
1
400
SRE Enabling戦記 - 急成長する組織にSREを浸透させる戦いの歴史
Avatar for Masaki Ishigaki markie1009
0
170
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
Avatar for Toru Makabe torumakabe
1
620
生成AIと余白 〜開発スピードが向上した今、何に向き合う？〜
Avatar for KAKEHASHI kakehashi
PRO
0
170
マネージャー視点で考えるプロダクトエンジニアの評価 / Evaluating Product Engineers from a Manager's Perspective
Avatar for hiro-torii hiro_torii
0
190
学生・新卒・ジュニアから目指すSRE
Avatar for Hiroya Onoe hiroyaonoe
2
770
量子クラウドサービスの裏側　〜Deep Dive into OQTOPUS〜
Avatar for OQTOPUS oqtopus
0
150
ECS障害を例に学ぶ、インシデント対応に備えた AIエージェントの育て方 / How to develop AI agents for incident response with ECS outage
Avatar for iselegant iselegant
4
430

Featured

See All Featured
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
650
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
200
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
1
760
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
440
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
420
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
120
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
2
2.4k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
220

Transcript

  1. The 12MB Web Page A tale of perfect PageSpeed scores

    & developer happiness
  2. None
  3. None
  4. None

  5. A static HTML page + some photos Fast? Easy to

    build? Free?

  6. Fast?

  7. https://eev.ee/blog/2016/03/06/maybe-we-could-tone-down-the-javascript/

  8. http://idlewords.com/talks/website_obesity.htm

  9. Web pages are pretty fast by default! They only get

    slow when we add “clever” cruft

  10. on the other hand…

  11. Photos are biiiiiiiiiig!

  12. The challenge: Can I make a blazing fast, image- heavy

    web page without resorting to lots of hacks & workarounds

  13. How fast can a simple HTML document be?

  14. None
  15. None
  16. None
  17. None
  18. None

  19. Speed Index: 1613 In the fastest ~10% of all websites

  20. Optimisation #1 A truthful browser spinner

  21. https://medium.com/@kellycatchpole/10-best-dog-breeds-for-your- family-22ea2cdde78d Browser says page has finished loading LIES!!!!

  22. Don’t make the browser spinner lie. When the page says

    it’s done loading, it’s really done!

  23. Optimisation #2 Progressive JPEG

  24. None

  25. Optimisation #3 Responsive Images

  26. Widescreen + Retina: 11.1MB Tablet + Retina: 9.8MB Phone +

    Retina: 8.7MB Widescreen: 7.8MB Tablet: 6.5MB Phone: 1.7MB

  27. Optimisation #4 Font Face Observer

  28. None

  29. https://github.com/bramstein/fontfaceobserver

  30. None

  31. Optimisation #5 <script async src=“…”>

  32. Optimisation #6 Cache everything forever

  33. None

  34. Optimisation #7 Use a CDN

  35. None

  36. Notable absentees: • “Critical CSS” • Loading content asynchronously •

    Anything very tricky or hacky at all…

  37. Easy to build?

  38. I couuuld hand-write the HTML & CSS for this, but

    I want…

  39. • A living styleguide! • Sass! • Hot reloading! •

    Reusable components!

  40. The tooling: • React (no client side!) • Webpack +

    static-site-generator-webpack-plugin • Sass • CSS Modules

  41. React is a better back-end templating language than your favourite

    back-end templating language.
  42. None
  43. None

  44. Free?

  45. GitHub Pages + CloudFlare =

  46. GitHub Pages has pretty crappy caching settings…

  47. None

  48. But if you stick CloudFlare in front of it…

  49. Easy cache header setting!

  50. Free SSL! (well, “flexible SSL”)

  51. A static HTML page + some photos Fast Easy to

    build Free ✅ ✅ ✅