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
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
8.7k
ガチな登山用デバイスからこんにちは
Avatar for halka halka
1
240
2025年になってもまだMySQLが好き
Avatar for yoku0825 yoku0825
8
4.7k
react-callを使ってダイヤログをいろんなとこで再利用しよう！
Avatar for shinaps shinaps
1
230
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
Avatar for morimorikochan diggymo
3
190
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
Avatar for you（@youtoy） you
PRO
0
100
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
Avatar for gowhich501 gowhich501
1
130
Language Update: Java
Avatar for Yuichi.Sakuraba skrb
2
290
AWSで始める実践Dagster入門
Avatar for キタガワ kitagawaz
1
600
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
120
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
Avatar for Masaya Kudo msykd
PRO
1
700
企業の生成AIガバナンスにおけるエージェントとセキュリティ
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
2
160

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.2k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.9k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
8.9k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
696
190k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
840
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.5k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k

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?