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.
Dave Olsen, @dmolsen
West Virginia University
What I’ll Talk About
• Quick Intro About Why We
Should Care About Web Perf
• Diagnosing Perf Problems
• Easy Web Performance
• Tools to Help Test &
Automate Perf Optimizations
• Setting Up a Device Lab
WHY SHOULD WE CARE ABOUT
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
• Test real browsers from mult. locations
• Modify connection speeds
• Video capture
• Content blocking
• Script the session
• Use with continuous integration
• Collect tests over time
REVIEW OF DIAGNOSTIC TOOLS
• Fast & easy? Pagespeed Insights
• Local development? Chrome Dev Tools
• Customization? WebPagetest
easy web performance optimization wins
A budget is a guide, not a hard & fast limit.
Performance tweaks are compromises.
Best request is no request.
Source: Ilya Grigorik
- Ilya Grigorik, @ilyagrigorik
WEB PERF & SERVER-SIDE: EASY WINS
HTML & CSS
If you’re using Apache make sure to use
mod_deflate so text-based assets are compressed
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.
Think critically about how you use AJAX. You may be
able to increase perceived performance by “caching”
mark-up in script tags.
WEB PERFORMANCE & IMAGES: EASY WINS
Try to avoid
When possible think about avoiding images.
Implement with CSS or Canvas. Or use SVG or
Choose appropriate image formats and compress
within reason. Consider using CSS sprites.
Use srcset to serve regular images. You can use
picture to serve art directed responsive images.
display: none; hides content. It doesn’t stop
content from loading. Properly set media queries.
WEB PERF & IMAGES: TOOLS
On the Web kraken.io, smushit.com,
CDNs Consider using CDNs to serve common JS libraries to
help reduce RTT for requests.
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.
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 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.
uglify, concat, closure-
On the Web microjs.com,
WEB PERF & 3rd PARTY CODE: EASY WINS
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.
Try using simple links to services rather than utilizing
Removing the widgets also increases user privacy. 2-
click social widgets from Heise is a good solution.
CRITICAL RENDERING PATH: EASY WINS
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
& Defer Rest
Place critical CSS directly within your document and
Use a service like Penthouse to find critical CSS.
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?
The ultimate goal is a narrower,
shorter waterfall. Also focus on
getting a fast initial render.
TEST THE SQUISHY
default styles vs. min-width vs. max-width
Google Analytics Site Speed
WebPagetest - BEYOND THE BASICS
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
RESS can be a scalpel
for your responsive designs.
REsponsive Design + Server Side Components
RESS: AN EVOLUTION OF
it is not an “evolution” but just another tool