Tech is political: The people under attack in Palestine 🇵🇸, Iran 🇮🇷, and Lebanon 🇱🇧 are people like us. They’re our brothers and sisters, too. Read up on their history, scrutinize what you’re told, and demand that they be respected and included. Hide

Frontend Dogma

“performance” News Archive (2)

Entry (Sources) and Additional TopicsDate#
Load Websites Faster With Code Splitting690
code-splitting, react
CDNs: Speed Up Performance by Reducing Latency (aus)689
content-delivery
Practical Guide to Not Blocking the Event Loop688
guides, javascript, event-loop, events
Reducing the Cost of String Serialization in Node.js Core687
nodejs, strings
Frontend Web Performance Checklist (jac)686
checklists
Exploring the Potential of Web Workers for Multithreading on the Web (sma)685
web-workers, multithreading, javascript
Intro to Runtime Performance in the Chrome DevTools Performance Panel (ann/thi)684
videos, introductions, dev-tools, browsers, google, chrome
DevTools: A Better Way to Visualize Your JavaScript683
dev-tools, visualization, browsers, lighthouse, google, chrome, microsoft, edge
Serving Less Data to Users With the “prefers-reduced-data” Media Query (sea)682
css, media-queries, sustainability
Speeding Up the JavaScript Ecosystem—Draft-js Emoji Plugin (mar)681
javascript, plugins
Costly CSS Properties and How to Optimize Them680
css, optimization
Understanding CSS Preload and Other Resource Hints (log)679
css, hints, preloading
Load Balancing (sam)678
load-balancing, visualization, architecture
The Performance Golden Rule Revisited (tka)677
metrics
The Real Difference Between “useMemo” and “Memo” in React676
react, hooks, examples
Slow Start and Congestion Control (Browser Networking)675
protocols, tcp
7 Tricks to Take the Performance of Your Website to the Moon674
minification, tree-shaking, tips-and-tricks
10 Ways to Hide Elements in CSS (cra)673
hiding, css, accessibility
Flutter Performance Optimization Techniques and Best Practices672
flutter, optimization, best-practices
Defaulting on Single Page Applications (SPA) (zac)671
single-page-apps, javascript
Senior Engineering Strategies for Advanced React and TypeScript (tec)670
strategies, react, typescript, architecture, testing, accessibility, security, maintenance
The Ultimate Guide to Image Optimisation (fox/cal)669
guides, images, compression, optimization
Speeding Up the JavaScript Ecosystem—npm Scripts (mar)668
javascript, bundling, npm
2023 Web Framework Performance Report667
frameworks, astro, sveltekit, gatsby, remix, wordpress, nextjs, nuxt, comparisons
Client-Side JavaScript and React Criticism: What Comes Next? (mol)666
javascript, react, accessibility, resilience, progressive-enhancement
Optimising Large Contentful Paint (css/btc)665
videos, web-vitals, optimization
The JavaScript Site Generator Review, 2023 (zac)664
site-generators, comparisons, astro, eleventy, gatsby, nextjs, nuxt, remix, sveltekit
An Approach to Lazy Loading Custom Elements (css)663
web-components, lazy-loading
This Is Why Performance Matters (bel)662
javascript, user-experience
Caching at DEV661
case-studies, caching
What’s New in Lighthouse 10660
release-notes, google, lighthouse
Speeding Up the JavaScript Ecosystem—ESLint (mar)659
javascript, eslint, linting
The Gotcha With Animating Custom Properties (bra)658
css, animations, custom-properties
Speed for Who? (bel)657
frameworks, developer-experience, user-experience
Monitoring Node.js Performance (ano)656
nodejs, monitoring, tooling, nsolid
Optimal Images in HTML (ste/bui)655
html, images, backgrounds, optimization
Your Web Performance Is Too Reactive; It’s Time to Do More Than Put Out Fires (fox/cal)654
The Modern Way of Serving Images (kur)653
images, html
How to Review a Web Site (uxm)652
how-tos, user-experience, seo
Optimize Time to First Byte (mal)651
optimization
Why We Switched CDNs: How Google’s Core Web Vitals Led Us to Cloudflare Pages650
content-delivery, web-vitals, cloudflare
The Truth About CSS Selector Performance (pat)649
css, selectors
Optimizing the Image Element LCP (sma)648
web-vitals, images
Speeding Up the JavaScript Ecosystem—Module Resolution (mar)647
javascript, modules, esm, commonjs
Why Not “document.write()”? (css)646
javascript
Our Top Core Web Vitals Recommendations for 2023 (phi+)645
web-vitals, best-practices
Why Web Performance Still Matters in 2023 (sia)644
Priority Hints and Optimizing LCP (kev)643
web-vitals, optimization, hints
Performance Culture Through the Looking-Glass (per)642
videos, culture
The RUM Archive and Benford’s Law (per)641
HTTP/3 Prioritization Demystified (pro/per)640
http, protocols
Signals: The Nitty-Gritty (web/per)639
javascript, signals
Bad Performance Is Bad Accessibility (bru)638
accessibility
The Performance Inequality Gap, 2023 (sli)637
javascript, metrics
Beating Latency on Scalemates.com (tim/per)636
optimization
Using Inline JavaScript Modules to Prevent CSS Blockage (sto/per)635
javascript, css
An HTML-First Mental Model (noa/per)634
html, dom
Get Off the Main Thread With an Inline Web Worker: An Example (sto/per)633
javascript, web-workers, examples
LCP(FE) (tim/per)632
web-vitals
Web Performance and Compression (per)631
compression
Optimize Interaction to Next Paint (mal+)630
optimization, web-vitals
Adding Complementary Performance Data to Your Site (mat)629
apis
Accessibility: The Land That “Time to Interactive” Forgot (tin/per)628
videos, accessibility
Reduce Image Sizes by Removing Metadata (per)627
images, metadata, optimization
Fast Is Good, Instant Is Better (tun/per)626
caching
Prerender Pages in Chrome for Instant Page Navigations (tun)625
browsers, google, chrome
7 Website Performance Metrics to Track for Better UX (cal)624
user-experience, metrics
Developing Faster JavaScript Apps: The Ultimate Guide to Web Workers (cra)623
guides, web-apps, web-workers, javascript
Speeding Up the JavaScript Ecosystem—One Library at a Time (mar)622
javascript, libraries
Minification and Cache Directives for the Most Popular Websites of the Internet (dvk)621
minification, tooling, lightning-css, html-minifier, caching, metrics
Lazy Loading Images in HTML (sim)620
html, lazy-loading
A Guide to Image Optimization on Jamstack Sites (daw/sma)619
guides, images, compression, optimization, tech-stacks, jamstack
Improving React Interaction Times by 4×618
react, optimization
Early Learnings for Early Hints at Shopify (sia/per)617
videos, case-studies, shopify, hints
Client-Side Routing Without the JavaScript (rya/thi)616
javascript, frameworks
6 Steps to Improve HTML Images for Users and Developers (aus)615
html, images, responsive-design
HTML and CSS Features, Tips for a 10× Faster Page Loading Speed614
html, css, tips-and-tricks
Is Turbopack Really 10× Faster Than Vite? (eva)613
tooling, bundling, turbopack, vite
CSS Runtime Performance612
slides, css
A Beginner’s Guide to Chrome Tracing (nol)611
guides, browsers, google, chrome, tracing
Conditionally Adaptive CSS—Browser Behavior That Might Improve Your Performance (pep)610
css, responsive-design
Performance (rvi/htt)609
web-almanac, studies, research, metrics, web-vitals
How We Improved React Loading Times by 70% With Next.js608
react, nextjs, case-studies
Which Serverless Edge Platform Has the Fastest Git Deployments? (den)607
serverless, edge-computing, git, deploying
CDN (htt)606
web-almanac, studies, research, metrics, content-delivery, tooling
Speeding Up Async Snippets (css)605
javascript, asynchronicity
How to Animate CSS Box Shadows and Optimize Performance604
how-tos, css, animations, shadows
Sustainable Web Development Strategies Within an Organization (mic/sma)603
sustainability, optimization
SVG Sprites: Old-School, Modern, Unknown, and Forgotten (pep)602
svg, images, sprites
How to Optimize Resource Loading With the “fetchpriority” Attribute (mat/deb)601
how-tos, html, optimization
Optimize Long Tasks (mal)600
javascript, optimization
GIFs Without the .gif: The Most Performant Image and Video Options Right Now (oll/css)599
multimedia, images, gif, html
Performance Budgets: The Easiest Way to a Faster Site (fox/cal)598
performance-budgets
Five Data-Loading Patterns to Boost Web Performance (sma)597
Page Weight (jam/htt)596
web-almanac, studies, research, metrics
Element Timing: One True Metric to Rule Them All? (spe)595
time, apis, metrics
Will Serving Real HTML Content Make a Website Faster? Let’s Experiment!594
studies, research, html
How to Substantially Slow Down Your Node.js Server593
how-tos, nodejs
Total Blocking Time: A Short and Sweet Guide for Happier Users (ben/cal)592
javascript
Your Next.js Bundle Will Thank You591
nextjs, bundling
How to Improve Largest Contentful Paint for Faster Load Times (fox/cal)590
how-tos, web-vitals, optimization
Critical CSS? Not So Fast! (css)589
css, critical-path
Disabled JavaScript Turns Off Native Lazy Loading (ste)588
javascript, html, lazy-loading
Why Your Website Should Be Under 14 kB in Size587
protocols
Measure What You Impact, Not What You Influence (css)586
metrics, optimization
Optimize Data Fetching585
data-fetching
Can Browsers Optimize the Loading of Third-Party Resources? (add)584
browsers, embed-code
Tip: Use “fetchpriority=high” to Load Your LCP Hero Image Sooner (add)583
html, web-vitals
(Re-)Introducing Gatsby, a Reactive Site Generator582
gatsby, react, reactivity, site-generators, introductions
How and Why We Removed jQuery From GOV.UK581
jquery, maintainability
Core Web Vitals Tools to Boost Your Web Performance Scores (sma)580
web-vitals, tooling
Making a Website Under 1 kB579
minimalism, html
Which Generator Builds Markdown the Fastest? (zac)578
site-generators, markdown, comparisons
500 ms to 1.7 ms in React: A Journey and a Checklist577
react
Fix Web Performance for the Long-Term (sia)576
testing, processes
Priority Hints—What Your Browser Doesn’t Know (Yet)575
hints
Powerful Image Optimization Tools (lou/sma)574
link-lists, images, compression, tooling
Can SVG Symbols Affect Web Performance?573
svg, images
Avoiding “<img>” Layout Shifts: “aspect-ratio” vs. “width” and “height” Attributes (jaf)572
web-vitals, comparisons, html, attributes, aspect-ratio, css
Frontend Web Performance: The Essentials571
fundamentals, javascript
Faster WordPress Rendering With 3 Lines of Configuration (sto)570
wordpress, css, http, configuration
A CLS Punishment for Progressive Enhancement? (bel/pic)569
web-vitals, progressive-enhancement
Image Guard (j9t)568
packages, npm, images, compression, jpeg, png, gif, webp, avif
Everything You Need to Know About Web Performance (in 5 Minutes)567
web-vitals, compression
Style Scoping Versus Shadow DOM: Which Is Fastest? (nol)566
selectors, scope, dom, shadow-dom, comparisons, metrics
How to Remove 99% of JavaScript From Main Thread (wea)565
videos, how-tos, javascript
What We’ve Learned From One Year of Real User Monitoring Data on GOV.UK564
monitoring, metrics
Measuring the Performance of Typefaces for Users II (sma)563
typography, fonts
Measuring the Performance of Typefaces for Users (sma)562
typography, fonts
Don’t Sink Your Website With Third Parties (sma)561
embed-code, dependencies
Two Lines of CSS That Boosts 7× Rendering Performance560
css, rendering
Conditionally Loading CSS or Any Resource Using Media Queries (ami)559
html, media-queries
Rethinking Server-Timing as a Critical Monitoring Tool (sma)558
time, http, metrics, monitoring
Don’t Fight the Browser Preload Scanner (mal)557
browsers, html, parsing
How to Use Google CrUX to Analyze and Compare the Performance of JS Frameworks (sma)556
how-tos, google, metrics, javascript, frameworks
A Management Maturity Model for Performance (sli)555
Performance Game Changer: Browser Back/Forward Cache (tun/sma)554
browsers, caching, web-vitals
Get to Know Your Browser’s Performance Profiler553
browsers, tooling, profiling
Understanding the Performance Impact of Anti-Flicker Snippets (spe)552
web-vitals
Is Measuring Speed a Useful Metric for Design Systems? (amy+)551
videos, metrics, design-systems
Faster Initialization of Instances With New Class Features (joy)550
browsers, javascript, javascript-engines, v8
How to Improve Core Web Vitals (8 Ways)549
how-tos, web-vitals
The Ultimate Guide to Optimizing JavaScript for Quick Page Loads (ste/bui)548
guides, javascript, optimization
Core Web Vitals: Finding Common Ground Between SEOs and Developers (moz)547
web-vitals, seo, metrics
How to Optimize Your LCP (with Visuals) (ste)546
how-tos, web-vitals, optimization
Optimising Largest Contentful Paint (css)545
web-vitals
Picture Perfect Images With the Modern “<img>” Element (add)544
images, html, web-vitals
Speed Needs Design, or: You Can’t Delight Users You’ve Annoyed543
design, user-experience
The Web Is for Everyone: Our Vision for the Evolution of the Web (moz)542
web, outlooks, privacy, security, accessibility, user-experience
Optimising Core Web Vitals on SPAs (sim)541
web-vitals, single-page-apps, optimization
Improving Your User Experience to Reduce Bounce Rates (uxm)540
user-experience, usability, seo
Performance Tests on Common JavaScript Array Methods (hac)539
testing, javascript, arrays
Optimizing SVG Patterns to Their Smallest Size (css)538
svg, images
The Impact That High Quality Mark-Up Can Have on Accessibility, Performance, and Discoverability537
videos, html, accessibility
Making the World’s Fastest Website, and Other Mistakes536
mistakes
The Weirdly Obscure Art of Streamed HTML535
html, streaming
Ten Years of Page Bloat: What Have We Learned? (spe)534
web-vitals, user-experience
7 Ways to Achieve a Faster Core Web Vitals Score (hac)533
web-vitals
Performance Signals for Customizing Website UX (tun/sma)532
user-experience, web-vitals, customization
A New Speed Milestone for Chrome531
browsers, google, chrome
Should Frontend Devs Care About Performance?530
Top 2021 CSS Frameworks Report: The CSS File Sizes (cit)529
studies, research, frameworks, css
How to Make MPAs That Are as Fast as SPAs (cfe)528
how-tos, multi-page-apps, single-page-apps
Improving a CDN’s Cache Hit Ratio (erw)527
content-delivery, caching
Minimizing Google Fonts by Only Loading It for Certain Characters (ami)526
typography, google, fonts, minimalism
Core Web Vitals: What Next? (moz)525
web-vitals, seo
The Difference Between Brotli and Gzip Compression Algorithms to Speed Up Your Site524
compression, brotli, gzip
This Is Why Your Node.js Application Is Slow523
nodejs
Reducing the Web’s Carbon Footprint: Optimizing Social Media Embeds (mic/sma)522
social-media, embed-code, sustainability
Improving JavaScript Bundle Performance With Code-Splitting (cod/sma)521
javascript, bundling, code-splitting, optimization
Speed Matters, but It Isn’t Everything520
user-experience, metrics
Caching Header Best Practices (sim)519
caching, http, http-headers, best-practices
Big Images, Blazingly Fast518
images, quality
Optimize Your PNGs With Oxipng and pre-commit (ada)517
images, png, compression, tooling
How to Avoid Layout Shifts Caused by Web Fonts (sim)516
how-tos, user-experience, fonts
Website Performance and the Planet515
sustainability, caching
Memory Leaks: The Forgotten Side of Web Performance (nol)514
memory
Improving WordPress Performance: An Open Letter (erw)513
open-letters, wordpress, css, javascript
A Unified Theory of Web Performance (sli/per)512
Exposing Mid-Resource LCP Values (per)511
web-vitals
Page Visibility: If a Tree Falls in the Forest… (pau/per)510
web-vitals, user-experience
Using Diagnostic Metrics (per)509
metrics
Practical Tips for Load-Testing Web Applications (per)508
testing, tips-and-tricks, web-apps
The Business Case for Performance (per)507
economics
Faster Websites by Using Less HTML (j9t)506
cross-posts, html, optimization, minimalism
Redirect Liquidation (tim/per)505
optimization, redirecting
Frontend Web Performance: The Essentials504
fundamentals, rendering
Web Performance, Core Web Vitals, and Vanity Metrics (per)503
web-vitals, metrics
Hands On With the New Responsiveness Metrics (per)502
responsive-design, metrics
Explain Like I’m Five: Web Performance Optimization (sto/per)501
optimization
Performance Implications of JavaScript Errors (per)500
javascript, errors
Defer Non-Critical Resources (per)499
html
Caching: Understanding the Scope (per)498
caching
Test Your Product on a Crappy Laptop (eri/css)497
testing, usability
HTTP Compression (per)496
http, protocols, compression
Have Core Web Vitals Made the Web Faster? (tun/per)495
web-vitals
Plugging Memory Leaks in Your App (sto/per)494
memory
Request for a General Theory of Web Performance (per)493
Page Weight (htt)492
web-almanac, studies, research, metrics
Smashing Podcast Episode 44 With Chris Ferdinandi: Is the Web Dead? (cfe+/sma)491
podcasts, interviews, web-platform, standards, tooling, developer-experience
7 Ways to Improve Node.js Performance at Scale (app)490
nodejs, optimization
How JavaScript Engines Achieve Great Performance489
javascript, javascript-engines
Improving the Performance of Wix Websites (Case Study) (sma)488
monitoring, culture, case-studies
Designing Sustainable Websites (ger)487
sustainability, software-design
Performance (sia/htt)486
web-almanac, studies, research, metrics, user-experience
Get Your “Head” Straight (css/btc)485
videos, html
Why IndexedDB Is Slow and What to Use Instead484
databases, indexeddb, javascript
Your CSS Is an Interface (eri)483
css
Using Web Workers to Boost Third-Party Script Performance (log)482
web-workers, javascript
Why Your Website Should Not Use Dithered Images481
images, dithering, compression
Chrome DevTools: Record and Playback Your User Journeys480
dev-tools, user-experience, browsers, google, chrome
Everything You Have to Know About Core Web Vitals (fox/cal)479
web-vitals
How to Implement Memoization in React to Improve Performance478
how-tos, react, memoization, optimization
Best Practices on Embedding Third-Party Web Widgets477
embed-code, best-practices
Web Performance Metrics Cheatsheet (ire)476
metrics, cheat-sheets
Building an Effective Image Component475
components, javascript
New HTTP Standards for Caching on the Modern Web474
http, protocols, caching, standards
How I Made Google’s Data Grid Scroll 10× Faster With One Line of CSS473
css
Optimizing Resource Loading With the Fetch Priority API (add+)472
data-fetching, apis, optimization
My Challenge to the Web Performance Community (phi)471
jsPerf—Online JavaScript Performance Benchmark470
websites, javascript
Using Modern Image Formats: AVIF and WebP (add/sma)469
images, avif, webp, jpeg, png, comparisons, compression
Faster React Apps With Memoization468
react, memoization
ct.css—Let’s Take a Look Inside Your “<head>” (css)467
css, debugging
Small Bundles, Fast Pages: What to Do With Too Much JavaScript (cal)466
javascript, bundling
Optimizing Images on the Web465
images, cloudflare
Vanilla JS Is a Web Performance Decision (cfe)464
javascript
Blowing Up HTML Size With Responsive Images (deb)463
html, images, responsive-design
Designing for Long Waits and Interruptions: Mitigating Breaks in Workflow in Complex Application Design (nng)462
user-experience, complexity
Writing High-Performance JavaScript (cfe)461
javascript
What Are the Web Performance Metrics That Actually Matter? (cfe)460
metrics
Lighthouse Scores Do Not Affect Google Search/SEO (erw)459
lighthouse, google, search, seo
HTTP/3: Performance Improvements (pro/sma)458
http, protocols
Does Shadow DOM Improve Style Performance? (nol)457
dom, shadow-dom, rendering
Big O, Code Efficiency Analysis456
algorithms
“<Lazy>” Rendering in Vue to Improve Performance455
vuejs, client-side-rendering, optimization
A Performance-Focused Workflow Based on Google Tools454
web-vitals, tooling, google
How We Reduced Next.js Page Size by 3.5× and Achieved a 98 Lighthouse Score453
nextjs, lighthouse, google, case-studies
CSS Architecture and Performance in Micro Frontends452
css, architecture, micro-frontends
Learnings From a WebPageTest Session on CSS-Tricks (chr/css)451
webpagetest
A Beginner’s Guide to Lighthouse450
guides, lighthouse, google, web-vitals
How to Eliminate Render-Blocking Resources: A Deep Dive (sia)449
how-tos, rendering
What Is Tree Shaking? (cfe)448
javascript, concepts, tree-shaking
The Performance Effects of Too Much Lazy-Loading (rvi+)447
web-vitals, lazy-loading
Performance Design: The Illusion of Speed446
user-experience
Resource Inlining in JavaScript Frameworks (mge)445
javascript, frameworks, web-vitals
Making the Web—Faster444
web, developer-experience, principles
Half the Size of Images by Optimising for High Density Displays (jaf)443
html, images
Serving Sharp Images to High Density Screens (jaf)442
images
What Can the HTTP Archive Tell Us About Largest Contentful Paint? (pau)441
Using AVIF to Compress Images on Your Site440
images, avif, compression
Best Practices for Fonts (tun)439
fonts, best-practices
How to Fix Cumulative Layout Shift (CLS) Issues (tun/sma)438
how-tos, web-vitals
CSS for Web Vitals (una)437
css, web-vitals
Elasticsearch Boolean Query Performance (ast)436
tooling, search
Tree-Shaking: A Reference Guide (ati/sma)435
guides, optimization, javascript, tree-shaking
Reducing HTML Payload With Next.js (Case Study) (sma)434
nextjs, html, case-studies
An Introduction to Performance Budgets433
introductions, performance-budgets, metrics
The Lazy-Loading Property Pattern in JavaScript (nza)432
javascript, software-design-patterns, lazy-loading
9 Principles of Good Web Design431
design, principles, simplicity, navigation, content, layout, mobile
Bypassing Cookie Consent Banners in Lighthouse and WebPageTest (and)430
consent-management, cookies, lighthouse, google, webpagetest, testing
The 5-Hour CDN (fly)429
content-delivery
Measuring Web Performance in Mobile Safari (css)428
testing, mobile, browsers, apple, safari
What About Ember? (tka)427
emberjs
Front-End Performance 2021: Assets Optimizations (vit/sma)426
checklists, link-lists, compression, images
Front-End Performance 2021: Build Optimizations (vit/sma)425
checklists, link-lists, building
Front-End Performance 2021: Delivery Optimizations (vit/sma)424
checklists, link-lists
Testing Performance (kel)423
testing
HTML and CSS Techniques to Reduce Your JavaScript (per)422
html, css, javascript
Continuous Performance Analysis With Lighthouse CI and GitHub Actions (css)421
lighthouse, google, github-actions
Optimizing Image Depth (mey/css)420
images, quality, optimization
Page Weight (htt)419
web-almanac, studies, research, metrics
Time to Say Goodbye to Google Fonts: Cache Performance418
google, fonts, caching
Ruthlessly Eliminating Layout Shift on netlify.com (zac)417
netlify, web-vitals, optimization
Best Practices for Inclusive Textual Websites416
security, accessibility, best-practices
Measuring Core Web Vitals With Sentry (fon/css)415
web-vitals, tooling
Warp: Improved JS Performance in Firefox 83 (jan/moz)414
firefox, mozilla, browsers, javascript, spidermonkey, javascript-engines
The What, Why, and How of Using a Skeleton Loading Screen (tre)413
placeholders, react
Core Web Vitals: A Guide to Google’s Web Performance Metrics (cra)412
guides, google, web-vitals
Signed Exchanges (SXGs) (twi)411
authentication, signed-exchanges, web-packaging
How to Create High-Performance CSS Animations (rac)410
how-tos, css, animations
Reducing the Site Speed Impact of Third-Party Tags409
embed-code
Enforcing Performance Budgets With Webpack (css)408
performance-budgets, webpack
AVIF Has Landed (jaf)407
images, avif, quality, jpeg, webp, svg, png, comparisons
Loading Third-Party JavaScript (add)406
javascript
Performance Is an Issue of Equity (clo)405
accessibility
Lazy Loading Images in Svelte (css)404
images, lazy-loading, svelte
Methods of Improving and Optimizing Performance in React Apps (sma)403
react, optimization
We Need More Inclusive Web Performance Metrics (sco)402
metrics, dei
How I Used Brotli to Get Even Smaller CSS and JavaScript Files at CDN Scale (css)401
compression, brotli
5 Projects to Help You Master Modern CSS (cra)400
css, print, forms
Core Web Vitals (chr/css)399
google, web-vitals, metrics
On Fixed Elements and Backgrounds (hui)398
css, backgrounds, positioning, scrolling
Speed Up Google Fonts (css)397
google, fonts
The Need for Speed, 23 Years Later (nng)396
user-experience, history
Maybe You Don’t Need That SPA395
single-page-apps, javascript, react, marko
prerender.js (chr/css)394
libraries
Introducing Web Vitals: Essential Metrics for a Healthy Site393
introductions, web-vitals, metrics, google
Real-World Effectiveness of Brotli (css)392
compression, brotli, comparisons
The Cost of JavaScript Frameworks (tka)391
javascript, frameworks, metrics, jquery, vuejs, angular, react
Start Render: The Web Performance Metric That Heralds the End of the Blank Page390
metrics, web-vitals
Performance Tips: Minifying HTML, CSS, and JS389
videos, html, css, javascript, minification, tips-and-tricks
Setting Height and Width on Images Is Important Again (tun/sma)388
html, images, web-vitals
Improving Perceived Performance With the CSS “font-display” Property (the)387
css, fonts
Encrypting DNS Query Bad for Performance? (erw)386
dns, http, encryption, security
Page Builders Might Not Be a Good Idea (cit)385
maintainability, consistency, quality
Do This to Improve Image Loading on Your Website (fon/css)384
images, html
Google Tag Manager vs. Page Speed: The Impact and How to Improve383
google, tag-management, analytics, optimization
The Web in 2020: Extensibility and Interoperability (una/css)382
web-platform, extensibility, interoperability, houdini, variable-fonts, custom-properties, logical-properties, web-components, media-queries
Should You Self-Host Google Fonts? (tun)381
fonts, google, self-hosting
Improving Site Performance With Webpack Tree Shaking380
optimization, webpack, tree-shaking
Performance Budgets, Pragmatically (css)379
performance-budgets
Putting Devs Before Users: How Frameworks Destroyed Web Performance378
frameworks, developer-experience
An HTML Optimizer’s Config for HTML Minifier (j9t)377
html, html-minifier, minification, optimization, configuration, minimalism
How Do You Remove Unused CSS From a Site? (chr/css)376
css, tooling
Stop Using Ridiculously Low DNS TTLs (jed)375
dns, content-delivery, load-balancing
Speed Up Your Website With WebP (sma)374
optimization, webp, images
A Guide to Optimizing Images for Mobile (sma)373
guides, images, optimization, mobile
On Writing Better Markup (j9t)372
html, quality, maintainability, terminology
Workflow Considerations for Using an Image Management Service (chr/css)371
images, tooling, content-delivery
Recipes for Performance Testing Single Page Applications in Webpagetest (pha/css)370
testing, single-page-apps, tooling, webpagetest
Some HTML Is “Optional” (chr/css)369
html, standards
Faster Image Loading With Embedded Image Previews (sma)368
images, lazy-loading, techniques, javascript
Other Ways to SPAs (chr/css)367
single-page-apps, tooling
Lazy Load Embedded YouTube Videos (chr/css)366
youtube, lazy-loading, embed-code
Optional HTML: Everything You Need to Know (j9t)365
html, minimalism
Accessibility and Web Performance Are Not Features, They’re the Baseline (fon/css)364
accessibility, amp, google, user-experience
Handling Unused CSS in Sass to Improve Performance (sma)363
css, sass, optimization
What CMS to Use for Optimale TTFB (and Site Speed?) (erw)362
content-management, metrics, wp-engine, automattic
I Used the Web for a Day on a 50 MB Budget (sma)361
mobile
How Google Pagespeed Works: Improve Your Score and Search Engine Ranking (ben/css)360
google, tooling, lighthouse, seo
Browsers Are Pretty Good at Loading Pages, It Turns Out359
javascript, rendering, browsers
The Simplest Way to Load CSS Asynchronously (sco)358
css, asynchronicity
Shifting the Performance Burden (sco)357
Optimizing Google Fonts Performance (sma)356
google, fonts, optimization
How to Increase Your Page Size by 1,500% With Webpack and Vue (bur/css)355
webpack, vuejs
The Problem With Web Development Checklists, or: The Frontend Checklist, Revised (j9t)354
checklists, html, accessibility, seo, social-media
Responsible JavaScript (mal/ali)353
javascript, tree-shaking, code-splitting, embed-code, transpiling, tooling
Image Optimization in WordPress (sma)352
wordpress, images, optimization
Self-Host Your Static Assets (css)351
self-hosting, caching
Characteristics of a Strong Performance Culture (tka)350
culture, principles
Understanding Image Compression: Tooling and Context (j9t)349
images, compression, tooling
The Scoville Scale of Web Font Loading Opinions (zac/btc)348
videos, fonts
Browser Resource Hints: “preload”, “prefetch”, and “preconnect” (mat/deb)347
hints, html, http-headers, http, preloading
Optimizing Performance With Resource Hints (dre/sma)346
hints, optimization
The Serif Tax (chr/css)345
fonts, ttf
Improving Perceived Performance With the Link “rel=preconnect” HTTP Header (and)344
http, http-headers, hints
“Cache-Control” for Civilians (css)343
caching, http
How to Avoid DOM Blocking in JavaScript (cra)342
how-tos, dom, javascript
Rendering on the Web (add+)341
server-side-rendering, client-side-rendering, rendering, hydration, seo
8 Reasons Why You’re Doing SEO Wrong (erw)340
seo
HTML and Performance: Leave Out Optional Tags and Quotes (j9t)339
html
The Ethics of Web Performance (tka)338
ethics, accessibility
The Elements of UI Engineering (dan)337
user-experience, consistency, navigation, prioritization, accessibility, internationalization, resilience
Static vs. Server Rendering336
rendering, comparisons, react
Speed Up Next-Page Navigations With Prefetching (add)335
hints, html, http-headers, http, webpack
Keeping Sass Simple and Speedy on Eleventy (phi)334
sass, eleventy
On Visions for Performance, or: Performance Optimization Is a Process (j9t)333
optimization, outlooks, processes
Tips to Help You Write Faster MySQL Queries332
mysql, databases, tips-and-tricks
Front-End Developers Have to Manage the Loading Experience (chr/css)331
user-experience
Performance Rule #1: Do What You Need to Do—But Not More (j9t)330
simplicity
PageSpeed Insights, Now Powered by Lighthouse (che+)329
tooling, google, lighthouse
Improve Animated GIF Performance With HTML5 Video (sma)328
images, gif, multimedia
Performance Budgets 101327
introductions, performance-budgets, metrics
A Netflix Web Performance Case Study (add)326
netflix, case-studies
Reduce JavaScript Payloads With Code Splitting (mal)325
javascript, code-splitting
How to Configure Lighthouse for Balanced Quality Websites (j9t)324
how-tos, google, lighthouse, configuration, quality
A Guide to Caching in WordPress323
guides, wordpress, caching, plugins
A Minimal JavaScript Setup (css)322
javascript, conventions, naming, scope, maintainability, examples
Chrome’s Noscript Intervention (tka)321
chrome, google, browsers, javascript, mobile
20 Tips for Optimizing CSS Performance (cra)320
css, optimization, tips-and-tricks
Variable Fonts: What They Are, and How to Use Them319
how-tos, fonts, variable-fonts
Browser Painting and Considerations for Web Performance (css)318
browsers, browser-engines, painting, rendering
Slow Websites (geo/css)317
performance-budgets
The Cost of JavaScript in 2018 (add)316
javascript, code-splitting, lazy-loading, performance-budgets, bundling
HTTP/2: The Difference Between HTTP/1.1, Benefits, and How to Use It315
protocols, http, comparisons
Delivering WordPress in 7 KB (css)314
wordpress, themes
HTTP/2: Background, Performance Benefits, and Implementations313
protocols, http
Improving Performance Perception: On-Demand Image Resizing (swa)312
optimization, images, resizing, html
Tips for Writing Better Performing PHP Code311
php, tips-and-tricks
How I Dropped 250 KB of Dead CSS Weight With PurgeCSS (sar)310
css, purgecss
The Four Big Ways Jetpack Helps With Image Performance (css)309
wordpress, plugins, images
Here’s the Thing About “Unused CSS” Tools (chr/css)308
css, quality, tooling
7 Performance Tips for Jank-Free JavaScript Animations307
javascript, animations, tips-and-tricks
Making Your Website Faster and Safer With Cloudflare306
caching, security, cloudflare
How Do You Know Your Website Is a Success? (sma)305
product-management, strategies, metrics, user-experience, content, microcontent, navigation, testing
Page Transitions for Everyone (css)304
design, user-experience, animations, transitions, caching
Introducing Last Painted Hero (spe)303
introductions
How Fast Is AMP Really? (tka)302
amp, google, metrics
Three Techniques for Performant Custom Font Usage (oll/css)301
fonts, techniques, flash-of-x
AMP News (chr/css)300
amp, google, community
Website Performance—Does Your Hosting Plan Matter?299
hosting
Why Fast Matters (css/btc)298
videos, economics
Finding Dead CSS (css)297
css, maintenance
How to Optimize CSS and JS for Faster Sites296
how-tos, css, javascript, minification, optimization
SYN Packet Handling in the Wild295
tcp, protocols, network
Performance of CSS Selectors Is Still Irrelevant (j9t)294
css, selectors
Progressive Web Apps: A Crash Course293
crash-courses, web-apps, progressive-web-apps, lighthouse, google
Optimizing CSS: Tweaking Animation Performance With DevTools292
css, animations, optimization, dev-tools, browsers, firefox, mozilla
On Big Picture Thinking in Web Development (j9t)291
user-experience, maintainability, consistency, accessibility, outlooks
How to Optimize SQL Queries for Faster Sites290
how-tos, sql, mysql, databases, caching, optimization
Understanding the “Vary” Header (sma)289
http, http-headers, caching
The Front-End Checklist (the)288
websites, checklists, html, css, javascript, images, accessibility, seo
The State of the Web (fox)287
web
Using the Paint Timing API (mal/css)286
apis, time, painting, rendering, javascript
(Now More Than Ever) You Might Not Need jQuery (oll/css)285
jquery, javascript, ajax, comparisons, examples
Three Reasons Why You Should Care About Google Lighthouse (fox/cal)284
lighthouse, google
What Is the Future of Front End Web Development? (chr/css)283
outlooks, user-experience, javascript, documentation, native, web, urls, css, preprocessors, html, building, tooling
What We Talk About When We Talk About Web Performance (btc)282
videos
Let the Content Delivery Network Optimize Your Images (jon/sma)281
content-delivery, images, optimization
Optimizing Web Fonts for Performance: The State of the Art280
fonts, optimization
Brotli and Static Compression (mal/css)279
compression, brotli, gzip, comparisons
What Are Performance Budgets and Why You Should Use One278
performance-budgets
A Comprehensive Guide to HTTP/2 Server Push (mal/sma)277
guides, http, protocols, servers
Guetzli, Google’s New JPEG Encoder (tel)276
images, jpeg, compression, tooling
AMP and the Web (tka)275
amp, google, web-platform, web
Considering How We Use HTTP/2 (mal/ali)274
optimization, http, protocols
Using HTTP/2 Responsibly: Adapting for Users (mal/ali)273
http, protocols, support, servers
11 Tips to Optimize JavaScript and Improve Website Loading and Rendering Speeds272
javascript, optimization, minification, compression, caching
The Web, Worldwide (tka)271
websites, metrics
A Checklist for Website Reviews (hcr)270
checklists, browsers, seo, accessibility, security
Performant Parallaxing (aer)269
scrolling, css, effects, parallax, positioning
Performance: Shame, Hope, Nuance, and Interesting Problems (bka)268
The Joy of Optimizing (una/btc)267
videos, images, optimization
Web Packaging Format266
web-packaging
Next Generation Server Compression With Brotli (mal/sma)265
compression, brotli, gzip, comparisons
When Is the Right Time to Think About Web Performance? (fon/css)264
processes
High Performance SVGs (sar/css)263
svg, images, tooling, optimization
The Performance Benefits of “rel=noopener” (jaf)262
html, links, security
Ways You Need to Tell the Browser How to Optimize (chr/css)261
browsers, css, optimization
Accessibility and Performance (mar)260
accessibility, javascript, optimization
Service Workers and PWAs: It’s About Reliable Performance, Not “Offline” (sli)259
web-apps, progressive-web-apps, web-workers, javascript, reliability
6 SEO Trends to Watch for in 2016258
trends, seo, content, marketing, mobile, social-media
How to Optimize Mobile Performance (sma)257
how-tos, mobile, optimization, performance-budgets, content-management, caching, testing
CPP: A Standardized Alternative to AMP (tka)256
amp, google, policies
Critical Metric: Critical Resources255
metrics, css, javascript
Lazy-Loading Images: How Not to Really Annoy Your Users254
images, lazy-loading, jquery
Why You Should Choose Your Own HTTPS (hel)253
http, content-delivery, tooling, cloudflare
10 Web Predictions for 2016 (cra)252
web, outlooks, security, site-generators, browsers, css, mobile, webassembly, seo
The Problem With Progressive Enhancement251
progressive-enhancement, javascript, resilience
Critical Web Fonts (zac)250
fonts, css, flash-of-x, critical-path, metrics
The Cost of Frameworks Recap (chr/css)249
frameworks
JavaScript Frameworks and Mobile Performance248
javascript, frameworks, mobile
Loading Web Fonts With the Web Font Loader (fon/css)247
fonts, flash-of-x, user-experience
Design + Performance (zem/btc)246
videos, design, user-experience
HTTP/2: The Pros, the Cons, and What You Need to Know245
protocols, http
Performance Budgets in Action (spe)244
performance-budgets
AMP and Incentives (tka)243
amp, google, web
Using Web Fonts the Best Way (in 2015) (hel)242
fonts
Introducing RAIL: A User-Centric Model for Performance (pau/sma)241
introductions, metrics, user-experience
Factors Affecting Website Performance240
network, browsers, memory, servers, images, multimedia
Preloading Images in Parallel With Promises (kit)239
javascript, promises, images, preloading
Delivering Responsibly (sco/btc)238
videos, usability, accessibility, sustainability
10 Common Mistakes Web Developers Make237
mistakes, html, css, javascript, career
5 Easy Performance Tweaks for Node.js Express (cra)236
nodejs, express, optimization, compression
Strategies for Cache-Busting CSS (chr/css)235
css, caching, tooling, strategies
Understanding Critical CSS (sma)234
css, critical-path
Mastering Image Optimization in WordPress233
wordpress, images, optimization
React + Performance = ? (aer)232
react, metrics
Page Bloat Update: The Average Web Page Is More Than 2 MB in Size (tam)231
metrics, comparisons
Performance Tools (fon/css)230
tooling, content-delivery, testing, dev-tools, images, css, javascript, optimization, link-lists
Choosing Performance (tka)229
facebook+meta
Advanced Performance Audits With DevTools (pau)228
auditing, browsers, dev-tools
Tour of a Performant and Responsive CSS Only Site (css)227
css, parallax, effects, case-studies
Planning for Performance (sco/ali)226
Performance Budget Metrics (tka)225
performance-budgets, metrics
Progress Indicators Make a Slow System Less Insufferable (nng)224
progress-indicators, user-experience, design
The Perception of Performance (lou)223
user-experience
Image Optimization Services (gri/clo)222
images, optimization, link-lists
JS Parse and Execution Time (tka)221
javascript, parsing, metrics
How a New HTML Element Will Make the Web Faster (ars)220
html, images, responsive-design
What I’d Tell My Younger Self About Learning Development as a Web Designer219
learning, programming, javascript, databases, servers, preprocessors, version-control, security, career
Minimising Font Downloads (jaf)218
fonts, css, optimization, support, browsers
Faster YouTube Embeds With JavaScript217
embed-code, youtube, javascript
Introduction to the Resource Timing API216
introductions, time, apis, javascript
Authoring Critical Above-the-Fold CSS (css)215
css, sass, asynchronicity
Optimizing WordPress Performance With P3214
wordpress, optimization, plugins
Pixels Are Expensive (aer)213
rendering, painting
Speed Up Your WordPress Site212
wordpress, tooling
How to Speed Up WordPress (sma)211
how-tos, wordpress
Cache Invalidation Strategies With Varnish Cache (per/sma)210
caching, tooling
WordPress Performance Improvements That Can Go Wrong (sma)209
wordpress, plugins
Grunt and Gulp Tasks for Performance Optimization208
yeoman, grunt, gulp, tooling, optimization
Controlling Heavy Weight Websites207
user-experience, case-studies
Nine Things to Expect From HTTP/2 (mno)206
http, protocols, network
Web Performance Tricks—Beyond the Basics (swa)205
tips-and-tricks, html, css, optimization, link-lists
Packaging on the Web (jen+/tag)204
web-packaging
The Complete Guide to Reducing Page Weight (cra)203
guides, compression, caching, content-delivery, minification
Responsive HTML5 Apps: Write Once, Run Anywhere? Where Is Anywhere? (wir)202
html, web-apps, responsive-design, multimedia
Avoiding the 300 ms Click Delay, Accessibly (tka)201
touch, events, accessibility
Flexbox Layout Isn’t Slow (pau)200
css, flexbox, layout
Performance Matters (ali)199
w3c
SEO Strategies for Designers198
seo, strategies, urls, metadata
Sustainable Web Design (ali)197
sustainability
Webpage Performance (geo)196
compression, images, minification, caching, content-delivery
Image Compression for Web Developers195
images, compression, link-lists
WordPress Fragment Caching Revisited (css)194
wordpress, caching, php
Domain Sharding Revisited193
domains, http, protocols
Progressive Enhancement Is Faster (jaf/sma)192
progressive-enhancement
Images Slowing Down Your Site? Try This One Weird Trick! (aer)191
images, javascript