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
43
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
820

Other Decks in Technology

See All in Technology
AWS Summit 2026で見えたSIerにとっての Amazon Quickの位置づけ
Avatar for まふりる maf_0521
0
120
クラウドファンディング版StackChan 3体（4体）をインタラクティブな体験型作品にして展示もした話 / ｽﾀｯｸﾁｬﾝお誕生日会2026
Avatar for you（@youtoy） you
PRO
0
250
Why is RC4 still being used?
Avatar for tamaiyutaro tamaiyutaro
0
190
飲食店もAIで。レジ締めやハンディシステムをつくってる話 / Using AI for restaurant management
Avatar for VTRyo vtryo
0
210
Amazon Redshift zero-ETL 統合を活用した軽量なマルチプロダクトデータ可視化基盤 / Lightweight Multi-Product Data Visualization with Amazon Redshift Zero-ETL
Avatar for 株式会社カミナシ kaminashi
0
120
事業会社は今こそSWEを高給で雇ってWebシステムを内製しよう
Avatar for 岡部匡志 masaokb
0
110
AI 不只幫你寫 Code： 當專案從 300 暴增到 1500， 我們如何撐住 DevOps
Avatar for Bo-Yi Wu appleboy
0
290
從觀望到全公司落地：AI Agentic Coding 導入實戰 — 流程整合與安全治理
Avatar for Bo-Yi Wu appleboy
0
170
FinOps X 2026 Recap from Engineer Side #JapanFinOps
Avatar for Satoshi Matsuzawa (Matt) chacco38
0
110
Multi-Agent並列開発を 安全に回すための技術 / Technology for Safely Multi-Agent Parallel Development
Avatar for philomagi tooppoo
0
220
Zenoh on Zephyr on LiteX
Avatar for takasehideki takasehideki
2
140
技術・能力を向上する原理原則 #きのこセッションa #きのこ2026
Avatar for bash0C7 bash0c7
0
180

Featured

See All Featured
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
290
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.2k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
620
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.7k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
550

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?