HTML Size Analyzer

Analyze HTML size and catch bloat like inline images, large React hydration state, or code duplication.

Browsers assign a high priority to HTML document requests, so low-priority content like embedded images or JSON data can be prioritized over resources that are immediately render-blocking.

Duplicated HTML usually compresses well when sent over the network. However, very large HTML responses (multiple megabytes) can still take a long time to parse.

Paste HTML Code

<!doctype html>
<html lang="en" class="">
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

<title>Smashing Magazine — For Web Designers And Developers</title>

var fontsInServiceWorker = sessionStorage.foutFontsStage1Loaded && sessionStorage.foutFontsStage2Loaded || ('serviceWorker' in navigator && navigator.serviceWorker.controller !== null && navigator.serviceWorker.controller.state === 'activated')
  if (!fontsInServiceWorker && 'fonts' in document) {
    function fetchFonts(fonts) {
      return Promise.all(fonts.map(function (font) {
        return document
          .fonts
          .load(font);
      }));
    }

if( sessionStorage.foutFontsStage2Loaded ) {
			document.documentElement.className += " wf-loaded-stage2";
		} else {
      sessionStorage.foutFontsStage1Loaded = true;
    };
  }

if("fonts" in document) {

let font = new FontFace(
    "Elena",
    "url(/fonts/ElenaWebRegular/ElenaWebRegular-subset-v2.woff2) format('woff2')"
  );
  let fontBold = new FontFace(
    "Elena",
    "url(/fonts/ElenaWebBold/ElenaWebBold-subset-v2.woff2) format('woff2')",
     { weight: "700" }
  );
  let fontItalic = new FontFace(
    "Elena",
    "url(/fonts/ElenaWebRegularItalic/ElenaWebRegularItalic-subset-v2.woff2) format('woff2')",
    { style: "italic" }
  );

let font2Bold = new FontFace(
    "Mija",
    "url(/fonts/MijaBold/Mija_Bold-webfont-subset-v2.woff2) format('woff2')",
     { weight: "700" }
  );

let loadedFonts = Promise.all([
    font.load(),

fontBold.load(),
    font2Bold.load(),
    fontItalic.load()
  ]).then(result => {
    result.forEach(font => document.fonts.add(font));
    document.documentElement.classList.add('wf-loaded-stage2');
    sessionStorage.foutFontsStage2Loaded = true;
  }).catch(error => {
    throw new Error(`Error caught: ${error}`);
  });

}

if (
    (sessionStorage.foutFontsStage1Loaded &&
      sessionStorage.foutFontsStage2Loaded) ||
    ('serviceWorker' in navigator &&
      navigator.serviceWorker.controller !== null &&
      navigator.serviceWorker.controller.state === 'activated')
  ) {
    var docEl = document.documentElement

docEl.classList.add('wf-loaded-stage2')
  }

if (
    !'querySelector' in document &&
    'addEventListener' in window &&
    'getComputedStyle' in window
  ) {
    window.document.documentElement.className += ' no-js'
  }
  window.document.documentElement.className += ' enhanced js'
</script>

</head>

<div data-handler="PreLoad" id="top"></div>
<a href="#main" class="skip-main">Skip to main content</a>
<a href="#all-topics" class="skip-main">Jump to all topics</a>

<a href="/articles/" class="skip-main">Jump to list of all articles</a>

<li class="nav-item nav-item-1 "><a data-instant class="nav-item-link" href="/articles/">Articles</a></li>
<li class="nav-item nav-item-2 "><a data-instant class="nav-item-link" href="/guides/">Guides</a></li>
<li class="nav-item nav-item-3 "><a data-instant class="nav-item-link" href="/printed-books/">Books</a></li>
<li class="nav-item nav-item-4 "><a data-instant class="nav-item-link" href="/events/">Workshops</a></li>
<li class="nav-item nav-item-5 "><a data-instant class="nav-item-link" href="/membership/">Membership</a></li>
<li class="nav-item nav-item-6 "><a data-instant class="nav-item-link" href="/jobs/">Job Board</a></li>
<li class="nav-item nav-item-7 "><a data-instant class="nav-item-link" href="/the-smashing-newsletter/">Newsletter</a></li>

<li class="nav-item nav-item-8"><a class="nav-item-link" href="https://podcast.smashingmagazine.com">Podcasts</a></li>
<li class="nav-item nav-item-9 "><a class="nav-item-link" href="/write-for-us/">Write for us</a></li>
<li class="nav-item nav-item-10"><a class="nav-item-link" href="mailto:advertising@smashingmagazine.com">Advertise with us</a></li>

</ul>
</nav>
    <div class="search">
        <form data-handler="Search" id="js-search-form" class="search-form" method="get" action="https://www.google.com/webhp?q=site:smashingmagazine.com">
        <div class="search-input-wrapper">
            <input  class="input search-input" inputmode="search" type="search" name="q" id="js-search-input" autocomplete="off" placeholder="Search articles..." aria-label="Search articles" />
            <input type="hidden" name="sitesearch" value="smashingmagazine.com" />
            <a id="js-search-clear-button" class="search-clear-button" tabindex="-1" role="button">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.35 15.36" width="16px" height="16px" tabind="-1">
                    <title>Clear Search</title>
                    <path fill="#e33b2a" d="M8.38 11.41c-.5-.5-.78-.52-1.33 0l-3.05 3.08c-1.18 1.18-1.7 1.18-3-.16s-1.18-2-.18-3l3.18-3.19a.69.69 0 0 0-.07-1.14l-3-3c-1-1-1.13-1.81 0-3s1.9-1.21 3.13 0l2.94 3a.66.66 0 0 0 1.11 0c.63-.65 2.49-2.51 3.28-3.35a1.46 1.46 0 0 1 2.3-.15c.24.24.47.42.89.84.86.86.94 1.57.05 2.46l-3.27 3.26c-.36.34-.52.58-.16.94l3.27 3.27c1.1 1.1 1.23 1.7.05 2.88l-.58.58a1.59 1.59 0 0 1-2.46-.21z" />
                </svg>
            </a>
        </div>
        <input type="submit" class="search-button btn" name="submit" value="Search" id="js-search-submit">
    </form>
</div>

</header>
<script src="/js/nav-v2.js" importance="high" defer></script>
<div>
  <div data-component="SearchResults" class="search-results" data-lite="true"></div>

</div>

<li class="subnav-item  "><a data-instant class="nav-item-link" href="/category/accessibility/">Accessibility</a></li>

<li class="subnav-item  "><a data-instant class="nav-item-link" href="/category/javascript/">JavaScript</a></li>

<li class="subnav-item  "><a data-instant class="nav-item-link" href="/category/react/">React</a></li>

<li class="subnav-item  "><a data-instant class="nav-item-link" href="/category/round-ups/">Round-Ups</a></li>

<li class="subnav-item  "><a data-instant class="nav-item-link" href="/category/design/">Design</a></li>

<li class="subnav-item  "><a data-instant class="nav-item-link" href="/category/web-design/">Web Design</a></li>

<li class="subnav-item  "><a data-instant class="nav-item-link" href="/category/figma/">Figma</a></li>

<li class="subnav-item  "><a data-instant class="nav-item-link" href="/category/wallpapers/">Wallpapers</a></li>

<li class="subnav-item  "><a data-instant class="nav-item-link" href="/category/guides/">Guides</a></li>

<li class="subnav-item  "><a data-instant class="nav-item-link" href="/category/business/">Business</a></li>

<li class="subnav-item  "><a data-instant class="nav-item-link" href="/category/career/">Career</a></li>

<li class="subnav-item  "><a data-instant class="nav-item-link" href="/category/privacy/">Privacy</a></li>

<li role="none" class="subnav-item subnav-more-item">
      <a class="subnav-more-item__button" href="/articles/">
        <span class="menu-text">Jump to all articles ↬</span>
      </a>
    </li>
  </ul>
</nav>
	</header>

</a>

</figure>
    </div>
    <div>
      <div class="author-post__meta">
        <a class="author-post__author-title" href="/author/ejiro-asiuwhu/">Ejiro Asiuwhu</a>
        <em class="light-grey">wrote</em>
      </div>
      <h2 class="author-post__title mt-5 text-5xl">
        <a data-instant class="author-post__title-link" href="/2021/10/composable-css-animation-vue-animxyz/">Composable CSS Animation In Vue With AnimXYZ</a>
      </h2>
      <time datetime="" class="author-post__time">Oct 9, 2021</time>

<a class="author-post__tag  mija" href="/categories/vue.js">Vue.js</a>,

<a class="author-post__tag  mija" href="/categories/css">CSS</a>,

<a class="author-post__tag  mija" href="/categories/animation">Animation</a>

</div>
  </header>

<div class="author-post__content text-2xl">
      <p class="author-post__teaser">
        Most animation libraries like GSAP and Framer Motion are built purely with JavaScript or TypeScript, unlike AnimXYZ, which is labelled “the first composable CSS animation toolkit”, built mainly with SCSS While a simple library, it can be used to achieve a lot of awesome animation on the web in a short amount of time and little code.
      </p>

<p><a data-instant href="/2021/10/composable-css-animation-vue-animxyz/" class="author-post__read-more">Continue reading ↬</a></p>

</div>

</article>

</a>

</figure>
    </div>
    <div class="author-post__meta">
      <div class="row man">
        <span>
          <a class="author-post__author-title" href="/author/bryan-robinson/">Bryan Robinson</a>
          <span class="light-grey small">/</span>
          <time datetime="" class="author-post__time">Oct 8, 2021</time>

<a class="author-post__tag  mija" href="/categories/tools">Tools</a>,

<a class="author-post__tag  mija" href="/categories/techniques">Techniques</a>,

<a class="author-post__tag  mija" href="/categories/serverless">Serverless</a>

</span>
      </div>
      <div class="row man">
        <h2 class="author-post__title">
          <a data-instant class="author-post__title-link" href="/2021/10/static-first-madlib-generator-portable-text-netlify-builder-functions/">Building A Static-First MadLib Generator With Portable Text And Netlify On-Demand Builder Functions</a>
        </h2>
      </div>
    </div>
  </header>

</article>

</a>

</figure>
    </div>
    <div class="author-post__meta">
      <div class="row man">
        <span>
          <a class="author-post__author-title" href="/author/anton-tyschenko/">Anton Tyschenko</a>
          <span class="light-grey small">/</span>
          <time datetime="" class="author-post__time">Oct 7, 2021</time>

<a class="author-post__tag  mija" href="/categories/icons">Icons</a>,

<a class="author-post__tag  mija" href="/categories/freebies">Freebies</a>

</span>
      </div>
      <div class="row man">
        <h2 class="author-post__title">
          <a data-instant class="author-post__title-link" href="/2021/10/freebie-coronavirus-icon-set/">Freebie: COVID-19 Icon Set (56 Icons, AI, EPS, SVG, PNG)</a>
        </h2>
      </div>
    </div>
  </header>

</article>

</div>
      <div class="col--slim col-xs-12 col-sm-12 col-lg-4 col-lg-offset-1 mtl">

<div class="promo-box promo-box--blue">
    <a href="https://www.smashingmagazine.com/the-smashing-newsletter/" class="promo-box__image-link" tabindex="-1">
      <img src="/images/smashing-cat/cat-in-the-chair.svg" class="promo-box__image" width="258" loading="eager" decoding="async" height="290" alt="The Smashing Cat exploring new insights, at Smashing Workshops, of course." />
    </a>
    <a class="promo-box__cta" href="https://www.smashingmagazine.com/the-smashing-newsletter/">Email Newsletter</a>
    <p class="promo-box__heading">Useful front-end &amp; UX tips, delivered once a week.</p>

<p>With tools to help you get your work done better. Subscribe and get Vitaly’s <a href="https://www.smashingmagazine.com/2020/03/smart-interface-design-patterns-checklists/"><strong>Smart Interface Design Checklists PDF</strong></a> — in your inbox. 🎁</p>
<section class="nl-box__form">
          <form action="//smashingmagazine.us1.list-manage.com/subscribe/post?u=16b832d9ad4b28edf261f34df&amp;id=a1666656e0" method="post">
            <div class="nl-box__wrapper">
              <label for="mce-EMAIL-hp" class="sr-only">Your (smashing) email</label>
              <div class="nl-box__group">
                <input type="email" value="" name="EMAIL" class="nl-box__form--email" id="mce-EMAIL-hp" placeholder="Your email">

<input type="submit" value="Meow!" name="subscribe" class="nl-box__form--button">
              </div>
            </div>
          </form>
        </section>
<p class="mtn mbn">
<small class="promo-box__footer mtm block grey"><em>On <a href="https://www.smashingmagazine.com/the-smashing-newsletter/">front-end &amp; UX</a>. Trusted by 190.000 folks.</em></small></p>

</div>

</div>
    </div>
  </div>

<div class="card card--box-shadow card--light card--green">
				<div class="stack">
					<h2 class="card-post__title card__guide--green">
						</span>
						<a class="card__guide--green" href="/2021/03/complete-guide-accessible-front-end-components/">Accessible Front-End Components</a>
					</h2>
					<p>Reliable accessible UI components: <code>:focus</code> styles, modals, date pickers, navigation, tables, buttons, SVGs.</p>
					<a class="btn btn--large btn--card btn--text-shadow card__guide--green_bg" href="/2021/03/complete-guide-accessible-front-end-components/">Explore Accessible Components</a>
				</div>
			</div>

<div class="card card--box-shadow card--light card--orange">
				<div class="stack">
					<h2 class="card-post__title card__guide--orange">
						</span>
						<a class="card__guide--orange" href="/2021/03/css-generators/">CSS Generators &amp; Tools</a>
					</h2>
					<p>Useful CSS tools for animations, shadows, cubic-bezier curves, easing gradients, filters, overlays, type scales.</p>
					<a class="btn btn--large btn--card btn--text-shadow card__guide--orange_bg" href="/2021/03/css-generators/">Explore CSS Generators</a>
				</div>
			</div>

<div class="card card--box-shadow card--light card--violet">
				<div class="stack">
					<h2 class="card-post__title card__guide--violet">
						</span>
						<a class="card__guide--violet" href="/2021/06/useful-frontend-boilerplates-starter-kits/">Front-End Boilerplates &amp; Starter Kits</a>
					</h2>
					<p>HTML boilerplates, CSS resets, forms, dev themes, gitignore, CSS snippets, static sites, style guides.</p>
					<a class="btn btn--large btn--card btn--text-shadow card__guide--violet_bg" href="/2021/06/useful-frontend-boilerplates-starter-kits/">Explore Front-End Boilerplates</a>
				</div>
			</div>

</div>
</div>

<div class="load-more col-12">
    <a class="load-more__link" data-instant href="/category/guides/">See All Guides</a>
  </div>

</section>

<section class="curated-articles-container">
  <div class="container">
    <div class="row col col--slim col-12">
      <h4 class="vertical vertical--white vertical--horizontal-fallback left-aligned"><span>Latest Posts</span></h4>

</a>

</figure>
    </div>
    <span class="article--post__author-name">
      <a class="red" href="/author/stephanie-eckles">Stephanie Eckles</a>

<em class="light-grey">wrote</em>

</span>
  </header>
  <h2 class="article--post__title h1">
    <a href="/2021/10/guide-debugging-css/">A Guide To CSS Debugging</a>
  </h2>

Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs.

</p>
  </div>

<div class="article--post__content article--post__meta">
		<p>
			<time datetime="2021-10-06" class="article--post__time">October 6, 2021</time>
			<em class="light-grey small">in</em>

<a class="author-post__tag  mija" href="/categories/css">CSS</a>,

<a class="author-post__tag  mija" href="/categories/tools">Tools</a>,

<a class="author-post__tag  mija" href="/categories/techniques">Techniques</a>

</p>
	</div>

</article>
						</div>

</a>

</figure>
    </div>
    <span class="article--post__author-name">
      <a class="red" href="/author/tomhudson">Tom Hudson</a>

<em class="light-grey">wrote</em>

</span>
  </header>
  <h2 class="article--post__title h1">
    <a href="/2021/10/local-testing-serverless-api-gateway-lambda/">Local Testing A Serverless API (API Gateway And Lambda)</a>
  </h2>

Have you ever struggled with testing cloud services locally? Specifically, have you ever struggled with locally testing an API that uses API Gateway and Lambda, with the Serverless framework, on AWS? In this article, Tom Hudson shares a quick overview of how easy it is to quickly set up your project to test locally before deploying to AWS.

</p>
  </div>

<div class="article--post__content article--post__meta">
		<p>
			<time datetime="2021-10-05" class="article--post__time">October 5, 2021</time>
			<em class="light-grey small">in</em>

<a class="author-post__tag  mija" href="/categories/testing">Testing</a>,

<a class="author-post__tag  mija" href="/categories/api">API</a>,

<a class="author-post__tag  mija" href="/categories/tools">Tools</a>

</p>
	</div>

</article>
						</div>

</a>

</figure>
    </div>
    <span class="article--post__author-name">
      <a class="red" href="/author/silvestar-bistrovic">Silvestar Bistrović</a>

<em class="light-grey">wrote</em>

</span>
  </header>
  <h2 class="article--post__title h1">
    <a href="/2021/10/build-expandable-accessible-gallery/">How To Build An Expandable Accessible Gallery</a>
  </h2>

In this article, we’ll be looking at how to set up a gallery that is expandable as well as accessible with a few tips and tricks along the way. Let’s get started!

</p>
  </div>

<div class="article--post__content article--post__meta">
		<p>
			<time datetime="2021-10-04" class="article--post__time">October 4, 2021</time>
			<em class="light-grey small">in</em>

<a class="author-post__tag  mija" href="/categories/tools">Tools</a>,

<a class="author-post__tag  mija" href="/categories/css">CSS</a>,

</p>
	</div>

</article>
						</div>

</a>

</figure>
    </div>
    <span class="article--post__author-name">
      <a class="red" href="/author/miracle-onyenma">Miracle Onyenma</a>

<em class="light-grey">wrote</em>

</span>
  </header>
  <h2 class="article--post__title h1">
    <a href="/2021/10/search-functionality-nuxt-app-algolia-instantsearch/">How To Implement Search Functionality In Your Nuxt App Using Algolia InstantSearch</a>
  </h2>

Many websites have some sort of search feature because it helps users navigate through their content easily. Implementing it the right way can be tricky and might not give a good user experience. In this tutorial, we will be integrating Algolia, a popular and powerful search service for the best experience on our Nuxt site.

</p>
  </div>

<div class="article--post__content article--post__meta">
		<p>
			<time datetime="2021-10-01" class="article--post__time">October 1, 2021</time>
			<em class="light-grey small">in</em>

<a class="author-post__tag  mija" href="/categories/css">CSS</a>,

<a class="author-post__tag  mija" href="/categories/apps">Apps</a>,

</p>
	</div>

</article>
						</div>

</div>

<div class="col--article--meow col--article--meow__membership">
	<div class="meow__masthead">
    <div class="promo-box promo-box--green">
      <a href="/membership/" class="promo-box__image-link" tabindex="-1">
          <img src="/images/smashing-cat/highlight-member.svg" loading="lazy" class="promo-box__image" width="258" height="290" alt="The Smashing Cat exploring new insights, at Smashing Workshops, of course.">
      </a>
      <p class="promo-box__heading mija">Join <span data-component="MemberCount" data-insert="true">1,916</span> Smashing Members</p>
      <p>A <strong>friendly community</strong> for people who design and build the web. With books, workshops, goodies and early-birds — for just 1 coffee a month. <a href="/membership/">Take a look around.</a></p>
      <p class="mtn mbn">
          <a href="/membership/" role="button" class="promo-box__button">Join the community&nbsp;↬</a>
          <small class="promo-box__footer mtm block grey"><em>Already have an account? <a href="/auth/">Sign in!</a></em></small>
      </p>
  </div>
	</div>
</div>

</div>
							</div>

</a>

</figure>
    </div>
    <span class="article--post__author-name">
      <a class="red" href="/author/cosima-mielke">Cosima Mielke</a>

<em class="light-grey">wrote</em>

</span>
  </header>
  <h2 class="article--post__title h1">
    <a href="/2021/09/desktop-wallpaper-calendars-october-2021/">A Time Of Transition (October 2021 Desktop Wallpapers Edition)</a>
  </h2>

Get your desktop ready for fall and the upcoming Halloween season with a fresh batch of desktop wallpapers. Created with love by designers and artists from across the globe, they come in versions with and without a calendar for October 2021.

</p>
  </div>

<div class="article--post__content article--post__meta">
		<p>
			<time datetime="2021-09-30" class="article--post__time">September 30, 2021</time>
			<em class="light-grey small">in</em>

<a class="author-post__tag  mija" href="/categories/wallpapers">Wallpapers</a>

</p>
	</div>

</article>
						</div>

</a>

</figure>
    </div>
    <span class="article--post__author-name">
      <a class="red" href="/author/addy-osmani">Addy Osmani</a>

<em class="light-grey">wrote</em>

</span>
  </header>
  <h2 class="article--post__title h1">
    <a href="/2021/09/modern-image-formats-avif-webp/">Using Modern Image Formats: AVIF And WebP</a>
  </h2>

In this article, we’ll highlight how modern image formats (AVIF or WebP) can improve compression by up to 50% and deliver better quality per-byte while still looking visually appealing. We’ll compare what’s possible at high-quality, low-quality and file-size targets.

</p>
  </div>

<div class="article--post__content article--post__meta">
		<p>
			<time datetime="2021-09-29" class="article--post__time">September 29, 2021</time>
			<em class="light-grey small">in</em>

<a class="author-post__tag  mija" href="/categories/images">Images</a>,

<a class="author-post__tag  mija" href="/categories/browsers">Browsers</a>,

<a class="author-post__tag  mija" href="/categories/performance">Performance</a>

</p>
	</div>

</article>
						</div>

</a>

</figure>
    </div>
    <span class="article--post__author-name">
      <a class="red" href="/author/eric-bailey">Eric Bailey</a>

<em class="light-grey">wrote</em>

</span>
  </header>
  <h2 class="article--post__title h1">
    <a href="/2021/09/improving-accessibility-of-markdown/">Improving The Accessibility Of Your Markdown</a>
  </h2>

You can find Markdown in many places on the Internet. This article covers different aspects of Markdown and how it interacts with other technology.

</p>
  </div>

<div class="article--post__content article--post__meta">
		<p>
			<time datetime="2021-09-28" class="article--post__time">September 28, 2021</time>
			<em class="light-grey small">in</em>

<a class="author-post__tag  mija" href="/categories/tools">Tools</a>,

<a class="author-post__tag  mija" href="/categories/accessibility">Accessibility</a>,

<a class="author-post__tag  mija" href="/categories/browsers">Browsers</a>

</p>
	</div>

</article>
						</div>

</a>

</figure>
    </div>
    <span class="article--post__author-name">
      <a class="red" href="/author/ramona-schwering">Ramona Schwering</a>

<em class="light-grey">wrote</em>

</span>
  </header>
  <h2 class="article--post__title h1">
    <a href="/2021/09/cypress-end-to-end-testing/">Let’s Dive Into Cypress For End-to-End Testing</a>
  </h2>

Is end-to-end testing a painful topic for you? In this article, Ramona Schwering explains how to handle end-to-end testing with Cypress and make it make it not so tedious and expensive for yourself, but fun instead.

</p>
  </div>

<div class="article--post__content article--post__meta">
		<p>
			<time datetime="2021-09-27" class="article--post__time">September 27, 2021</time>
			<em class="light-grey small">in</em>

<a class="author-post__tag  mija" href="/categories/ui">UI</a>,

<a class="author-post__tag  mija" href="/categories/tools">Tools</a>,

<a class="author-post__tag  mija" href="/categories/testing">Testing</a>

</p>
	</div>

</article>
						</div>

</div>

<div class="load-more col-12">
				<a class="load-more__link" data-instant href="/articles/page/2/">See More Latest Articles</a>
			</div>

</div>
  </div>
</section>

<section class="smashing-family-container bg--white">
  <div class="container container--wide">
      <div class="row col col--slim col-12">
          <div class="pbl mbl center col-12">
              <h2>That’s The Smashing Family.</h2>
              <h3 class="mtm mija red">Smashing Magazine is so much more than articles.</h3>
          </div>

<div class="family__grid-container">
          <div class="family__grid">
              <div class="promo-box promo-box--green" tabindex="0">
                  <a href="/printed-books/" class="promo-box__image-link" tabindex="-1">
                      <img src="/images/smashing-cat/cat-family-books.svg" loading="lazy" class="promo-box__image" width="258" height="290" alt="A friendly Smashing Cat, reading books while being mysterious, of course." />
                  </a>
                  <p class="promo-box__heading mija">Smashing Books</p>
                  <p class="mbn"><strong>14 printed books</strong> and <strong>67 eBooks</strong>. Written for web developers, designers and marketeers.</p>
                  <p class="mbn mlm mrm">
                      <a href="/printed-books/" role="button" class="promo-box__button">Jump to books&nbsp;↬</a>
                      <small class="promo-box__footer mtl block grey"><em>Free airmail shipping wordlwide. No ifs or buts.</em></small>
                  </p>
              </div>
              <div class="promo-box promo-box--blue" tabindex="0">
                  <a href="https://smashingconf.com/online-workshops/" class="promo-box__image-link" tabindex="-1">
                      <img src="/images/smashing-cat/cat-family-workshops.svg" loading="lazy" class="promo-box__image" width="258" height="290" alt="The Smashing Cat exploring new insights, at Smashing Workshops, of course." />
                  </a>
                  <p class="promo-box__heading mija">Smashing Workshops</p>
                  <p class="mbn">Online workshops with experts. Broken into 2.5h-segments, with interactive, live sessions.</p>
                  <p class="mbn mlm mrm">
                      <a href="https://smashingconf.com/online-workshops/" role="button" class="promo-box__button">Jump to workshops&nbsp;↬</a>
                      <small class="promo-box__footer mtl block grey"><em>2.5h live sessions, with video recordings and Q&amp;A.</em></small>
                  </p>
              </div>
              <div class="promo-box promo-box--red" tabindex="0">
                  <a href="/jobs/" class="promo-box__image-link" tabindex="-1">
                      <img src="/images/smashing-cat/cat-family-job-board.svg" loading="lazy" class="promo-box__image" width="258" height="290" alt="The Smashing Cat exploring new insights, at Smashing Workshops, of course." />
                  </a>
                  <p class="promo-box__heading mija">Smashing Job Board</p>
                  <p class="mbn">Helping designers and developers find great jobs, and connect with great companies.</p>
                  <p class="mbn mlm mrm">
                      <a href="/jobs/" role="button" class="promo-box__button">Jump to jobs&nbsp;↬</a>
                      <small class="promo-box__footer mtl block grey"><em>Freelancers and full-time, in front-end &amp; UX.</em></small>
                  </p>
              </div>
              <div class="promo-box promo-box--lightgreen" tabindex="0">
                  <a href="/membership/" class="promo-box__image-link" tabindex="-1">
                      <img src="/images/smashing-cat/cat-family-membership.svg" loading="lazy" class="promo-box__image" width="258" height="290" alt="The Smashing Cat exploring new insights, at Smashing Workshops, of course." />
                  </a>
                  <p class="promo-box__heading mija">Smashing Membership</p>
                  <p class="mbn">A friendly community for people who design and build the web. With discounts, goodies and fancy cats.</p>
                  <p class="mbn mlm mrm">
                      <a href="/membership/" role="button" class="promo-box__button">Jump to Membership&nbsp;↬</a>
                      <small class="promo-box__footer mtl block grey"><em>For just 1 coffee a month.</em></small>
                  </p>
              </div>
              <div class="promo-box promo-box--lightyellow" tabindex="0">
                  <a href="/the-smashing-newsletter/" class="promo-box__image-link" tabindex="-1">
                      <img src="/images/smashing-cat/cat-family-mailman.svg" loading="lazy" class="promo-box__image" width="258" height="290" alt="The Smashing Cat exploring new insights, at Smashing Workshops, of course." />
                  </a>
                  <p class="promo-box__heading mija">Smashing Newsletter</p>
                  <p class="mbn">Weekly tips on front-end &amp; UX, delivered straight to your inbox. Just practical stuff that you can use.</p>
                  <p class="mbn mlm mrm">
                      <a href="/the-smashing-newsletter/" role="button" class="promo-box__button">Jump to Newsletter&nbsp;↬</a>
                      <small class="promo-box__footer mtl block grey"><em>You can unsubscribe with 1 click any time.</em></small>
                  </p>
              </div>
          </div>
          </div>
      </div>
  </div>
</section>

<section class="conf-panel conf-panel--darkblue">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <header>
            <span class="conf-panel__meta conf-panel__meta">September–December 2021 &bull; New Workshops</span>
            <h2 class="conf-panel__conf--darkblue-name h1"><a href="https://smashingconf.com/online-workshops/">Boost Your Skills Online,<br />On Front-End &amp; Design</a></h2>
          </header>
          <p class="conf-panel__desc conf-panel__desc--darkblue">
            Meet <strong>Smashing Workshops</strong>, with practical, actionable insights from experts — live. With interactive exercises, slides, video recordings and a friendly Q&A.
          </p>
          <a href="https://smashingconf.com/online-workshops/" role="button" class="btn btn--white btn--large">Explore all speakers and topics&nbsp;&rarr;</a>

<section class="curated-articles-container bg--white">
  <div class="container">
    <div class="row col col--slim col-12">
      <h4 class="vertical vertical--white vertical--horizontal-fallback left-aligned">
        <span>Community Links</span></h4>

</a>

</figure>
      </div>
    </div>
    <div class="md:flex-1">
      <h4 class="author__desc__title">Person Of The Week</h4>
      <p>Ekene Eze (<a href="https://twitter.com/kenny_io">@kenny_io</a>) is a Developer Experience Engineer at Netlify who loves working on projects that help other software engineers. Passionate about sharing with the community and supporting the next generation of developers, Ekene writes about web development concepts and best practices, creates courses for different platforms, and speaks at conferences. Thank you for sharing and caring, dear Ekene!</p>
    </div>
  </div>
</div>

</div>

</a>

</figure>
    </div>
    <span class="article--post__author-name">
      <a class="red" href="https://www.twitter.com/sarah_edo">Sarah Drasner</a>

<em class="light-grey">wrote</em>

</span>
  </header>
  <h2 class="article--post__title h1">
    <a href="https://leaddev.com/culture-engagement-motivation/why-flow-matters-more-passion">Why Flow Matters More</a>
  </h2>

<div class="article--post__content">
    <p class="article--post__teaser">
      <time datetime="2021-10-08" class="article--post__time">October 8, 2021 — </time>
      Do you need to have passion to be a programmer? Sarah Drasner argues that focusing on passion can create toxic ideals and that we should <a href="https://leaddev.com/culture-engagement-motivation/why-flow-matters-more-passion">concentrate on the flow state instead</a> to help teams thrive.

</p>
  </div>

</article>
          </div>

</div>

</a>

</figure>
    </div>
    <span class="article--post__author-name">
      <a class="red" href="https://www.twitter.com/5t3ph">Stephanie Eckles</a>

<em class="light-grey">wrote</em>

</span>
  </header>
  <h2 class="article--post__title h1">
    <a href="https://twitter.com/5t3ph/status/1443995746601144324">CSS Quick Tip</a>
  </h2>

<div class="article--post__content">
    <p class="article--post__teaser">
      <time datetime="2021-10-07" class="article--post__time">October 7, 2021 — </time>
      Did you know that you can use the <code>::where()</code> selector to set sensible defaults that are overridable? Stephanie Eckles <a href="https://twitter.com/5t3ph/status/1443995746601144324">shows how it works</a>. A great example of what modern CSS has to offer.

</p>
  </div>

</article>
          </div>

</div>

</a>

</figure>
    </div>
    <span class="article--post__author-name">
      <a class="red" href="https://www.twitter.com/addyosmani">Addy Osmani</a>

<em class="light-grey">wrote</em>

</span>
  </header>
  <h2 class="article--post__title h1">
    <a href="https://twitter.com/addyosmani/status/1444195449095737346">Tips For Efficient Googling</a>
  </h2>

<div class="article--post__content">
    <p class="article--post__teaser">
      <time datetime="2021-10-06" class="article--post__time">October 6, 2021 — </time>
      Addy Osmani shares <a href="https://twitter.com/addyosmani/status/1444195449095737346">seven tips to make Googling more effient</a>. Among them shortcuts to get results before and after a specific date and for excluding a phrase.

</p>
  </div>

</article>
          </div>

</div>

</a>

</figure>
    </div>
    <span class="article--post__author-name">
      <a class="red" href="https://www.twitter.com/_marcusherrmann">Marcus Herrmann</a>

<em class="light-grey">wrote</em>

</span>
  </header>
  <h2 class="article--post__title h1">
    <a href="https://marcus.io/blog/accessible-overflow">Accessible Overflow</a>
  </h2>

<div class="article--post__content">
    <p class="article--post__teaser">
      <time datetime="2021-10-05" class="article--post__time">October 5, 2021 — </time>
      The situation around keyboard accessibility of content that overflows its containers is quite patchy. Marcus Herrmann takes a closer look at the <a href="https://marcus.io/blog/accessible-overflow">current state of overflow scrolling affairs</a>.

</p>
  </div>

</article>
          </div>

</div>

</a>

</figure>
    </div>
    <span class="article--post__author-name">
      <a class="red" href="http://www.nicoleassini.com/">Nicole Assini</a>

<em class="light-grey">wrote</em>

</span>
  </header>
  <h2 class="article--post__title h1">
    <a href="https://medium.com/indeed-design/globalizing-your-ux-designs-bef72353984a">Globalizing UX Designs</a>
  </h2>

<div class="article--post__content">
    <p class="article--post__teaser">
      <time datetime="2021-10-04" class="article--post__time">October 4, 2021 — </time>
      Designing for users in many parts of the world is more than just inclusive. Nicole Assini explores how UX designers can improve their work <a href="https://medium.com/indeed-design/globalizing-your-ux-designs-bef72353984a">by considering users of other cultures</a>, languages, locations, and backgrounds.

</p>
  </div>

</article>
          </div>

</div>

</a>

</figure>
    </div>
    <span class="article--post__author-name">
      <a class="red" href="https://www.twitter.com/katiehempenius">Katie Hempenius</a>

<em class="light-grey">wrote</em>

</span>
  </header>
  <h2 class="article--post__title h1">
    <a href="https://twitter.com/katiehempenius/status/1092959973548544000">Connection Speed In DevTools</a>
  </h2>

<div class="article--post__content">
    <p class="article--post__teaser">
      <time datetime="2021-10-01" class="article--post__time">October 1, 2021 — </time>
      How to view your connection speed from DevTools? The <a href="https://twitter.com/katiehempenius/status/1092959973548544000">NetworkInformation API</a> returns bandwidth, latency, and connection type approximations, as Katie Hempenius shows.

</p>
  </div>

</article>
          </div>

</div>

<div class="col-12">
        <div class="load-more">
          <a class="load-more__link" href="https://www.twitter.com/smashingmag">More links on Twitter</a>
        </div>
      </div>

</div>
  </div>
</section>

</main>

<div class="col-12">
      <div class="footer__topics open">
    <h4 class="footer__topics__title" id="topics">Browse All Smashing Magazine Topics</h4>
    <ul class="footer__topics__list">

<li class="footer__topics__item">
            <a href="/category/accessibility">Accessibility</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/android">Android</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/animation">Animation</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/design">Design</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/design-patterns">Design Patterns</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/design-systems">Design Systems</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/e-commerce">E-Commerce</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/freebies">Freebies</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/graphics">Graphics</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/illustrator">Illustrator</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/inspiration">Inspiration</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/javascript">JavaScript</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/mobile">Mobile</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/pattern-libraries">Pattern Libraries</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/performance">Performance</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/photoshop">Photoshop</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/plugins">Plugins</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/react">React</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/responsive-design">Responsive Design</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/service-workers">Service Workers</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/sketch">Sketch</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/typography">Typography</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/usability">Usability</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/user-experience">User Experience</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/wallpapers">Wallpapers</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/web-design">Web Design</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/wordpress">WordPress</a>
        </li>

<li class="footer__topics__item">
            <a href="/category/workflow">Workflow</a>
        </li>

</ul>
</div>

</div>

<div class="col-12">
      <div class="footer__notes">
        <p>With a commitment to quality content for the design community.</p>
        <p>Founded by Vitaly Friedman and Sven Lennartz. <span class="lining-figures">2006–2021</span>.</p>
        <p>Smashing is proudly running on <a href="https://www.netlify.com/?utm_source=link&utm_medium=parter&utm_campaign=sm-footer">Netlify</a>.</p>
        <p>Fonts by <a href="http://latinotype.com/">Latinotype</a>.</p>
      </div>

<ul class="footer__links">
        <li>&#9998; <a href="/write-for-us/">Write for us</a>
        </li>
        <li>
          <a href="/contact/">Contact us</a>
        </li>
        <li>
          <a href="/about/">About us (Impressum)</a>
        </li>
        <li>
          <a href="/privacy-policy/">Privacy policy</a>
        </li>
        <li>
          <a href="/auth/">Membership login</a>
        </li>
        <li>
            <a href="/delivery-times/">Delivery times</a>
          </li>
            <li>
          <a href="mailto:&#097;&#100;&#118;&#101;&#114;&#116;&#105;&#115;&#105;&#110;&#103;&#064;&#115;&#109;&#097;&#115;&#104;&#105;&#110;&#103;&#109;&#097;&#103;&#097;&#122;&#105;&#110;&#101;&#046;&#099;&#111;&#109;?subject=Let’s talk about advertising">Advertise</a>
        </li>
      </ul>
    </div>
  </div>

</footer>

window.PRERELEASES = {}
  window.PAGE_TYPE = "page"

if ('serviceWorker' in navigator && !localStorage.getItem('no_sw')) {
    window.addEventListener('load', function() {
      navigator.serviceWorker
        .register('/sw.js')
        .then(() => {
          window.caches
            .open('smashing-mag-offline-articles')
            .then(cache => cache.keys())
            .then(keys => {
              var savedOffline = document.querySelector('.meta-box--article')
              if (savedOffline && keys && keys.length) {
                var currentPageSaved = keys.find(key =>  key.url === window.location.href)
              }

var list = document.querySelector('.offline-articles-list')
              if (list && keys && keys.length) {
                var listItem = document.createElement('li')

var innerList = keys
                  .map(function(key) {
                    return (
                      '<li><a href="' + key.url + '">' + key.url + '</a></li>'
                    )
                  })
                  .join('')
                listItem.innerHTML =
                  'Recently viewed aritcles: <ul>' + innerList + '</ul>'
                list.appendChild(listItem)
              }
            })
        })
        .catch(function(err) {
          console.error('Failed to load service worker')
        })
    })
  }
</script>

</div>

</body>
</html>

Full Size

Uncompressed HTML

101 KB

Compressed Size

Sum By Category

15.5 KB

Compressed Size

Full HTML

12.4 KB

Show Values:

<style> #text

18.46%

2.85 KB

<script> #text

14.22%

2.20 KB

<span> #text

10.97%

1.70 KB

<img> alt

6.17%

976 B

<dd> #text

4.45%

704 B

<a> href

4.17%

659 B

<script> src

2.27%

359 B

<img> src

2.19%

347 B

<meta> content

2.1%

332 B

<link> href

1.82%

288 B

<img> srcset

1.81%

286 B

<a> #text

1.41%

223 B

<li> class

1.17%

185 B

<script> id

0.97%

153 B

<div> class

0.85%

134 B

<span> class

0.84%

133 B

<input> name

0.78%

123 B

<link> rel

0.75%

119 B

<input> class

0.74%

117 B

<ul> #text

0.68%

107 B

<style> id

0.68%

107 B

<dt> #text

0.63%

99.0 B

<meta> name

0.63%

99.0 B

<img> sizes

0.58%

91.0 B

<div> #text

0.56%

89.0 B

<meta> property

0.54%

86.0 B

HTML Comment

0.54%

86.0 B

<body> class

0.54%

85.0 B

<textarea> class

0.51%

80.0 B

<li> #text

0.5%

79.0 B

The HTML Size Analyzer parses the HTML and groups content size by tag and attribute name.

The #text category includes text content that's a direct child of the element. It also includes the tag itself, but not the attributes of the tag.

The full text content of each category is compressed separately with gzip. The individual item size is never shown compressed.

Optimize Website Performance

DebugBear is a web performance monitoring tool that helps you keep your website fast and deliver a great user experience.

Identify slow pages on your website

Improve page speed and Core Web Vitals

Get alerted to regressions

Get Comprehensive Performance Insights:

Synthetic monitoring

Google CrUX data

Real user monitoring (RUM)

Start Free Trial

HTML Size Analyzer

Paste HTML Code

Optimize Website Performance

More Free Tools

Website Speed Test

Site Speed Extension

Resource Hint Validator

TTFB Test

NoScript Test

JSON Size Analyzer