Data, Maps, Usability, and Performance

Web Performance Resources and Optimization Tools

Last updated on July 29, 2015 in Development

WPO webperf FEO optimization

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

Breaking 1s Mobile Barrier

Building faster websites

Optimizing the Critical Rendering Path

Front-end performance for designers and developers

W3C Workshop on Web Performance

Article on Web Performance

Web Performance Rules

List of Performance Tools

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

Web Performance 2.0

Front-end optimizations you can start doing right now

Creating a Performance Culture

Moving beyond window.onload()

Prioritizing Performance in Responsive Design

42 Monster Problems That Attack As Loads Increase

Web Performance Cheat Sheet

Analysis, Benchmarking, Testing and Debugging

WebPageTest – Measure your Web Page Performance

PageSpeed Insights – Measure Page Performance across multiple devices

GTmetrix – Website Speed Analysis

Pingdom Website Speed Test

ByteCheck – Simple Online Page Performance Test

Page Analyzer

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

Sitespeed.io – analyze and optimize your website speed and performance based on performance best practices

IE Dev Tools

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

Using Web Debugging Proxies

Fiddler – free web debugging proxy for any browser, system or platform

Charles – Web Debugging Proxy Application

WebDriver API to make automation of browser scripts

Slowy – tool that simulates custom connection’s conditions and limits the network traffic to custom ports or interface

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

IE Test Drive

PHP webdriver for Selenium

ySlow for PhantomJS

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

Mininet – network emulator which creates a network of virtual hosts, switches, controllers, and links

logstash – open source log management

Client-Side Storage Options

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

How bad is DOM interaction?

DOM Lint

Solving rendering performance puzzles

Blink’s Rendering Pipeline

Pinterest Paint Performance Case Study

Prerendering

Avoiding unnecessary paints

Scrolling and performance

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

Writing Better CSS

CSS and the Critical Path

Print CSS still sucks

Preventing performance hit from custom fonts

CSS Paint Times and Page Render Weight

Creating Living Style Guides to Improve Performance

CSS redundancy checker

Grunt tool for csscss

How to micro optimize your CSS

Debug your CSS problems

Inline CSS fonts

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

The CSS and GPU CheatSheet

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

Comprehensive Guide to WebP

Glue – simple command line tool to generate CSS sprites

Python and Tornado based image resizing application server

Compress PNG

lossypng – PNG can be a lossy format

Progressive jpegs a new best practice

Optimizing Image Bytes

Make lossless optimization of images part of your automated build process

When to base64 encode images

Loading images on demand with pure css

Stitches: HTML5 sprite generator

Grunt library for using spritesmith, a spritesheet and CSS pre-processor utility

Diagonal image sprites

Produce responsive images with Grunt

imgix.js – toolbox for truly responsive images

The Media Fragments Module

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

SSL everywhere for HTTP2

SPDY and secure Proxy support in Google Chrome

SPDY Whitepaper

How a Man-in-the-Middle HTTPS Proxy Works

Innovating with HTTP 2.0 Server Push

5 easy tips to accelerate SSL

Mobile Performance

Build Fast Loading Mobile Websites

Why Mobile Web Apps are Slow

CSS Sprites versus Data URIs on Mobile

5 myths about mobile performance

Making a 60fps mobile app

How to make HTML5 sites run faster on mobile

Domain Sharding is bad for mobile performance

Improve JavaScript Performance

All about script loading

jsperf – JavaScript performance playground

Fast Loading JavaScript by Aaron Peters

JavaScript Performance

JS Minifier

UglifyJS2 – JavaScript parser, minifier, compressor or beautifier toolkit

JavaScript function tracing

Fallback to local jQuery

5 things to stop doing with jQuery

JavaScript source code visualization, static analysis, and complexity tool

Future of JavaScript

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

Javascript Benchmarking

Profile-Guided JavaScript Optimization

Finding JavaScript Bottlenecks

Content Delivery Networks

Top Base Page CDNs for Top URLs

JSdelivr – free CDN for developers and webmasters

CDN for JS libraries

Tests performance of various CDNs

CDNcatalog: list of well-known CDN-hosted locations for common libraries like jQuery

Server, DataBase, and Back-End Performance

Ripping out Apache for Nginx

Gearman framework to farm out work to other machines or processes

Upgrading Linux Kernel for TCP improvements

10 Tips for Optimizing MySQL Queries

Top 20+ MySQL Best Practices

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

ModPagespeed Alternatives

assetgraph-builder – build system for single-page web applications with many optimizations

From a Logfile to a Histogram With a Few Lines of R

Understanding CPU Steal Time

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.

Tags: ,

Facebook Twitter Hacker News Reddit More...