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

Dev.Ocean #3: Web Performance Improvements In O...

Avatar for Ben Everard Ben Everard
May 30, 2013
Technology
39
1

Dev.Ocean #3: Web Performance Improvements In One Hour

My second speaking gig at Dev.Ocean #3. A slight evolution of my Points Brighton talk.

Avatar for Ben Everard

Ben Everard

May 30, 2013

More Decks by Ben Everard

See All by Ben Everard
Shropgeek Rebellion: Web Performance Improvements In One Hour
Avatar for Ben Everard beneverard
1
240
Points Brighton: Web Performance Improvements In One Hour
Avatar for Ben Everard beneverard
1
800

Other Decks in Technology

See All in Technology
マルチプロダクトの信頼性を効率良く保っていくために
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
180
Chasing Real-Time Observability for CRuby
Avatar for White-Green whitegreen
0
270
Practical TypeProf: Lessons from Analyzing Optcarrot
Avatar for Yusuke Endoh mame
0
1.2k
AgentCore Managed Harness を使ってみよう
Avatar for やくも yakumo
2
240
独断と偏見で試してみる、 シングル or マルチエージェント どっちがいいの？
Avatar for ShichijoYuhi shichijoyuhi
1
160
The Journey of Box Building
Avatar for Satoshi Tagomori tagomoris
4
3.6k
色を視る
Avatar for yuzneri yuzneri
0
130
260422_Sansan_Tech_Talk__関西_vol.3_データ活用のリアル__矢田__.pdf
Avatar for SansanTech sansantech
PRO
0
120
Standards et agents IA : un tour d’horizon de MCP, A2A, ADK et plus encore
Avatar for Guillaume Laforge glaforge
0
200
AIが盛んな時代に 技術記事を書き始めて起きた私の中での小さな変化
Avatar for 松尾淳平 peintangos
0
220
バイブコーディングで3倍早く⚪⚪を作ってみた
Avatar for Sam Akada samakada
0
150
Class.new is all you need
Avatar for Shia riseshia
1
190

Featured

See All Featured
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.2k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
680
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
200
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.5k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
490
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
170
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
840
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
280
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
410

Transcript

  1. Ben Everard Web performance improvements you can make in one

    hour §

  2. J’adore le web

  3. Pre-talk shout-outs... Andy Davies http://andydavies.me Steve Souders http://www.stevesouders.com/

  4. Why is performance so important?

  5. “If an e-commerce site is making $100,000 per day, a

    1 second page delay could potentially cost $2.5 million in lost sales every year.” http://blog.kissmetrics.com/loading-time/?wide=1

  6. “Amazon found that it increased revenue by 1% for every

    100 milliseconds of improvement” http://sites.google.com/site/glinden/Home/StanfordDataMining.2006-11-28.ppt

  7. A real example...

  8. Mobile Visit Exmoor site http://m.visit-exmoor.co.uk At Exmoor speeds... Weighs 2MB

    • Destroyed my phone battery • Entire site loaded in 7.2 minutes • 30 seconds before anything is visible

  9. Measuring...

  10. Your toolbox... Google Page Speed Yahoo! YSlow Others... Chrome Dev

    Tools Firebug WebPagetest Slowy App et al...

  11. Lets get started...

  12. 1) Reduce requests

  13. None

  14. http://www.websiteoptimization.com/secrets/metrics/10-21-http-request.html

  15. TCP Segmentation

  16. 2) Reduce page weight

  17. 75% of page weight in these two images Mobile Visit

    Exmoor site http://m.visit-exmoor.co.uk

  18. Image optimisation

  19. Minify assets

  20. GZIP compression

  21. <ifmodule mod_deflate.c> ! AddOutputFilterByType DEFLATE ! ! text/text ! !

    text/html ! ! text/plain ! ! text/xml ! ! text/css ! ! application/x-javascript ! ! application/javascript </ifmodule> http://git.io/XTDjng
  22. None

  23. 3) Caching

  24. <IfModule mod_expires.c> ! ExpiresActive On ! ExpiresByType text/css "access plus

    1 year" ! ExpiresByType application/javascript "access plus 1 year" ! ExpiresByType text/javascript "access plus 1 year" ! ExpiresByType text/html "access plus 1 hour" ! ExpiresByType text/richtext "access plus 1 hour" ! ExpiresByType text/plain "access plus 1 hour" ! ExpiresByType text/xml "access plus 1 hour" ! ExpiresByType image/gif "access plus 1 year" ! ExpiresByType image/jpeg "access plus 1 year" ! ExpiresByType image/png "access plus 1 year" ! ExpiresByType image/x-icon "access plus 1 year" </IfModule> http://git.io/XTDjng

  25. Cache busting!

  26. http://domain.com/screen.css?v=2

  27. 4) Loading assets

  28. CSS at the top Within the <head> element

  29. JavaScript at the bottom Just before closing </body> tag

  30. http://davidwalsh.name/html5-async

  31. 5) Use a CDN

  32. maxcdn.com

  33. 1) Reduce requests 2) Reduce page weight 3) Be explicit

    with caching 4) Loading assets 5) Use a CDN What have we learnt?

  34. 1) Find and fix issues on your own site 2)

    Tell your friends 3) Drink beer What next?

  35. Cheers! Ben Everard ilmv beneverard.co.uk [email protected] ✉ 

  36. Questions?