Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Faster Responsive Websites
Search
14islands
May 07, 2014
Programming
2
330
Faster Responsive Websites
Talk from the JavaScript meetup 7th of May in Reykjavík, Iceland
14islands
May 07, 2014
Tweet
Share
More Decks by 14islands
See All by 14islands
Construindo interfaces interativas com React
14islands
0
77
Sneaky Santa
14islands
0
54
Innovation & Prototyping
14islands
0
170
Google Santa Tracker: Present Bounce
14islands
0
240
Responsive Web Design Recap
14islands
8
1.4k
Lessons learned using WordPress as a CMS
14islands
2
960
The good, the bad and the ugly with responsive web design
14islands
4
1.9k
Performance as design: doing responsive responsibly
14islands
32
8k
Other Decks in Programming
See All in Programming
JetBrainsのAI機能の紹介 #jjug
yusuke
0
170
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
630
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
250
Flutterと Vibe Coding で個人開発!
hyshu
1
200
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
9.1k
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
540
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
35
11k
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
780
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
310
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
330
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Six Lessons from altMBA
skipperchong
28
3.9k
BBQ
matthewcrist
89
9.8k
Code Review Best Practice
trishagee
69
19k
RailsConf 2023
tenderlove
30
1.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
A better future with KSS
kneath
238
17k
Agile that works and the tools we love
rasmusluckow
329
21k
Code Reviewing Like a Champion
maltzj
524
40k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
None
FASTER RESPONSIVE WEBSITES
This talk is not about How to build a rocket-ship
with Javascript
This talk is about Techniques to make our websites faster
THE PROBLEM
“75% of mobile users will leave the site if it
takes more than 5 seconds to load. http://www.digitalmall.us/1150/smartphone-users-frustrated-with-mobile-web-experience/
None
“Today the average website is 1.7MB httparchive.org/interesting.php
http://httparchive.org/interesting.php?a=All&l=Oct%201%202013&s=Top1000 AVG. SITE 0 1 2 <1mb 2011 1.5mb 2013
2mb 2015 AVG. SITE 0 1 2 AVG. SITE 0 1 2
None
None
“87% of mobile users expect sites to load at least
as fast, or faster than on their desktop. http://www.strangeloopnetworks.com/web-performance-infographics/
None
None
None
LET’S START WITH A PAGE BUDGET
None
Example: Less than 3 seconds to see something.
Example: Not bigger than 1MB.
Example: No more than 20 requests.
Now try to stick to it. (good luck!)
USING ONLINE TOOLS SUCH AS WEBPAGETEST.ORG
None
None
Coffee image
None
– Paul Lewis “The Speed Index is the average time
at which visible parts of the page are displayed. http://aerotwist.com/blog/my-performance-audit-workflow/
– Paul Lewis “Paul Irish has, in the past, recommended
a goal of less than 1,000. http://aerotwist.com/blog/my-performance-audit-workflow/
Filmstrip
OLD-SCHOOL IS STILL COOL PROGRESSIVE ENHANCEMENT
None
– Jake Archibald “All your users are non-JS while they're
downloading your JS. https://twitter.com/jaffathecake/status/207096228339658752
Twitter.com dropped initial page load to 1/5th by moving rendering
to server. https://blog.twitter.com/2012/improving-performance-twittercom
Airbnb experimented serving real HTML instead of JS and it
felt 5x quicker. http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product/
None
http://www.flickr.com/photos/not-so-much/2819702177/
TV FRIDGE CAR
MOBILE-LAST
Breakpoints are enhancements
MOBILE-FIRST
DELAY LOAD OF SECONDARY CONTENT
Core content Secondary Secondary
Core content Secondary Secondary
Core content Secondary Secondary
var deferred = $.get("/partial"); ! deferred.done(function (html) { $wrapper.html(html); });
Real life example: Press Jack - article nav / next
article
Lazy load images
None
https://github.com/ sakabako/scrollMonitor
var watcher = scrollMonitor.create(context, offset); ! watcher.enterViewport(loadImages);
<img data—lazy-src="http://path/to/image.jpg" />
<img src="http://path/to/image.jpg" />
OPTIMISING RESPONSIVE IMAGES
Biggest performance hit 69% of mobile web traffic
Serve images in the correct sizes. Please.
CSS background images
.thing { background-image: url('images/small.png'); } ! @media (min-width: 30em) {
.thing { background-image: url('images/medium.png'); } }
Note: Not for content images
Proposed <picture> spec
<picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg
1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture>
http://ericportis.com/posts/2014/srcset-sizes/
<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em)
33.3vw, 100vw" /> Available images and their width Breakpoints in CSS and image width relative to the viewport
http://responsiveimages.org
None
https://github.com/ scottjehl/picturefill Version 2.0
front-end & back-end Javascript
<img data-src="http://path/to/image.jpg" />
var imageWidth = image.offsetWidth * window.devicePixelRatio; ! var src =
“http://hej.se/image.jpg?w=“ + imageWidth; ! image.setAttribute("src", src);
Check browser for size and capabilities
Check browser for size and capabilities Request CDN
Do we have this image? Check browser for size and
capabilities Request CDN
Return the image Do we have this image? Check browser
for size and capabilities Request CDN
Prepare the image Return the image Do we have this
image? Check browser for size and capabilities Request CDN
Prepare the image Return the image Return the image Do
we have this image? Check browser for size and capabilities Request CDN
None
THE AWESOMENESS OF SCALE VECTOR GRAPHICS
None
SVG 4KB uncompressed PNG 10KB uncompressed
And it’s only markup text
Summary ! ! ! ! !
Summary Be aware. Set a "budget". ! ! !
Summary Be aware. Set a "budget". Progressive Enhancement is still
cool. ! ! ! !
Summary Be aware. Set a "budget". Progressive Enhancement is still
cool. Prioritise loading of content with JS. ! ! ! !
Summary Be aware. Set a "budget". Progressive Enhancement is still
cool. Prioritise loading of content with JS. Images are the biggest hit. ! ! !
Summary Be aware. Set a "budget". Progressive Enhancement is still
cool Prioritise loading of content with JS. Images are the biggest hit. SVGs are awesome. ! !
Summary Be aware. Set a "budget". Progressive Enhancement is still
cool Prioritise loading of content with JS. Images are the biggest hit. SVGs are awesome. ! !
Think and prioritise performance from day one.
“Measure. Treat performance as a core part of your site’s
quality and don’t ship without understanding and accepting it’s performance. http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/
There are techniques
We need to care more
None
Takk ! ! http://twitter.com/14islands ! http://facebook.com/14islands