perf-matters-101.html

<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A personal site for Tatiana Mac, an American designer who builds inclusive, accessible, and ethical products with thoughtful practices.">
    <title>Perf Matters 101: Beginner Performance Tips &middot; Designer &middot; Tatiana Mac</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0e4bff">
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#ffffff">
</head>

<body>
    <div id="skip">
        <a href="#content">Skip Content</a>
    </div>
    <div class="container bg-black">
        <header class="site-header wrapper ">
            <div class="logo grid-whole@xxs grid-whole@xs grid-half@s grid-third@m grid-third@l grid-third@xl">
                <a href="index.html"><img src="images/tatianamac_logo.svg" alt="Geometric logo with two parallel lines on top and bottom, then a backwards 11 in the middle." /></a>
            </div>
            <nav class="main-navigation grid-whole@xxs grid-whole@xs grid-half@s grid-twothirds@m grid-twothirds@l grid-twothirds@xl">
                <ul class="navi linklist">
                    <li><a href="/#work" class="t-white t-link-accent-white t-ltr-stretch t-height-medium">Work</a></li>
                    <li><a href="/#writing" class="t-white t-link-accent-white t-ltr-stretch t-height-medium">Writing</a></li>
                    <li><a href="/#speaking" class="t-white t-link-accent-white t-ltr-stretch">Speaking</a></li>
                    <li><a href="/#about" class="t-white t-link-accent-white t-ltr-stretch">About</a></li>
                    <li><a href="/#contact" class="t-white t-link-accent-white t-ltr-stretch">Contact</a></li>
                </ul>
            </nav>
        </header>
    </div>
    <div class="container bg-black">
        <div class="wrapper">
                <div class="grid-whole@xxs grid-whole@xs grid-whole@s grid-third@m grid-third@l grid-third@xl ">
                <p class="t-eyebrow-line t-white t-typeweight">18 April 2019</p>
                <h1 class="t-white t-titlingfont t-jumbo">Perf Matters 101</h1>
                <p class="t-white t-serifweight">Beginner Performance Tips</p>
                </div>
                <div class="grid-whole@xxs grid-whole@xs grid-whole@s grid-twothirds@m grid-twothirds@l grid-twothirds@xl padding-thicc@l padding-thicc@m padding-thicc@s">
                <p class="t-white t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl t-serifweight">After speaking  at and attending <a href="https://www.perfmattersconf.com/" target="_blank">PerfMatters Conference</a> last month, I was so inspired to dig into my own site to improve its speed. As an aside, I wish more folks could have the privilege of attending conferences outside of their areas of focus. I found that attending a conference outside of my familiarity in a new-to-me community extremely rewarding; I had so much opportunity to learn. It certainly was intimidating to present to an unfamiliar audience with so much subject matter expertise, but I was pleasantly surprised at the kindness and welcoming nature of the performance community members whom I met.</p>
                
                <p class="t-white t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl t-serifweight">If you're able, I highly recommend <a href<a href="https://www.perfmattersconf.com/" target="_blank">attending the PerfMatters Conference next year</a> if you're able. Estelle, the conference organiser, is extraordinarily kind and helpful. She really cares about making an inclusive space where everyone is able to learn. In addition to serving as an excellent host and curator, she really crafted both a really diverse and targeted agenda that left the audience with loads to think about and to enact at conference close. We were blessed with the emcee stylings of Mina Markham, who is also an absolute delight and force.</p>
                
                <p class="t-white t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl t-serifweight">In this mini-tutorial, I hope to impart some very beginner knowledge from a designer-first point of view. I am by no means a performance expert (though I am happy to direct you to a whole list of folks I met who are!). I hope that through teaching as a beginner, I can help other beginners enter what can be an intimidating space. I also hope that my designer bias can provide a new way of looking at performance.</p>

                <p class="t-white t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl t-serifweight">Today, we'll go through a few key quick steps to opening up yourself to the world of performance. I've highlighted areas where I'm not 100% sure, because fuck having to do things perfectly. If you have subject matter expertise, <a href="https://www.twitter.com/tatianatmac/" target="_blank">feel free to Tweet at me</a> to help improve what I wrote.</p>
                </div>
                <div class="grid-whole@xxs grid-whole@xs grid-whole@s grid-twothirds@m grid-twothirds@l grid-twothirds@xl padding-thicc@l padding-thicc@m padding-thicc@s">
                <h2 class="t-white t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl t-serifweight">Step 1: Assess the weight of your site from a human point of view.</h2>

                <p class="t-white t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl t-serifweight">What I mean by this is: So much of the performance of your site comes down to the content. While there's loads of tools and tricks to fine-tune the content that exists, the first question to ask yourself is: Does all of the content on my site serve a purpose?</p>

                <p class="t-white t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl t-serifweight">Now, I'm lucky because?</p>
            </div>
            </div>
        </div>
    </div>
   
</body>
</html>