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
78
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
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
RDoc meets YARD
okuramasafumi
2
130
TDD 実践ミニトーク
contour_gara
0
150
パスタの技術
yusukebe
1
400
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
Claude Codeで挑むOSSコントリビュート
eycjur
0
180
Introduction to Git & GitHub
latte72
0
120
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
210
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
180
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
180
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
730
実践!App Intents対応
yuukiw00w
1
350
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Agile that works and the tools we love
rasmusluckow
329
21k
The Invisible Side of Design
smashingmag
301
51k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
KATA
mclloyd
32
14k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Bash Introduction
62gerente
614
210k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
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