Front-End-Performance-Checklist
🎮 The only Front-End Performance Checklist that runs faster than the others
https://github.com/thedaviddias/Front-End-Performance-Checklist
Last synced: 11 days ago
JSON representation
Author
WordPress
CSS
References
- cssnano: A modular minifier based on the PostCSS ecosystem. - cssnano
- @neutrinojs/style-minify - npm
- HTTP: Optimizing Application Delivery - High Performance Browser Networking (O'Reilly)
- Performance Best Practices in the HTTP/2 Era
- Example of preload CSS using loadCSS
- Preloading content with rel="preload"
- Preload: What Is It Good For? — Smashing Magazine
- UnCSS Online
- Understanding Critical CSS
- Inlining critical CSS for better web performance | Go Make Things
- Critical Path CSS Generator - Prioritize above the fold content :: SiteLocity
- Observe CSS Best Practices: Avoid CSS Inline Styles
- TestMyCSS | Optimize and Check CSS Performance
- CSS Stats
- Project Wallace
- CSS Minfier
- TestMyCSS | Optimize and Check CSS Performance
- Observe CSS Best Practices: Avoid CSS Inline Styles
- cssnano: A modular minifier based on the PostCSS ecosystem. - cssnano
- loadCSS by filament group
- PurifyCSS
- PurgeCSS
- Critical by Addy Osmani on GitHub
- Reduce the size of the above-the-fold content
- macbre/analyze-css: CSS selectors complexity and performance analyzer
Fonts
References
- A Book Apart, Webfont Handbook
- WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2
- Create Your Own @font-face Kits » Font Squirrel
- IcoMoon App - Icon Font, SVG, PDF & PNG Generator
- Using @font-face | CSS-Tricks
- Faster Google Fonts with Preconnect - CDN Planet
- Make Your Site Faster with Preconnect Hints | Viget
- Ultimate Guide to Browser Hints: Preload, Prefetch, and Preconnect - MachMetrics Speed Blog
- A Comprehensive Guide to Font Loading Strategies—zachleat.com
- `font-display` for the Masses
- CSS font-display: The Future of Font Rendering on the Web
- Using @font-face | CSS-Tricks
- Can I use... WOFF2
- typekit/webfontloader: Web Font Loader gives you added control when using linked fonts via @font-face.
- A Comprehensive Guide to Font Loading Strategies—zachleat.com
How to use?
Performance tools
- WebPagetest - Website Performance and Optimization Test
- Treo: Page Speed Monitoring
- GTmetrix | Website Speed and Performance Optimization
- Sitespeed.io - Welcome to the wonderful world of Web Performance
- Calibre
- Website and Server Uptime Monitoring - Pingdom
- Checkbot browser extension - Checks for web performance best practices
- Yellow Lab Tools | Online test to help speeding up heavy web pages
- DebugBear - Monitor website performance and Lighthouse scores
- packtracker.io - Check your webpack bundle size on every pull request.
- PWMetrics - CLI tool and lib to gather performance metrics
- Exthouse - Analyze the impact of a browser extension on web performance
- Gravity CI - Check your build artifacts sizes on every pull request.
- Lighthouse - Google
- Pingdom Website Speed Test
References
HTML
References
Images
References
- Essential Image Optimization - An eBook by Addy Osmani
- TinyJPG – Compress JPEG images intelligently
- Kraken.io - Online Image Optimizer
- ImageEngine - Image Webpage Loading Test
- Serve Images in Next-Gen Formats  | Tools for Web Developers  | Google Developers
- What Is the Right Image Format for Your Website? — SitePoint
- PNG8 - The Clear Winner — SitePoint
- 8-bit vs 16-bit - What Color Depth You Should Use And Why It Matters - DIY Photography
- Base64 Encoding & Performance, Part 1 and 2 by Harry Roberts
- A closer look at Base64 image performance – The Page Not Found Blog
- When to base64 encode images (and when not to) | David Calhoun
- 5 Brilliant Ways to Lazy Load Images For Faster Page Loads - Dynamic Drive Blog
- Responsive images - Learn web development | MDN
- Base64 encoding images for faster pages | Performance and seo factors
- SVGOMG - Optimize SVG vector graphics files
- A closer look at Base64 image performance – The Page Not Found Blog
- 5 Brilliant Ways to Lazy Load Images For Faster Page Loads - Dynamic Drive Blog
- verlok/lazyload: GitHub
Introduction
References
JavaScript
References
- Online JavaScript Compressor
- uglify-js - npm
- Short read: How is HTTP/2 different? Should we still minify and concatenate?
- 11 Tips to Optimize JavaScript and Improve Website Loading Speeds
- Remove Render-Blocking JavaScript
- npm-check
- Greenkeeper
- Vanilla JavaScript for building powerful web applications
- npm
- webpack-bundle-analyzer - npm
- js-dependency-viewer - npm
- Size Limit: Make the Web lighter — Martian Chronicles, Evil Martians’ team blog
- JavaScript Profiling With The Chrome Developer Tools — Smashing Magazine
- Chapter 22 - Profiling the Frontend - Blackfire
- 30 Tips To Improve Javascript Performance
- What Are Service Workers and How They Help Improve Performance
- How does a service worker work? - YouTube
- Defer loading JavaScript
- ai/size-limit: Prevent JS libraries bloat. If you accidentally add a massive dependency, Size Limit will throw an error.
- 30 Tips To Improve Javascript Performance
Performances and CMS
WordPress
- Test Your Website Speed | WordPress Hosting by @WPEngine
- 19 Tips to Speed Up WordPress Performance (Updated)
- Speed Up Your WordPress - How to Save Images Optimized for Web
- Caching Plugin for WordPress - Speed up your website with WP Rocket
- WP-Sweep | WordPress.org
- Imagify Image Optimizer | WordPress.org
- Test Your Website Speed | WordPress Hosting by @WPEngine
Performances and JS Frameworks
Angular
React
- Optimizing Performance - React
- React image manipulation | Cloudinary
- Debugging React performance with React 16 and Chrome Devtools.
- Build Performant - React
- Debugging React performance with React 16 and Chrome Devtools.
Vue
Server
References
- Can I use... Brotli
- Page Weight
- Let's Encrypt
- Why Use HTTPS? | Cloudflare
- Enabling HTTPS Without Sacrificing Your Web Performance - Moz
- How HTTPS Affects Website Performance
- HTTP versus HTTPS versus HTTP2 - The real story | Tune The Web
- HTTP vs HTTPS — Test them both yourself
- What Does My Site Cost?
- web - Measure full page size in Chrome DevTools - Stack Overflow
- Average Page Load Times for 2018 - How does yours compare? - MachMetrics Speed Blog
- What is Waiting (TTFB) in DevTools, and what to do about it
- Monitoring your servers with free tools is easy
- Global latency testing tool
- Cookie specification: RFC 6265
- Cookies
- Browser Cookie Limits
- Google's Web Performance Best Practices #3: Minimize Request Overhead - GlobalDots Blog
- 10 Tips to Optimize CDN Performance - CDN Planet
- HTTP Caching  | Web Fundamentals  | Google Developers
- Check GZIP compression
- Check Brotli Compression
- Time to First Byte (TTFB)
- Combine external CSS
- Combine external JavaScript
- How to avoid bad requests
- Using cache-control for browser caching
- Learn more about Brotli Compression
- Compare your mobile site speed
- Test Your Mobile Website Speed and Performance - Think With Google
- Can I use... Brotli
- Website Performance: Cookies Don't Taste So Good - Monitis Blog
- Average Page Load Times for 2018 - How does yours compare? - MachMetrics Speed Blog
- HTTP Caching  | Web Fundamentals  | Google Developers
- Cookie specification: RFC 6265
Sponsors
WordPress
Support
WordPress
Translations
WordPress
- fernandofawkes/Front-End-Performance-Checklist
- JohnsenZhou/Front-End-Performance-Checklist
- lex111/Front-End-Performance-Checklist
- WilliamDASILVA/Front-End-Performance-Checklist
- ParkSB/Front-End-Performance-Checklist
- dagerzuga/Front-End-Performance-Checklist
- huynhan147/Front-End-Performance-Checklist
- GameWith/Front-End-Performance-Checklist
- mbiesiad/Front-End-Performance-Checklist
- ms-fadaei/Front-End-Performance-Checklist
- marbio/Front-End-Performance-Checklist