An abbreviated performance checklist with helpful resources

Foundation and Design

• Set clear expectations for performance
• Measure performance throughout design and development
• Test under sub-optimal conditions
• Test with actual devices
• Only include content that is necessary for the audience/message
• Allow opt-in experiences
• Utilize lazy loading and progressive enhancement
• Remove unnecessary dependencies or files, like libraries that are overkill
• Perceived performance can be just as important as actual performance

Let's Get Technical!

The following tools are pretty grunt heavy, but similar analogs exist

• Minify HTML (Grunt HTMLmin)
• Minify CSS (Grunt CSSMin) (Grunt Sass style)
• Minify Javascript (Grunt Uglify)
• Concatenate javascript (Grunt Concat)
• Optimize the delivery of traditional images (Smush It App) (Grunt Imagemin)
• Sprite images, consider icon fonts and/or inline as SVG (Article and Grunt)
• Prioritize above the fold, critical content and CSS (Grunt Penthouse)
• GZIP traffic (Google Guidelines) (H5BP Server Configs)
• Utilize proper caching (Google Guidelines)
• Load webfonts asynchronously (Webfont Loader)

Performance Measuring Tools

• Web Page Test
• Google Page Speed Insights

Go forth, be performant!

There are many more resources out there; the web is a beatuful mosiac. Find more performance inspiration here:

• Set a Performance Budget
• Performance Tooling Today
• Performance as Design
• CSS Wizardry Front-end performance for web designers and front-end developers