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
340
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
80
Sneaky Santa
14islands
0
55
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
Developer Joy - The New Paradigm
hollycummins
1
360
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
130
Google Opalで使える37のライブラリ
mickey_kubo
3
140
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
970
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.1k
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
AkarengaLT vol.38
hashimoto_kei
1
120
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
540
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
730
Go言語の特性を活かした公式MCP SDKの設計
hond0413
2
510
技術的負債の正体を知って向き合う
irof
0
250
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.2k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
How to train your dragon (web standard)
notwaldorf
97
6.3k
The Pragmatic Product Professional
lauravandoore
36
7k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
610
KATA
mclloyd
PRO
32
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Visualization
eitanlees
149
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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