Website Performance and the Planet | | 400 |
sustainability, caching |
Memory Leaks: The Forgotten Side of Web Performance (nol) | | 399 |
memory |
A Unified Theory of Web Performance (sli) | | 398 |
|
Exposing Mid-Resource LCP Values | | 397 |
web-vitals |
Page Visibility: If a Tree Falls in the Forest… | | 396 |
web-vitals, user-experience |
Using Diagnostic Metrics | | 395 |
metrics |
Practical Tips for Load-Testing Web Applications | | 394 |
testing, tips-and-tricks, web-apps |
The Business Case for Performance | | 393 |
economics |
Faster Websites by Using Less HTML (j9t) | | 392 |
cross-posts, html, optimization, minimalism |
Redirect Liquidation | | 391 |
optimization, redirecting |
Frontend Web Performance: The Essentials | | 390 |
fundamentals, rendering |
Web Performance, Core Web Vitals, and Vanity Metrics | | 389 |
web-vitals, metrics |
Hands On With the New Responsiveness Metrics | | 388 |
responsive-design, metrics |
Explain Like I’m Five: Web Performance Optimization (sto) | | 387 |
optimization |
Performance Implications of JavaScript Errors | | 386 |
javascript, errors |
Defer Non-Critical Resources | | 385 |
html |
Caching: Understanding the Scope | | 384 |
caching |
Test Your Product on a Crappy Laptop (eri/css) | | 383 |
testing, usability |
HTTP Compression | | 382 |
http, protocols, compression |
Have Core Web Vitals Made the Web Faster? (tun) | | 381 |
web-vitals |
Plugging Memory Leaks in Your App (sto) | | 380 |
memory |
Request for a General Theory of Web Performance | | 379 |
|
Page Weight (htt) | | 378 |
web-almanac, studies, research, metrics |
Smashing Podcast Episode 44 With Chris Ferdinandi: Is the Web Dead? (cfe+/sma) | | 377 |
podcasts, interviews, web-platform, standards, tooling, developer-experience |
7 Ways to Improve Node.js Performance at Scale (app) | | 376 |
nodejs, optimization |
Improving the Performance of Wix Websites (Case Study) (dan/sma) | | 375 |
monitoring, culture, case-studies |
How JavaScript Engines Achieve Great Performance | | 374 |
javascript, javascript-engines |
Designing Sustainable Websites (ger) | | 373 |
sustainability, software-design |
Performance (sia/htt) | | 372 |
web-almanac, studies, research, metrics, user-experience |
Why IndexedDB Is Slow and What to Use Instead | | 371 |
databases, indexeddb, javascript |
Your CSS Is an Interface (eri) | | 370 |
css |
Get Your “Head” Straight (css/btc) | | 369 |
videos, html |
Why Your Website Should Not Use Dithered Images | | 368 |
images, dithering, compression |
Using Web Workers to Boost Third-Party Script Performance (log) | | 367 |
web-workers, javascript |
Chrome DevTools: Record and Playback Your User Journeys | | 366 |
dev-tools, user-experience, browsers, google, chrome |
How to Implement Memoization in React to Improve Performance | | 365 |
how-tos, react, memoization, optimization |
Everything You Have to Know About Core Web Vitals (fox/cal) | | 364 |
web-vitals |
Best Practices on Embedding Third-Party Web Widgets | | 363 |
embed-code, best-practices |
Building an Effective Image Component (dev) | | 362 |
components, javascript |
Web Performance Metrics Cheatsheet (ire) | | 361 |
metrics, cheat-sheets |
Optimizing Resource Loading With the Fetch Priority API (add+/dev) | | 360 |
data-fetching, apis, optimization |
How I Made Google’s Data Grid Scroll 10× Faster With One Line of CSS | | 359 |
css |
New HTTP Standards for Caching on the Modern Web | | 358 |
http, protocols, caching, standards |
My Challenge to the Web Performance Community (phi) | | 357 |
|
jsPerf—Online JavaScript Performance Benchmark | | 356 |
websites, javascript |
Using Modern Image Formats: AVIF and WebP (add/sma) | | 355 |
images, avif, webp, jpeg, png, comparisons, compression |
Faster React Apps With Memoization | | 354 |
react, memoization |
ct.css—Let’s Take a Look Inside Your “<head>” (css) | | 353 |
css, debugging |
Small Bundles, Fast Pages: What to Do With Too Much JavaScript (cal) | | 352 |
javascript, bundling |
Optimizing Images on the Web (clo) | | 351 |
images, cloudflare |
Vanilla JS Is a Web Performance Decision (cfe) | | 350 |
javascript |
Blowing Up HTML Size With Responsive Images (deb) | | 349 |
html, images, responsive-design |
Designing for Long Waits and Interruptions: Mitigating Breaks in Workflow in Complex Application Design | | 348 |
user-experience, complexity |
Writing High-Performance JavaScript (cfe) | | 347 |
javascript |
What Are the Web Performance Metrics That Actually Matter? (cfe) | | 346 |
metrics |
HTTP/3: Performance Improvements (pro/sma) | | 345 |
http, protocols |
Does Shadow DOM Improve Style Performance? (nol) | | 344 |
dom, shadow-dom, rendering |
Big O, Code Efficiency Analysis | | 343 |
algorithms |
“<Lazy>” Rendering in Vue to Improve Performance | | 342 |
vuejs, client-side-rendering, optimization |
A Performance-Focused Workflow Based on Google Tools (dev) | | 341 |
web-vitals, tooling, google |
How We Reduced Next.js Page Size by 3.5× and Achieved a 98 Lighthouse Score | | 340 |
nextjs, lighthouse, google, case-studies |
CSS Architecture and Performance in Micro Frontends | | 339 |
css, architecture, micro-frontends |
Learnings From a WebPageTest Session on CSS-Tricks (chr/css) | | 338 |
|
A Beginner’s Guide to Lighthouse | | 337 |
guides, lighthouse, google, web-vitals |
How to Eliminate Render-Blocking Resources: A Deep Dive (sia) | | 336 |
how-tos, rendering |
The Performance Effects of Too Much Lazy-Loading (rvi/dev) | | 335 |
web-vitals, lazy-loading |
What Is Tree Shaking? (cfe) | | 334 |
javascript, concepts, tree-shaking |
Performance Design: The Illusion of Speed | | 333 |
user-experience |
Resource Inlining in JavaScript Frameworks (mge/dev) | | 332 |
javascript, frameworks, web-vitals |
Making the Web—Faster (rau) | | 331 |
web, developer-experience, principles |
Serving Sharp Images to High Density Screens (jaf) | | 330 |
images |
Half the Size of Images by Optimising for High Density Displays (jaf) | | 329 |
html, images |
Using AVIF to Compress Images on Your Site (dev) | | 328 |
images, avif, compression |
What Can the HTTP Archive Tell Us About Largest Contentful Paint? | | 327 |
|
Best Practices for Fonts (tun/dev) | | 326 |
fonts, best-practices |
CSS for Web Vitals (una/dev) | | 325 |
css, web-vitals |
How to Fix Cumulative Layout Shift (CLS) Issues (tun/sma) | | 324 |
how-tos, web-vitals |
Tree-Shaking: A Reference Guide (ati/sma) | | 323 |
guides, optimization, javascript, tree-shaking |
Reducing HTML Payload With Next.js (Case Study) (sma) | | 322 |
nextjs, html, case-studies |
An Introduction to Performance Budgets | | 321 |
introductions, performance-budgets, metrics |
9 Principles of Good Web Design | | 320 |
design, principles, simplicity, navigation, content, layout, mobile |
Bypassing Cookie Consent Banners in Lighthouse and WebPageTest (and) | | 319 |
consent-management, cookies, lighthouse, google, testing |
The 5-Hour CDN (fly) | | 318 |
content-delivery |
Measuring Web Performance in Mobile Safari (css) | | 317 |
testing, mobile, browsers, apple, safari |
What About Ember? (tka) | | 316 |
emberjs |
Testing Performance (kel) | | 315 |
testing |
Front-End Performance 2021: Delivery Optimizations (vit/sma) | | 314 |
checklists, link-lists |
Front-End Performance 2021: Build Optimizations (vit/sma) | | 313 |
checklists, link-lists, building |
Front-End Performance 2021: Assets Optimizations (vit/sma) | | 312 |
checklists, link-lists, compression, images |
HTML and CSS Techniques to Reduce Your JavaScript | | 311 |
html, css, javascript |
Page Weight (htt) | | 310 |
web-almanac, studies, research, metrics |
Time to Say Goodbye to Google Fonts: Cache Performance | | 309 |
google, fonts, caching |
Best Practices for Inclusive Textual Websites | | 308 |
security, accessibility, best-practices |
Warp: Improved JS Performance in Firefox 83 (jan) | | 307 |
firefox, mozilla, browsers, javascript, spidermonkey, javascript-engines |
The What, Why, and How of Using a Skeleton Loading Screen (tre) | | 306 |
react |
Core Web Vitals: A Guide to Google’s Web Performance Metrics (cra) | | 305 |
guides, google, web-vitals |
Signed Exchanges (SXGs) (twi/dev) | | 304 |
authentication, signed-exchanges, web-packaging |
How to Create High-Performance CSS Animations (rac/dev) | | 303 |
how-tos, css, animations |
Reducing the Site Speed Impact of Third-Party Tags | | 302 |
embed-code |
AVIF Has Landed (jaf) | | 301 |
images, avif, quality, jpeg, webp, svg, png, comparisons |
Loading Third-Party JavaScript (add/dev) | | 300 |
javascript |
Performance Is an Issue of Equity (clo) | | 299 |
accessibility |
Methods of Improving and Optimizing Performance in React Apps (sma) | | 298 |
react, optimization |
We Need More Inclusive Web Performance Metrics (sco) | | 297 |
metrics, dei |
5 Projects to Help You Master Modern CSS (cra) | | 296 |
css, print, forms |
On Fixed Elements and Backgrounds (hui) | | 295 |
css, backgrounds, positioning, scrolling |
Speed Up Google Fonts (css) | | 294 |
google, fonts |
The Need for Speed, 23 Years Later | | 293 |
user-experience, history |
Maybe You Don’t Need That SPA | | 292 |
single-page-apps, javascript, react |
Real-World Effectiveness of Brotli (css) | | 291 |
compression, brotli, comparisons |
The Cost of JavaScript Frameworks (tka) | | 290 |
javascript, frameworks, metrics, jquery, vuejs, angular, react |
Start Render: The Web Performance Metric That Heralds the End of the Blank Page | | 289 |
metrics, web-vitals |
Performance Tips: Minifying HTML, CSS, and JS | | 288 |
videos, html, css, javascript, minification, tips-and-tricks |
Setting Height and Width on Images Is Important Again (tun/sma) | | 287 |
html, images, web-vitals |
Improving Perceived Performance With the CSS “font-display” Property (the) | | 286 |
css, fonts |
Page Builders Might Not Be a Good Idea (cit) | | 285 |
maintainability, consistency, quality |
Google Tag Manager vs. Page Speed: The Impact and How to Improve | | 284 |
google, tag-management, analytics, optimization |
Should You Self-Host Google Fonts? (tun) | | 283 |
fonts, google, hosting |
Improving Site Performance With Webpack Tree Shaking | | 282 |
optimization, webpack, tree-shaking |
Performance Budgets, Pragmatically (css) | | 281 |
performance-budgets |
Putting Devs Before Users: How Frameworks Destroyed Web Performance (uxd) | | 280 |
frameworks, developer-experience |
An HTML Optimizer’s Config for html-minifier (j9t) | | 279 |
html, html-minifier, minification, optimization, configuration, minimalism |
Speed Up Your Website With WebP (sma) | | 278 |
optimization, webp, images |
A Guide to Optimizing Images for Mobile (sma) | | 277 |
guides, images, optimization, mobile |
On Writing Better Markup (j9t) | | 276 |
html, quality, maintainability, terminology |
Faster Image Loading With Embedded Image Previews (sma) | | 275 |
images, lazy-loading, techniques, javascript |
Optional HTML: Everything You Need to Know (j9t) | | 274 |
html, minimalism |
Handling Unused CSS in Sass to Improve Performance (sma) | | 273 |
css, sass, optimization |
I Used the Web for a Day on a 50 MB Budget (sma) | | 272 |
mobile |
Browsers Are Pretty Good at Loading Pages, It Turns Out | | 271 |
javascript, rendering, browsers |
The Simplest Way to Load CSS Asynchronously (sco) | | 270 |
css, asynchronicity |
Shifting the Performance Burden (sco) | | 269 |
|
Optimizing Google Fonts Performance (sma) | | 268 |
google, fonts, optimization |
The Problem With Web Development Checklists, or: The Frontend Checklist, Revised (j9t) | | 267 |
checklists, html, accessibility, seo, social-media |
Responsible JavaScript (mal/ali) | | 266 |
javascript, tree-shaking, code-splitting, embed-code, transpiling, tooling |
Image Optimization in WordPress (sma) | | 265 |
wordpress, images, optimization |
Self-Host Your Static Assets (css) | | 264 |
hosting, caching |
Characteristics of a Strong Performance Culture (tka) | | 263 |
culture, principles |
Understanding Image Compression: Tooling and Context (j9t) | | 262 |
images, compression, tooling |
The Scoville Scale of Web Font Loading Opinions (zac/btc) | | 261 |
videos, fonts |
Browser Resource Hints: “preload”, “prefetch”, and “preconnect” (deb) | | 260 |
hints, html, http-headers, http |
Optimizing Performance With Resource Hints (dre/sma) | | 259 |
hints, optimization |
Improving Perceived Performance With the Link “rel=preconnect” HTTP Header (and) | | 258 |
http, http-headers, hints |
“Cache-Control” for Civilians (css) | | 257 |
caching, http |
How to Avoid DOM Blocking in JavaScript (cra) | | 256 |
how-tos, dom, javascript |
Rendering on the Web (add+/dev) | | 255 |
server-side-rendering, client-side-rendering, rendering, hydration, seo |
HTML and Performance: Leave Out Optional Tags and Quotes (j9t) | | 254 |
html |
The Ethics of Web Performance (tka) | | 253 |
ethics, accessibility |
Static vs. Server Rendering | | 252 |
rendering, comparisons, react |
Speed Up Next-Page Navigations With Prefetching (add) | | 251 |
hints, html, http-headers, http, webpack |
Keeping Sass Simple and Speedy on Eleventy (phi) | | 250 |
sass, eleventy |
On Visions for Performance, or: Performance Optimization Is a Process (j9t) | | 249 |
optimization, outlooks, processes |
Performance Rule #1: Do What You Need to Do—But Not More (j9t) | | 248 |
simplicity |
Reduce JavaScript Payloads With Code Splitting (mal/dev) | | 247 |
javascript, code-splitting |
Performance Budgets 101 (dev) | | 246 |
introductions, performance-budgets, metrics |
Improve Animated GIF Performance With HTML5 Video (sma) | | 245 |
images, gif, multimedia |
A Netflix Web Performance Case Study (add/dev) | | 244 |
case-studies |
A Guide to Caching in WordPress | | 243 |
guides, wordpress, caching, plugins |
How to Configure Lighthouse for Balanced Quality Websites (j9t) | | 242 |
how-tos, google, lighthouse, configuration, quality |
Chrome’s Noscript Intervention (tka) | | 241 |
chrome, google, browsers, javascript, mobile |
20 Tips for Optimizing CSS Performance (cra) | | 240 |
css, optimization, tips-and-tricks |
Variable Fonts: What They Are, and How to Use Them | | 239 |
how-tos, fonts, variable-fonts |
Browser Painting and Considerations for Web Performance (css) | | 238 |
browsers, browser-engines, painting, rendering |
Slow Websites (geo/css) | | 237 |
performance-budgets |
The Cost of JavaScript in 2018 (add) | | 236 |
javascript, code-splitting, lazy-loading, performance-budgets, bundling |
HTTP/2: The Difference Between HTTP/1.1, Benefits, and How to Use It | | 235 |
protocols, http, comparisons |
Delivering WordPress in 7 KB (css) | | 234 |
wordpress, themes |
HTTP/2: Background, Performance Benefits, and Implementations | | 233 |
protocols, http |
Improving Performance Perception: On-Demand Image Resizing | | 232 |
optimization, images, resizing, html |
The Four Big Ways Jetpack Helps With Image Performance (css) | | 231 |
wordpress, plugins, images |
Here’s the Thing About “Unused CSS” Tools (chr/css) | | 230 |
css, quality, tooling |
7 Performance Tips for Jank-Free JavaScript Animations | | 229 |
javascript, animations, tips-and-tricks |
Making Your Website Faster and Safer With Cloudflare | | 228 |
caching, security, cloudflare |
How Do You Know Your Website Is a Success? (sma) | | 227 |
product-management, strategies, metrics, user-experience, content, microcontent, navigation, testing |
Page Transitions for Everyone (css) | | 226 |
design, user-experience, animations, transitions, caching |
Introducing Last Painted Hero (spe) | | 225 |
introductions |
How Fast Is AMP Really? (tka) | | 224 |
amp, google, metrics |
Three Techniques for Performant Custom Font Usage (oll/css) | | 223 |
fonts, techniques, flash-of-x |
AMP News (chr/css) | | 222 |
amp, google, community |
Why Fast Matters (css/btc) | | 221 |
videos, economics |
How to Optimize CSS and JS for Faster Sites | | 220 |
how-tos, css, javascript, minification, optimization |
Finding Dead CSS (css) | | 219 |
css, maintenance |
Performance of CSS Selectors Is Still Irrelevant (j9t) | | 218 |
css, selectors |
Progressive Web Apps: A Crash Course | | 217 |
crash-courses, web-apps, progressive-web-apps, lighthouse, google |
Optimizing CSS: Tweaking Animation Performance With DevTools | | 216 |
css, animations, optimization, dev-tools, browsers, firefox, mozilla |
On Big Picture Thinking in Web Development (j9t) | | 215 |
user-experience, maintainability, consistency, accessibility, outlooks |
How to Optimize SQL Queries for Faster Sites | | 214 |
how-tos, sql, mysql, databases, caching, optimization |
Understanding the “Vary” Header (sma) | | 213 |
http, http-headers, caching |
The Front-End Checklist (the) | | 212 |
websites, checklists, html, css, javascript, images, accessibility, seo |
The State of the Web (fox) | | 211 |
web |
Using the Paint Timing API (mal/css) | | 210 |
apis, painting, rendering, javascript |
(Now More Than Ever) You Might Not Need jQuery (oll/css) | | 209 |
jquery, javascript, ajax, comparisons, examples |
Three Reasons Why You Should Care About Google Lighthouse (fox/cal) | | 208 |
lighthouse, google |
What Is the Future of Front End Web Development? (chr/css) | | 207 |
outlooks, user-experience, javascript, documentation, native, web, urls, css, preprocessors, html, building, tooling |
What We Talk About When We Talk About Web Performance (btc) | | 206 |
videos |
Let the Content Delivery Network Optimize Your Images (jon/sma) | | 205 |
content-delivery, images, optimization |
Optimizing Web Fonts for Performance: The State of the Art | | 204 |
fonts, optimization |
Brotli and Static Compression (mal/css) | | 203 |
compression, brotli, gzip, comparisons |
A Comprehensive Guide to HTTP/2 Server Push (mal/sma) | | 202 |
guides, http, protocols, servers |
Guetzli, Google’s New JPEG Encoder (tel) | | 201 |
images, jpeg, compression, tooling |
AMP and the Web (tka) | | 200 |
amp, google, web-platform, web |
Using HTTP/2 Responsibly: Adapting for Users (mal/ali) | | 199 |
http, protocols, support, servers |
Considering How We Use HTTP/2 (mal/ali) | | 198 |
optimization, http, protocols |
The Web, Worldwide (tka) | | 197 |
websites, metrics |
Performant Parallaxing (aer/dev) | | 196 |
scrolling, css, effects, parallax, positioning |
Performance: Shame, Hope, Nuance, and Interesting Problems (bka) | | 195 |
|
The Joy of Optimizing (una/btc) | | 194 |
videos, images, optimization |
Web Packaging Format | | 193 |
web-packaging |
Next Generation Server Compression With Brotli (mal/sma) | | 192 |
compression, brotli, gzip, comparisons |
When Is the Right Time to Think About Web Performance? (fon/css) | | 191 |
processes |
High Performance SVGs (sar/css) | | 190 |
svg, images, tooling, optimization |
The Performance Benefits of “rel=noopener” (jaf) | | 189 |
html, links, security |
Ways You Need to Tell the Browser How to Optimize (chr/css) | | 188 |
browsers, css, optimization |
Accessibility and Performance (mar) | | 187 |
accessibility, javascript, optimization |
Service Workers and PWAs: It’s About Reliable Performance, Not “Offline” (sli) | | 186 |
web-apps, progressive-web-apps, web-workers, javascript |
6 SEO Trends to Watch for in 2016 | | 185 |
trends, seo, content, marketing, mobile, social-media |
How to Optimize Mobile Performance (sma) | | 184 |
how-tos, mobile, optimization, performance-budgets, content-management, caching, testing |
CPP: A Standardized Alternative to AMP (tka) | | 183 |
amp, google, policies |
Critical Metric: Critical Resources | | 182 |
metrics, css, javascript |
Lazy-Loading Images: How Not to Really Annoy Your Users | | 181 |
images, lazy-loading, jquery |
10 Web Predictions for 2016 (cra) | | 180 |
web, outlooks, security, site-generators, browsers, css, mobile, webassembly, seo |
Why You Should Choose Your Own HTTPS (hel) | | 179 |
http, content-delivery, tooling, cloudflare |
The Problem With Progressive Enhancement | | 178 |
progressive-enhancement, javascript, resilience |
The Cost of Frameworks Recap (chr/css) | | 177 |
frameworks |
Loading Web Fonts With the Web Font Loader (fon/css) | | 176 |
fonts, flash-of-x, user-experience |
JavaScript Frameworks and Mobile Performance | | 175 |
javascript, frameworks, mobile |
Design + Performance (zem/btc) | | 174 |
videos, design, user-experience |
HTTP/2: The Pros, the Cons, and What You Need to Know | | 173 |
protocols, http |
Performance Budgets in Action (spe) | | 172 |
performance-budgets |
Using Web Fonts the Best Way (in 2015) (hel) | | 171 |
fonts |
AMP and Incentives (tka) | | 170 |
amp, google, web |
Introducing RAIL: A User-Centric Model for Performance (pau/sma) | | 169 |
introductions, metrics, user-experience |
Factors Affecting Website Performance | | 168 |
network, browsers, memory, servers, images, multimedia |
Delivering Responsibly (sco/btc) | | 167 |
videos, usability, accessibility, sustainability |
10 Common Mistakes Web Developers Make | | 166 |
mistakes, html, css, javascript, career |
5 Easy Performance Tweaks for Node.js Express (cra) | | 165 |
nodejs, express, optimization, compression |
Strategies for Cache-Busting CSS (chr/css) | | 164 |
css, caching, tooling, strategies |
Understanding Critical CSS (sma) | | 163 |
css |
Mastering Image Optimization in WordPress | | 162 |
wordpress, images, optimization |
React + Performance = ? (aer) | | 161 |
react, metrics |
Performance Tools (fon/css) | | 160 |
tooling, content-delivery, testing, dev-tools, images, css, javascript, optimization, link-lists |
Choosing Performance (tka) | | 159 |
facebook+meta |
Advanced Performance Audits With DevTools (pau) | | 158 |
auditing, browsers, dev-tools |
Tour of a Performant and Responsive CSS Only Site (css) | | 157 |
css, parallax, effects, case-studies |
Planning for Performance (sco/ali) | | 156 |
|
Performance Budget Metrics (tka) | | 155 |
performance-budgets, metrics |
The Perception of Performance (lou) | | 154 |
user-experience |
Image Optimization Services (gri/clo) | | 153 |
images, optimization, link-lists |
JS Parse and Execution Time (tka) | | 152 |
javascript, parsing, metrics |
How a New HTML Element Will Make the Web Faster (ars) | | 151 |
html, images, responsive-design |