--- title: Web Performance & Optimisation | daily.dev description: A practical guide to web performance covering Core Web Vitals (LCP, CLS, INP), the Critical Rendering Path, and a 5-step optimisation formula. The formula... canonical: https://daily.dev/posts/web-performance-optimisation-i331jarhz twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Web Performance & Optimisation | daily.dev og:description: A practical guide to web performance covering Core Web Vitals (LCP, CLS, INP), the Critical Rendering Path, and a 5-step optimisation formula. The formula... og:url: https://daily.dev/posts/web-performance-optimisation-i331jarhz og:image: https://api.daily.dev/og/posts/i331jarhZ.png og:image:alt: Web Performance & Optimisation og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Web Performance & Optimisation **[Medium](https://daily.dev/sources/medium_js)** · 8 min read · 2 upvotes · 0 comments ## Summary A practical guide to web performance covering Core Web Vitals (LCP, CLS, INP), the Critical Rendering Path, and a 5-step optimisation formula. The formula prioritises diagnosing with Lighthouse and RUM tools, then server-side wins like HTTP caching, compression, and CDNs, followed by static asset optimisation for images, CSS, and fonts, JavaScript bundle optimisation via code splitting and tree shaking, and finally React-specific techniques like React.memo, useMemo, and useCallback for reducing unnecessary re-renders. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What is the difference between the defer and async attributes on a script tag? Defer downloads the script in parallel with HTML parsing but only executes it after parsing completes, making it safe and ordered for scripts that depend on the DOM. Async also downloads in parallel but executes as soon as it's ready, which can interrupt HTML parsing; it suits independent scripts like analytics. _Developers tuning page load speed can find more script-loading breakdowns like this on daily.dev._ ### What is the difference between preload and prefetch resource hints? Preload fetches something critical for the current page, such as a hero image or font, before the browser would normally discover it, ensuring it's ready when needed. Prefetch instead fetches a resource the user will likely need on the next page, using idle browser time so it doesn't compete with current page resources. _Anyone optimizing asset loading strategies can track techniques like these through daily.dev._ ### How much smaller can gzip or Brotli compression make CSS and JavaScript files? CSS and JavaScript files can be up to 75% smaller when compressed with gzip or Brotli before leaving the server. This compression is a high-impact, server-side change that requires no application code changes and pairs well with HTTP caching and versioned filenames for cache-busting. _Teams chasing faster load times keep practical compression stats like this handy via daily.dev._ ## Similar posts on daily.dev - [Improve Website UX with Chrome DevTools and Core Web Vitals.](https://daily.dev/posts/improve-website-ux-with-chrome-devtools-and-core-web-vitals--brpkpxkzp) · Medium · 2 upvotes · 0 comments - [Chrome DevTools for Debugging Web Performance](https://daily.dev/posts/chrome-devtools-for-debugging-web-performance-he3paj551) · Web Performance Calendar · 9 upvotes · 0 comments - [A complete guide to React performance optimization](https://daily.dev/posts/a-complete-guide-to-react-performance-optimization-zei2krfdt) · LogRocket · 3 upvotes · 0 comments - [WordPress Speed Optimization Explained Layer by Layer](https://daily.dev/posts/wordpress-speed-optimization-explained-layer-by-layer-h540rtuzr) · ACF · 9 upvotes · 1 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#react](https://daily.dev/tags/react) [View this post on daily.dev](https://daily.dev/posts/web-performance-optimisation-i331jarhz) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Web Performance & Optimisation","url":"https://daily.dev/posts/web-performance-optimisation-i331jarhz","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/web-performance-optimisation-i331jarhz"},"datePublished":"2026-07-23T16:15:35.677Z","dateModified":"2026-09-14T09:28:52.766Z","description":"A practical guide to web performance covering Core Web Vitals (LCP, CLS, INP), the Critical Rendering Path, and a 5-step optimisation formula. The formula...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/03b05f856d39a4afce2ce7d7faa46970?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/03b05f856d39a4afce2ce7d7faa46970?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Medium","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Medium","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/medium","url":"https://daily.dev/sources/medium_js"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/web-performance-optimisation-i331jarhz","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,javascript,react","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Medium","item":"https://daily.dev/sources/medium_js"},{"@type":"ListItem","position":3,"name":"Web Performance & Optimisation"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/web-performance-optimisation-i331jarhz#faq","mainEntity":[{"@type":"Question","name":"What is the difference between the defer and async attributes on a script tag?","acceptedAnswer":{"@type":"Answer","text":"Defer downloads the script in parallel with HTML parsing but only executes it after parsing completes, making it safe and ordered for scripts that depend on the DOM. Async also downloads in parallel but executes as soon as it's ready, which can interrupt HTML parsing; it suits independent scripts like analytics. Developers tuning page load speed can find more script-loading breakdowns like this on daily.dev."}},{"@type":"Question","name":"What is the difference between preload and prefetch resource hints?","acceptedAnswer":{"@type":"Answer","text":"Preload fetches something critical for the current page, such as a hero image or font, before the browser would normally discover it, ensuring it's ready when needed. Prefetch instead fetches a resource the user will likely need on the next page, using idle browser time so it doesn't compete with current page resources. Anyone optimizing asset loading strategies can track techniques like these through daily.dev."}},{"@type":"Question","name":"How much smaller can gzip or Brotli compression make CSS and JavaScript files?","acceptedAnswer":{"@type":"Answer","text":"CSS and JavaScript files can be up to 75% smaller when compressed with gzip or Brotli before leaving the server. This compression is a high-impact, server-side change that requires no application code changes and pairs well with HTTP caching and versioned filenames for cache-busting. Teams chasing faster load times keep practical compression stats like this handy via daily.dev."}}]} ```