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: 12 days ago
JSON representation
-
JavaScript
-
References
- npm
- Greenkeeper
- webpack-bundle-analyzer - npm
- Vanilla JavaScript for building powerful web applications
- npm-check
- Online JavaScript Compressor
- Remove Render-Blocking JavaScript
- Size Limit: Make the Web lighter — Martian Chronicles, Evil Martians’ team blog
- 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
- 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
- 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
-
-
How to use?
-
Performance tools
- DebugBear - Monitor website performance and Lighthouse scores
- Yellow Lab Tools | Online test to help speeding up heavy web pages
- packtracker.io - Check your webpack bundle size on every pull request.
- GTmetrix | Website Speed and Performance Optimization
- Checkbot browser extension - Checks for web performance best practices
- WebPagetest - Website Performance and Optimization Test
- Calibre
- Sitespeed.io - Welcome to the wonderful world of Web Performance
- Treo: Page Speed Monitoring
- Website and Server Uptime Monitoring - Pingdom
- Exthouse - Analyze the impact of a browser extension on web performance
- PWMetrics - CLI tool and lib to gather performance metrics
- Gravity CI - Check your build artifacts sizes on every pull request.
- Lighthouse - Google
- Pingdom Website Speed Test
-
References
-
-
Images
-
References
- Kraken.io - Online Image Optimizer
- Essential Image Optimization - An eBook by Addy Osmani
- TinyJPG – Compress JPEG images intelligently
- 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
-
-
Server
-
References
- Can I use... Brotli
- Cookies
- Browser Cookie Limits
- Let's Encrypt
- What Does My Site Cost?
- Page Weight
- Cookie specification: RFC 6265
- 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
- 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
- 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
-
-
Fonts
-
References
- Create Your Own @font-face Kits » Font Squirrel
- IcoMoon App - Icon Font, SVG, PDF & PNG Generator
- A Book Apart, Webfont Handbook
- WOFF 2.0 – Learn more about the next generation Web Font Format and convert TTF to WOFF2
- 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
- typekit/webfontloader: Web Font Loader gives you added control when using linked fonts via @font-face.
- Using @font-face | CSS-Tricks
- Can I use... WOFF2
-
-
Introduction
-
References
-
-
CSS
-
References
- Understanding Critical CSS
- CSS Stats
- Project Wallace
- 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
- UnCSS Online
- Preloading content with rel="preload"
- Preload: What Is It Good For? — Smashing Magazine
- 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 Minfier
- TestMyCSS | Optimize and Check CSS Performance
- Observe CSS Best Practices: Avoid CSS Inline Styles
- loadCSS by filament group
- PurgeCSS
- Critical by Addy Osmani on GitHub
- PurifyCSS
- macbre/analyze-css: CSS selectors complexity and performance analyzer
- cssnano: A modular minifier based on the PostCSS ecosystem. - cssnano
- Reduce the size of the above-the-fold content
-
-
HTML
-
References
-
-
Support
-
Author
-
WordPress
-
-
Sponsors
-
WordPress
-
-
Performances and JS Frameworks
-
React
-
Vue
-
Angular
-
-
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
-
-
Uncategorized
-
Uncategorized
-
-
Translations
-
WordPress
- JohnsenZhou/Front-End-Performance-Checklist
- fernandofawkes/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
-
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