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.
2. What I’ll Talk About
• Quick Intro About Why We
Should Care About Web Perf
• Diagnosing Perf Problems
• Easy Web Performance
Optimization Wins
• Tools to Help Test &
Automate Perf Optimizations
• Setting Up a Device Lab
3. WHY SHOULD WE CARE ABOUT
WEB PERFORMANCE?
http://flic.kr/p/4JY1Yr
5. 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
21. WEBPAGETEST FEATURES
• Test real browsers from mult. locations
• Modify connection speeds
• Video capture
• Content blocking
• Script the session
• Use with continuous integration
• Collect tests over time
• Free
22. REVIEW OF DIAGNOSTIC TOOLS
• Fast & easy? Pagespeed Insights
• Local development? Chrome Dev Tools
• Customization? WebPagetest
26. Best request is no request.
Source: Ilya Grigorik
- Ilya Grigorik, @ilyagrigorik
27. WEB PERF & SERVER-SIDE: EASY WINS
Compress
HTML & CSS
If you’re using Apache make sure to use
mod_deflate so text-based assets are compressed
for transfer.
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. Try
redbot.org to see if you’re caching.
Avoid AJAX
requests
Think critically about how you use AJAX. You may be
able to increase perceived performance by “caching”
mark-up in script tags.
28. WEB PERFORMANCE & IMAGES: EASY WINS
Try to avoid
images
When possible think about avoiding images.
Implement with CSS or Canvas. Or use SVG or
Progressive JPEGs.
Image
compression
Choose appropriate image formats and compress
within reason. Consider using CSS sprites.
Responsive
images
Use srcset to serve regular images. You can use
picture to serve art directed responsive images.
Avoid dark
matter
display: none; hides content. It doesn’t stop
content from loading. Properly set media queries.
29. WEB PERF & IMAGES: TOOLS
Grunt &
Gulp Tools
imagemin, image-resize,
spritesmith, svgmin
On the Web kraken.io, smushit.com,
spriteme.org, imigix.com
30. CDNs Consider using CDNs to serve common JS libraries to
help reduce RTT for requests.
WEB PERF & JAVASCRIPT: EASY WINS
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.
Use Touch
or FastClick
While not directly related to page render, by making
sure your links use a Touch event or FastClick rather
than an onClick event user interactions will speed up
by 300ms.
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.
31. WEB PERF & JAVASCRIPT: TOOLS
Grunt &
Gulp Tools
uglify, concat, closure-
compiler, google-cdn
On the Web microjs.com,
developer.mozilla.org,
developers.google.com
33. WEB PERF & 3rd PARTY CODE: EASY WINS
Beware the
SPOF
Be careful regarding what 3rd-party code you use on
your pages. Downtime for them can mean slow
loading pages for you. Try using spof-o-matic in the
Chrome Web Store to see how your page is affected.
Avoid SM
widgets
Try using simple links to services rather than utilizing
their JavaScript widgets. They’re performance hogs.
Removing the widgets also increases user privacy. 2-
click social widgets from Heise is a good solution.
41. CRITICAL RENDERING PATH: EASY WINS
Defer
loading of
JavaScript
Place script elements just above the body tag.
Otherwise use HTML5’s script defer & async
attributes to avoid blocking the parser. Can also insert
script elements into the DOM using the onload
event.
Inline
Critical CSS
& Defer Rest
Place critical CSS directly within your document and
load the rest of the CSS after onload with JavaScript.
Use a service like Penthouse to find critical CSS.
Same DNS
origin
Above the fold elements should be on the same
hostname. Reduces DNS look-ups. Possible to try for a
single request for all above the fold content?
42. The ultimate goal is a narrower,
shorter waterfall. Also focus on
getting a fast initial render.
46. Google Analytics Site Speed
www.slideshare.net/AndyDavies/web-page-test-beyond-the-basics
WebPagetest - BEYOND THE BASICS
47. REVIEWING TOP TIPS FOR EASY WINS
• Budget to give yourself and a client
a performance goal
• Enable cache headers
• Enable compression
• Properly format or reduce images
• Defer as much as you can
• Use a task runner to build web
performance into your workflow
48. RESS can be a scalpel
for your responsive designs.
REsponsive Design + Server Side Components
http://flic.kr/p/a4VsPv
49. RESS: AN EVOLUTION OF
RESPONSIVE DESIGN
slidesha.re/KtByzQ
it is not an “evolution” but just another tool
63. SUMMING IT ALL UP
• Open conversations using a
performance budget
• First render speed is more
important than pure resource size
• Integrate perf into your workflow
• Test, evaluate, and monitor
64. WEB PERF TWEEPS TO FOLLOW
@ilyagrigorik
@andydavies
@souders
@patmeenan
@stoyanstefanov
@bbinto
@scottjehl
just a sampling
@tameverts