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
1
37

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
Tweet

More Decks by Ben Everard

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

Other Decks in Technology

See All in Technology
[OCI Technical Deep Dive] OracleのAI戦略(2025年8月5日開催)
Avatar for oracle4engineer oracle4engineer
PRO
1
250
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか？
Avatar for an cap120
1
700
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
Avatar for emi emiki
0
240
コミュニティと計画的偶発性理論 - 出会いが人生を変える / Life-Changing Encounters
Avatar for soudai sone soudai
PRO
6
310
テストを実行してSorbetのsigを書こう！
Avatar for SansanTech sansantech
PRO
1
130
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く！現場で活用するためのAIエージェント実践入門（Findyランチセッション）
Avatar for Shumpei Miyawaki smiyawaki0820
7
1.3k
「Roblox」の開発環境とその効率化 ～DAU9700万人超の巨大プラットフォームの開発 事始め～
Avatar for Keita Tanji keitatanji
0
140
Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)
Avatar for たけのこ kmiya84377
1
160
あとはAIに任せて人間は自由に生きる
Avatar for Kentaro Kuribayashi kentaro
2
170
リモートワークで心掛けていること 〜AI活用編〜
Avatar for naoki85 naoki85
0
190
薬屋のひとりごとにみるトラブルシューティング
Avatar for tomokusaba tomokusaba
0
390
ユーザー課題を愛し抜く――AI時代のPdM価値
Avatar for KAKEHASHI kakehashi
PRO
1
140

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
770
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
It's Worth the Effort
Avatar for 3n 3n
186
28k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
58
9.5k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.2k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k

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?