Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet.
In this session we’ll look at the tools that can help you understand, measure and improve the web performance of your web sites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply.
This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”
This talk was given at the Responsive Web Design Summit hosted by Environments for Humans.
4. What I’ll Talk About
• Quick Intro About Why We
Should Care About Web Perf
• Tools for Measuring Web
Performance
• Setting Up a Device Lab
• Responsive Design + Server-
side Solutions
5. WHY SHOULD WE CARE ABOUT
WEB PERFORMANCE?
http://flic.kr/p/4JY1Yr
7. The way in which CSS media
queries have been promoted for
mobile hides tough problems
and gives developers a false
promise of a simple solution for
designing for small screens.
Source: Jason Grigsby on Speakerdeck
“
”- Jason Grigsby
@grigs
17. Best request is no request.
Worst request is one that
blocks the parser.
Source: Ilya Grigorik
“
”- Ilya Grigorik
@ilyagrigorik
18. Browser
cache
The simplest way to reduce requests is to make sure the
browser doesn’t need to make them. Make sure assets
are bring cached on the browser.
Concatenate
JS & CSS
Combine similar files together in one or multiple larger
files to reduce requests. May harm performance too.
Lazy load
content
Don’t make requests until necessary. Filament Group’s
AJAX Include Pattern or lazyBlock.
data: URI For small images & fonts try embedding them in your
CSS file by using the data: URI.
Conditional
loading
Use a resource loader like Modernizr.load to
conditionally include JavaScript & CSS files.
1. REDUCE REQUESTS
19. HTML & CSS
compression
Use mod_deflate to make sure text-based assets are
compressed for transfer.
Image
compression
Use a service like kraken.io to optimize images.
Also use CSS sprites as appropriate.
Try to avoid
images
When possible think about avoiding images.
Implement with CSS or Canvas. Or use SVG or
Progressive JPEGs.
Minification Use a minifying service to make sure text-based assets
are as small as possible. If using PHP use Minify.
MicroJS or,
even better,
Vanilla JS
Avoid using bulky frameworks if you’re using them for
simple tasks like selectors. Try microjs.com to find
libraries that may be smaller & more suitable.
JavaScript also blocks the rendering of the page.
2. REDUCE ASSET SIZE
20. Avoid DOM
reflows &
repaints
By using JS to modify the DOM you can cause
unnecessary reflows & repaints of your browser. They
slow down page render time as well as burn battery.
Defer
loading of
JavaScript
Use HTML5’s script defer & async attributes to delay
downloading files. Can also insert script elements into
the DOM using the onLoad event.
Lazy load
JavaScript
Comment out JavaScript that isn’t required at page load.
Uncomment & eval() when required.
Touch beats
onClick
While not directly related to page render, by making
sure your links use a Touch event rather than an onClick
event user interactions will speed up by 300ms.
Avoid SM
widgets
Try using simple links to services rather than utilizing the
JavaScript widgets. They’re performance hogs.
3. SPEED-UP PAGE RENDER
61. Base on:
WiFi-capable, Analytics
Rank, OS, Screen
Dimensions, & Cost
Suggested focus:
iPod Touch, mid-level
Android, high-end Android,
a tablet, Blackberry,
Windows Phone 7
HOW TO DECIDE WHICH TO GET
iPod Touch
Samsung Fascinate +
Google Nexus +
$438
Example:
72. Responsive Web Design +
Server Side Components
(I have no idea what becomes of the W, D, or C)
73. - Luke Wroblewski
@lukew
http://www.lukew.com/ff/entry.asp?1392
In a nutshell, RESS combines adaptive layouts
with server side component (not full page)
optimization. So a single set of page templates
define an entire Web site for all devices but key
components within that site have device-class
specific implementations that are rendered
server side.
“
”
74. http://www.lukew.com/ff/entry.asp?1509
- Luke Wroblewski
@lukew
• If you want layout adjustments across devices.
• And optimization at the component level to
increase performance or tune user experience.
• You trust server-side device detection with
sensible defaults.
“
”
82. • Requires server-side
languages.
• Server-side feature detection
so it can be spoofed.
• RESS isn’t a silver bullet.
• Data needs to be separated
from layout.
CHALLENGES FOR RESS
83. - Jon Arnes Sæterås
@jonarnes
http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/
It is not only the design of the web site and
the layout of content that needs to be adapted
or enhanced; the idea of being responsive,
adaptive and enhancing, must be implemented
in the whole value chain.
“
”
84. WEB PERF TWEEPS TO FOLLOW
@ilyagrigorik
@andydavies
@souders @patmeenan
@stoyanstefanov
@joshuabixby @yoavweiss@scottjehl
just a sampling