Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
Front-End-Performance-Checklist
🎮 The only Front-End Performance Checklist that runs faster than the others
https://github.com/thedaviddias/Front-End-Performance-Checklist
- WebPagetest - Website Performance and Optimization Test
- Dareboost: Website Speed Test and Website Analysis - 20%)
- Treo: Page Speed Monitoring
- GTmetrix | Website Speed and Performance Optimization
- PageSpeed Insights
- Web.dev
- Pingdom Website Speed Test
- Make the Web Faster | Google Developers
- Sitespeed.io - Welcome to the wonderful world of Web Performance
- Calibre
- Website Speed Test | Check Web Performance » Dotcom-Tools
- Website and Server Uptime Monitoring - Pingdom
- Uptime Robot
- SpeedCurve: Monitor front-end performance
- PWMetrics - CLI tool and lib to gather performance metrics
- Varvy - Page speed optimization
- Lighthouse - Google
- Checkbot browser extension - Checks for web performance best practices
- Yellow Lab Tools | Online test to help speeding up heavy web pages
- Speedrank - Web Performance Monitoring
- DebugBear - Monitor website performance and Lighthouse scores
- packtracker.io - Check your webpack bundle size on every pull request.
- Exthouse - Analyze the impact of a browser extension on web performance
- LogRocket - Measure front-end performance in production apps
- The Cost Of JavaScript - YouTube - cost-of-javascript-in-2018-7d8950fbb5d4))
- AddyOsmani.com - Start Performance Budgeting
- Get Started With Analyzing Runtime Performance  | Google Developers
- State of the Web | 2018_01_01
- Page Weight Doesn't Matter
- Front-End Performance Checklist 2021 [PDF, Apple Pages, MS Word
- Designing for Performance Weighing Aesthetics and Speed - By Lara Callender Hogan [eBook, Print
- Varvy - Web performance glossary
- fabkrum/web-performance-resources: Up to date collection of valuable web performance resources
- Checkbot - Web Speed Best Practices
- Progressive Tooling - A list of community-built, third-party tools that can be used to improve page performance
- HTML minifier | Minify Code
- Online HTML Compressor
- Experimenting with HTML minifier — Perfection Kills
- Ordering your styles and scripts for pagespeed
- What Is Prefetching and Why Use It
- Prefetching, preloading, prebrowsing
- What is Preload, Prefetch, and Preconnect
- cssnano: A modular minifier based on the PostCSS ecosystem. - cssnano
- CSS Minfier
- @neutrinojs/style-minify - npm
- Online CSS Compressor
- HTTP: Optimizing Application Delivery - High Performance Browser Networking (O'Reilly)
- Performance Best Practices in the HTTP/2 Era
- loadCSS by filament group
- Example of preload CSS using loadCSS
- Preloading content with rel="preload"
- Preload: What Is It Good For? — Smashing Magazine
- UnCSS Online
- PurifyCSS
- PurgeCSS
- Chrome DevTools Coverage
- Understanding Critical CSS
- Critical by Addy Osmani on GitHub
- 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
- macbre/analyze-css: CSS selectors complexity and performance analyzer
- Project Wallace
- 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
- Can I use... WOFF2
- 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
- typekit/webfontloader: Web Font Loader gives you added control when using linked fonts via @font-face.
- Font Bytes - Page Weight
- `font-display` for the Masses
- CSS font-display: The Future of Font Rendering on the Web
- Image Bytes in 2018
- Image Optimization | Web Fundamentals | Google Developers
- Essential Image Optimization - An eBook by Addy Osmani
- TinyJPG – Compress JPEG images intelligently
- Kraken.io - Online Image Optimizer
- Compressor.io - optimize and compress JPEG photos and PNG images
- Cloudinary - Image Analysis Tool
- ImageEngine - Image Webpage Loading Test
- SVGOMG - Optimize SVG vector graphics files
- Lighthouse - gen formats** (like JPEG 2000m JPEG XR or WebP) <br>
- 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
- Base64 encoding images for faster pages | Performance and seo factors
- Lighthouse
- verlok/lazyload: GitHub
- aFarkas/lazysizes: GitHub
- mfranzke/loading-attribute-polyfill: GitHub
- Lazy Loading Images and Video  | Web Fundamentals  | Google Developers
- 5 Brilliant Ways to Lazy Load Images For Faster Page Loads - Dynamic Drive Blog
- Responsive images - Learn web development | MDN
- uglify-js - npm
- Online JavaScript Compressor
- 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
- Defer loading JavaScript
- npm-check
- Greenkeeper
- You may not need jQuery
- Vanilla JavaScript for building powerful web applications
- npm
- npm trends
- ai/size-limit: Prevent JS libraries bloat. If you accidentally add a massive dependency, Size Limit will throw an error.
- webpack-bundle-analyzer - npm
- js-dependency-viewer - npm
- Size Limit: Make the Web lighter — Martian Chronicles, Evil Martians’ team blog
- Speed Up JavaScript Execution  | Tools for Web Developers  | Google Developers
- JavaScript Profiling With The Chrome Developer Tools — Smashing Magazine
- 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
- Measuring the Real-world Performance Impact of Service Workers  | Web  | Google Developers
- What Are Service Workers and How They Help Improve Performance
- How does a service worker work? - YouTube
- 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
- Page Weight
- What Does My Site Cost?
- web - Measure full page size in Chrome DevTools - Stack Overflow
- Page Speed Insight - End Performance Checklist to improve your load times.
- Compare your mobile site speed
- Test Your Mobile Website Speed and Performance - Think With Google
- 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
- Time to First Byte (TTFB)
- Global latency testing tool
- Cookie specification: RFC 6265
- Cookies
- Browser Cookie Limits
- Website Performance: Cookies Don't Taste So Good - Monitis Blog
- Google's Web Performance Best Practices #3: Minimize Request Overhead - GlobalDots Blog
- Combine external CSS
- Combine external JavaScript
- 10 Tips to Optimize CDN Performance - CDN Planet
- HTTP Caching  | Web Fundamentals  | Google Developers
- How to avoid bad requests
- Using cache-control for browser caching
- Check GZIP compression
- Check Brotli Compression
- Learn more about Brotli Compression
- Can I use... Brotli
- Angular Performance Checklist
- Optimizing Performance - React
- React image manipulation | Cloudinary
- Debugging React performance with React 16 and Chrome Devtools.
- Build Performant - React
- Vue - Useful Links|Style Guide and Performance
- 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
- 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
- Chat on Discord
- David Dias
- [Become a backer
- [Become a sponsor
- Icons8
Programming Languages
Keywords
css
4
metrics
3
performance
3
lighthouse
2
webperf
2
checklist
2
webperformance
1
sass
1
phantomas
1
performance-analyzer
1
dart-sass
1
css-source
1
css-selectors-complexity
1
inline-styles
1
inline-css
1
critical-path-styles
1
critical-path-css
1
critical-css
1
webpack-plugin
1
rollup-plugin
1
purgecss
1
postcss-plugin
1
postcss
1
optimization-tools
1
web-extensions
1
performance-analysis
1
web-development
1
resources
1
refrence
1
persian
1
performance-optimization
1
performance-metrics
1
list
1
javascript
1
html
1
front-end-tools
1
front-end-development
1
front-end
1
fonts
1
farsi-document
1
farsi
1
article
1
frontend
1
checklists
1
translation
1
russian
1
service-worker
1
pwa
1
practice
1
application-shell
1