---
layout: page
title: CSS Wizardry Blog Archives
page-class: page--blog
meta: "Browse the full CSS Wizardry archive of articles on web performance, Core Web Vitals, caching, CSS architecture, and front-end engineering."
permalink: /blog/
---

<section class="posts">

  {% assign random = site.time | date: "%s%N" | modulo: site.posts.size %}

  <p>This is the full archive of everything I’ve published here:
  <b>{{ site.posts | size }}</b> articles on web performance, site-speed,
  Core Web Vitals, caching, browser behaviour, and the occasional older CSS
  piece.</p>

  <p>If you’d rather start somewhere less chronological, try
  <a href="{{ site.posts[random].url }}"><cite>{{ site.posts[random].title }}</cite></a>
  <small>(<time>{{ site.posts[random].date | date: "%Y" }}</time>)</small>
  at random.</p>

  {% for post in site.posts %}
    {% assign currentDate = post.date | date: "%Y" %}
    {% if currentDate != myDate %}
      {% unless forloop.first %}</ol>{% endunless %}
      <hr />
      <h2 id=year-{{ currentDate }}>{{ currentDate }}</h2>
      <ol reversed>
      {% assign myDate = currentDate %}
    {% endif %}
      <li>
        <b><time datetime="{{ post.date | date: "%Y-%m-%d" }}">{{ post.date | date: "%B %d" }}</time></b>
        <br>
        <a href="{{ post.url }}" style="view-transition-name: x-{{ post.date | date: '%Y-%m-%d' }}">{{ post.title }}</a>
      </li>
    {% if forloop.last %}</ol>{% endif %}
  {% endfor %}

  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@graph": [{
        "@type": "CollectionPage",
        "@id": "https://csswizardry.com/blog/#webpage",
        "url": "https://csswizardry.com/blog/",
        "name": "CSS Wizardry Blog Archives",
        "description": "Archive of CSS Wizardry articles covering web performance and CSS architecture.",
        "isPartOf": {
          "@type": "WebSite",
          "@id": "https://csswizardry.com/#website",
          "url": "https://csswizardry.com/",
          "name": "CSS Wizardry"
        },
        "about": [
          {
            "@type": "Organization",
            "@id": "https://csswizardry.com/#org",
            "name": "CSS Wizardry Ltd",
            "url": "https://csswizardry.com/"
          },
          {
            "@type": "Person",
            "@id": "https://csswizardry.com/#person",
            "name": "Harry Roberts",
            "url": "https://csswizardry.com/about/"
          }
        ],
        "mainEntity": {
          "@type": "ItemList",
          "@id": "https://csswizardry.com/blog/#posts",
          "name": "Archived articles",
          "numberOfItems": {{ site.posts | size }},
          "itemListOrder": "https://schema.org/ItemListOrderDescending",
          "itemListElement": [
            {% for post in site.posts %}
            {
              "@type": "ListItem",
              "position": {{ forloop.index }},
              "url": "https://csswizardry.com{{ post.url }}",
              "name": {{ post.title | jsonify }}
            }{% unless forloop.last %},{% endunless %}
            {% endfor %}
          ]
        }
      }]
    }
  </script>

  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "CSS Wizardry",
        "item": "https://csswizardry.com/"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "blog",
        "item": "https://csswizardry.com/blog/"
      }]
    }
  </script>

</section>