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: about 1 hour ago
JSON representation
-
Server
-
References
- How to avoid bad requests
- Using cache-control for browser caching
- Compare your mobile site speed
- Test Your Mobile Website Speed and Performance - Think With Google
- Can I use... Brotli
- 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
- 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
- HTTP vs HTTPS — Test them both yourself
- Page Weight
- Can I use... Brotli
- Learn more about Brotli Compression
- Combine external JavaScript
- Time to First Byte (TTFB)
- Combine external CSS
- Average Page Load Times for 2018 - How does yours compare? - MachMetrics Speed Blog
- Website Performance: Cookies Don't Taste So Good - Monitis Blog
- 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
-
-
How to use?
-
References
- fabkrum/web-performance-resources: Up to date collection of valuable web performance resources
- AddyOsmani.com - Start Performance Budgeting
- Page Weight Doesn't Matter
- Front-End Performance Checklist 2021 [PDF, Apple Pages, MS Word
- The Cost Of JavaScript
- State of the Web | 2018_01_01
- Get Started With Analyzing Runtime Performance  | Google Developers
- Designing for Performance Weighing Aesthetics and Speed - By Lara Callender Hogan [eBook, Print
-
Performance tools
- Sitespeed.io - Welcome to the wonderful world of Web Performance
- Calibre
- packtracker.io - Check your webpack bundle size on every pull request.
- Exthouse - Analyze the impact of a browser extension on web performance
- WebPagetest - Website Performance and Optimization Test
- GTmetrix | Website Speed and Performance Optimization
- Pingdom Website Speed Test
- Treo: Page Speed Monitoring
- Website and Server Uptime Monitoring - Pingdom
- PWMetrics - CLI tool and lib to gather performance metrics
- 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
- Lighthouse - Google
- Gravity CI - Check your build artifacts sizes on every pull request.
- Dareboost: Website Speed Test and Website Analysis - 20%)
- Make the Web Faster | Google Developers
- Uptime Robot
- SpeedCurve: Monitor front-end performance
-
-
HTML
-
References
- Online HTML Compressor
- HTML minifier | Minify Code
- Experimenting with HTML minifier — Perfection Kills
- What Is Prefetching and Why Use It
- Prefetching, preloading, prebrowsing
- What is Preload, Prefetch, and Preconnect
- Ordering your styles and scripts for pagespeed
- HTML minifier | Minify Code
- HTML minifier | Minify Code
- Experimenting with HTML minifier — Perfection Kills
-
-
CSS
-
References
- 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
- cssnano: A modular minifier based on the PostCSS ecosystem. - cssnano
- @neutrinojs/style-minify - npm
- HTTP: Optimizing Application Delivery - High Performance Browser Networking (O'Reilly)
- Preload: What Is It Good For? — Smashing Magazine
- Performance Best Practices in the HTTP/2 Era
- Example of preload CSS using loadCSS
- Preloading content with rel="preload"
- 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
- Performance Best Practices in the HTTP/2 Era
- Preloading content with rel="preload"
- Chrome DevTools Coverage
-
-
Fonts
-
References
- 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.
- 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
- A Book Apart, Webfont Handbook
- 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
- Faster Google Fonts with Preconnect - CDN Planet
- Ultimate Guide to Browser Hints: Preload, Prefetch, and Preconnect - MachMetrics Speed Blog
- A Comprehensive Guide to Font Loading Strategies—zachleat.com
-
-
Images
-
References
- SVGOMG - Optimize SVG vector graphics files
- A closer look at Base64 image performance – The Page Not Found Blog
- verlok/lazyload: GitHub
- 5 Brilliant Ways to Lazy Load Images For Faster Page Loads - Dynamic Drive Blog
- 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
- 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
- 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
- PNG8 - The Clear Winner — SitePoint
- A closer look at Base64 image performance – The Page Not Found Blog
- Image Optimization | Web Fundamentals | Google Developers
- Compressor.io - optimize and compress JPEG photos and PNG images
- Cloudinary - Image Analysis Tool
- ImageEngine - Image Webpage Loading Test
- Serve Images in Next-Gen Formats  | Tools for Web Developers  | Google Developers
- aFarkas/lazysizes: GitHub
- Lazy Loading Images and Video  | Web Fundamentals  | Google Developers
- Responsive images - Learn web development | MDN
-
-
JavaScript
-
References
- ai/size-limit: Prevent JS libraries bloat. If you accidentally add a massive dependency, Size Limit will throw an error.
- 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
- 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
- Online JavaScript Compressor
- Defer loading JavaScript
- Size Limit: Make the Web lighter — Martian Chronicles, Evil Martians’ team blog
- npm trends
- Speed Up JavaScript Execution  | Tools for Web Developers  | Google Developers
- How to Record Heap Snapshots  | Tools for Web Developers  | Google Developers
- Chapter 22 - Profiling the Frontend - Blackfire
- 30 Tips To Improve Javascript Performance
- Service Workers: an Introduction  | Web Fundamentals  | Google Developers
- What Are Service Workers and How They Help Improve Performance
-
-
Performances and JS Frameworks
-
Angular
-
React
-
Vue
-
-
Performances and CMS
-
WordPress
- Test Your Website Speed | WordPress Hosting by @WPEngine
- 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
-
-
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
-
-
Support
-
Introduction
-
References
-
-
Author
-
WordPress
-
-
Uncategorized
-
Uncategorized
-
-
Sponsors
-
WordPress
-
Programming Languages
Categories
Sub Categories
Keywords
css
5
lighthouse
2
postcss
2
performance
2
web-development
2
resources
2
reference
2
lists
2
checklist
2
front-end-developer-tool
2
front-end-development
2
webperf
2
frontend
2
guidelines
2
metrics
2
optimization-tools
1
html
1
javascript
1
postcss-plugin
1
purgecss
1
rollup-plugin
1
webpack-plugin
1
critical-css
1
critical-path-css
1
optimisation
1
minification
1
cssnano
1
webperformance
1
sass
1
phantomas
1
performance-analyzer
1
dart-sass
1
css-source
1
css-selectors-complexity
1
service-worker
1
pwa
1
practice
1
application-shell
1
angular
1
web-extensions
1
performance-analysis
1
inline-styles
1
inline-css
1
critical-path-styles
1