Web Performance Resources and Optimization Tools
Engineers should always care about performance. Users certainly care about speed and there are many studies that show a clear correlation between website performance and business metrics. Speed is a fundamental component of user experience and it affects everything from bounce rates to SEO and all the way down to conversion and revenue. How is your website doing in terms of page speed?
Google has been doing a lot lately to make the web faster. I really like Steve Souders approach and focus on FEO, or front end optimization, as it seems to be the biggest performance bottleneck for modern websites. Steve also created the HTTPArchive which crawls and collects hundreds of thousands of popular websites on the internet and provides interesting trends. This data is open source and you can even run queries on the dataset online via Google BigQuery. BigQueri.es is a great collection of some of these queries which can give great insight into the current aggregate outlook on how websites are built. Many of these come from Ilya Grigorik who also covers some really great information about network latency and optimization on his blog.
Trends show that websites are continuing to add on more imagery, stylesheets, and JavaScript to the page and performance is still a very important factor so I wanted to dedicate a post to aggregating the most important articles, slides, presentations, tools, and resources on performance analysis, benchmarking, monitoring, and optimization:
General Web Performance Presentations, Slides, and Articles
Browser Diet – How to Lose Weight in the Browser
Optimizing the Critical Rendering Path
Front-end performance for designers and developers
W3C Workshop on Web Performance
Latency: The New Web Performance Bottleneck
14 valuable tips to improve page load speed
10 Web Performance Optimization Disasters
Talking the talk of web performance
Front-end optimizations you can start doing right now
Creating a Performance Culture
Prioritizing Performance in Responsive Design
42 Monster Problems That Attack As Loads Increase
Analysis, Benchmarking, Testing and Debugging
WebPageTest – Measure your Web Page Performance
PageSpeed Insights – Measure Page Performance across multiple devices
GTmetrix – Website Speed Analysis
ByteCheck – Simple Online Page Performance Test
RedBot – tool for checking headers and cache validation
ShowSlow – open source tool that helps monitor various website performance metrics over time
httperf – HTTP performance measurement tool
boomerang – End user oriented web performance testing and beaconing
Clientside JS error reporting services
wbench – uses HTML5 performance timing API to benchmark load times for websites
Learn how to use developer tools efficiently for debugging
slowmo-js executes JavaScript in slow motion
venusjs – complete testing tool in nodejs
cdnfinder – find what CDN a website is using
Detecting redirects with the Navigation Timing API
gor – Replay traffic from production to staging and dev environments
Fiddler – free web debugging proxy for any browser, system or platform
Charles – Web Debugging Proxy Application
WebDriver API to make automation of browser scripts
loadreport.js uses PhantomJS to build a report of DOM and resource loading times for a page
Chrome Extension that checks website development against best practices
Benchmarking CANVAS performance
ApacheBench – test Web Server Performance
confess.js – PhantomJS script to analyze web pages
JavaScript Memory Profiling In Chrome DevTools
wireshark – GUI for capturing and analyzing network traces
tcpdump – prints contents of packets on a network interface
TMI – discover your image weight on the web
Networking and Caching
A Beginner’s Guide to HTTP Cache Headers
Analyzing Network Characteristics Using JavaScript And The DOM
High Performance Networking in Google Chrome
mux.js – data multiplexing library for JavaScript
logstash – open source log management
Smartphone localstorage outperforms browser cache
JavaScript caching framework for client side caching in the browser using localStorage
How does StackOverflow use Caching
HTML, DOM, and Browser Rendering
Solving rendering performance puzzles
Pinterest Paint Performance Case Study
Things that trigger repaint in WebKit
Improving page performance with html5 prefetch
5 things to do to make HTML5 perform better
Optimizing CSS and Fonts
purifycss – Remove unused CSS. Also works with single-page apps.
18 CSS Compression Tools and Techniques
Preventing performance hit from custom fonts
CSS Paint Times and Page Render Weight
Creating Living Style Guides to Improve Performance
How to micro optimize your CSS
FontLoader helps you detect when web fonts are loaded and rendered by the browser
Enter a url to see how the css rules interact with that page
CSSO (CSS Optimizer) is a CSS minimizer that also performs structural optimization of CSS files
Optimize scrolling performance with CSS will-change property
Image Optimization
Image Compression for Web Developers
Optimizing Images from Stoyan Stefanov’s Book of Speed
Glue – simple command line tool to generate CSS sprites
Python and Tornado based image resizing application server
lossypng – PNG can be a lossy format
Progressive jpegs a new best practice
Make lossless optimization of images part of your automated build process
Loading images on demand with pure css
Stitches: HTML5 sprite generator
Grunt library for using spritesmith, a spritesheet and CSS pre-processor utility
Produce responsive images with Grunt
imgix.js – toolbox for truly responsive images
Bash script to automate adaptive JPEG compression using common CLI tools
ySlow Smushit – lossless image optimization
PngOptimizer – fastest png optimization
pngquant – best png optimization
JPEGmini – online tool to compress JPEG images
SprinteCow – online sprite maker
Progressive Jpeg Demonstration
Kraken.io – Free online image optimizer
PHP Image Compression & Caching
HTTPS, SSL, SPDY and HTTP2
Current State of HTTP Compression
First few milliseconds of https
SPDY and secure Proxy support in Google Chrome
How a Man-in-the-Middle HTTPS Proxy Works
Innovating with HTTP 2.0 Server Push
Mobile Performance
Build Fast Loading Mobile Websites
CSS Sprites versus Data URIs on Mobile
5 myths about mobile performance
How to make HTML5 sites run faster on mobile
Domain Sharding is bad for mobile performance
Improve JavaScript Performance
jsperf – JavaScript performance playground
Fast Loading JavaScript by Aaron Peters
UglifyJS2 – JavaScript parser, minifier, compressor or beautifier toolkit
5 things to stop doing with jQuery
JavaScript source code visualization, static analysis, and complexity tool
asmjs – an extraordinarily optimizable, low-level subset of JavaScript
labjs – the performance script loader
defer.js – load all JavaScript asynchronously
JavaScript Performance Patterns by Stoyan Stefanov
Profile-Guided JavaScript Optimization
Finding JavaScript Bottlenecks
Content Delivery Networks
Top Base Page CDNs for Top URLs
JSdelivr – free CDN for developers and webmasters
Tests performance of various CDNs
CDNcatalog: list of well-known CDN-hosted locations for common libraries like jQuery
Server, DataBase, and Back-End Performance
Gearman framework to farm out work to other machines or processes
Upgrading Linux Kernel for TCP improvements
10 Tips for Optimizing MySQL Queries
Tips and Tricks to Optimize MySQL
WordPress Performance
WordPress fat loss diet to speed up your site
Anatomy of HTML5 WordPress Theme
The Truth about WordPress Performance
Analyze WordPress Installation for Performance
15 Easy Ways To Speed Up WordPress
Other Resources on Performance
CloudFlare’s Railgun: TCP and binary multiplexing
Identifying anomalies with Kale
assetgraph-builder – build system for single-page web applications with many optimizations
From a Logfile to a Histogram With a Few Lines of R
Grunt your way to frontend performance optimization
Zopflinator – evaluate the performance of Zopfli, a compression algorithm open sourced by Google.
Performance Tooling – a ton of resources on web performance optimization.
This list will be regularly updated so please bookmark and come back.
