diff options
Diffstat (limited to 'build/performance-focused-wordpress-theme/index.html')
| -rw-r--r-- | build/performance-focused-wordpress-theme/index.html | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/build/performance-focused-wordpress-theme/index.html b/build/performance-focused-wordpress-theme/index.html new file mode 100644 index 0000000..a482f76 --- /dev/null +++ b/build/performance-focused-wordpress-theme/index.html @@ -0,0 +1,91 @@ +<!doctype html> +<html lang="en" id="top"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="icon" href="data:,"> + <title>Create a Performance-Focused WordPress Blog</title> + <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> +<h1>Create a Performance-Focused WordPress Blog</h1> +<p>2021-09-08</p> +<p>With my recent switch back to WordPress, and having read Kev Quirk’s <a href="https://kevq.uk/core-web-vitals-and-wordpress/" target="_blank" rel="noreferrer noopener">latest post about Core Web Vitals</a>, I wanted to make sure my blog still prioritized speed and performance above all else. I’m happy to say that I have closely replicated the same speed of my original <em>static</em> Jekyll-based version of this blog.</p> +<p>And I've achieved this with barely any effort at all. All that's needed is: </p> +<ul> +<li>a lightweight WordPress theme</li> +<li>two free WordPress plugins</li> +<li>cheap & fast web hosting</li> +</ul> +<p>Let me breakdown each component so those of you interested can do the same without hitting any roadblocks.</p> +<h2>Choosing Your WordPress Theme</h2> +<p>Selecting an existing theme or trying to build your own can be a daunting experience. For my needs, I forced myself to find an existing theme and just run with it. This gives me more time to focus on writing instead of constantly tweaking the blog’s visuals.</p> +<p>I would suggest either using the default starter theme (as of this writing: Twenty Twenty One theme by Automattic) or looking for specific “lightweight” themes across the web. I highly recommend checking out Anders Norén’s <a href="https://andersnoren.se/teman/">theme collection</a>. Others can be found on the official <a href="https://wordpress.org/">wordpress.org</a> website.</p> +<h2>Two Simple Plugins</h2> +<p>Once you have decided on a theme, you'll also want to be sure to install two very important plugins that greatly help with performance:</p> +<ol> +<li>Jetpack Boost – <a href="https://wordpress.org/plugins/jetpack-boost/">wordpress.org/plugins/jetpack-boost/</a></li> +<li>Yoast SEO – <a href="https://wordpress.org/plugins/wordpress-seo/">wordpress.org/plugins/wordpress-seo/</a></li> +</ol> +<h2>Jetpack Boost</h2> +<p>This plugin is fantastic. Not only will it run a proper audit (based off Google’s Lighthouse tool) but also gives you the ability to activate optimized CSS, lazy image loading and deferring non-essential JavaScript (if applicable). All of this is done in a super-clean user interface directly inside your WordPress admin.</p> +<p>Check out my own testing site metrics below:</p> +<p><figure> + <img src="/public/images/jetpack-boost.webp" alt="Jetpack boost numbers"> + <figcaption>The Jetpack Boost metrics for this website (and yes, that 99 score for mobile kills me)</figcaption> +</figure></p> +<h2>Yoast SEO</h2> +<p>If you’ve worked with WordPress at all you have surely heard of Yoast. Adding this plugin to your site is really a no-brainer. The automatic generation of meta data and SEO tags can save you a lot of time while also improving your overall Lighthouse score.</p> +<p>Here is the Lighthouse audit for the test WordPress website:</p> +<p><figure> + <img src="/public/images/ugly-duck-audit.webp" alt="Lighthouse audit"> + <figcaption>It might not be perfect, but it’s pretty damn close!</figcaption> +</figure></p> +<p>Those scores were achieved without any custom work on my end – I simply activated the plugin and let it work it’s magic. Great stuff.</p> +<h2>Host Everything on EasyWP</h2> +<p>Up to this point we haven’t spent a single penny. Unfortunately, web hosting isn’t free and you’re going to need it if you actually want your website to have a home on the interwebs!</p> +<p>I know – I can hear your collective voices shouting out:</p> +<blockquote><p>Isn't web hosting a little expensive just for my simple hobby blog/site?</p> +<p>-- <cite>Some of you</cite></p> +</blockquote> +<p>I host this test blog for just <strong>$3.88/month</strong> and the service is actually good. Unreal, right? That’s the price of a medium coffee, so I’m pretty sure it won’t break the bank.</p> +<p>This “cheap” hosting is through EasyWP and the Starter plan ($3.88/month) comes with the following:</p> +<ul> +<li>10 GB SSD storage</li> +<li>50k visitors/month</li> +<li>Unlimited bandwidth</li> +<li>Backups (though not automatic)</li> +<li>SFTP access</li> +<li>EasyWP Cache plugin (and it's actually good!)</li> +</ul> +<p>You will need to snag your own SSL certificate though, but this is easily obtained with something like <a href="https://letsencrypt.org">letsencrypt.org</a>.</p> +<p>Best of all, if in the future you require more features the next pricing tier is still only $7.88. Not too shabby!</p> +<h2>Try Yourself</h2> +<p>The fact that EasyWP gives you a free month trial, there really is no reason not to try spinning up your own blog or online store or whatever the heck you want to build. The more people with personal spaces on the web the better.</p> +<footer role="contentinfo"> + <h2>Menu Navigation</h2> + <ul id="menu"> + <li><a href="/">Home</a></li> + <li><a href="/projects">Projects</a></li> + <li><a href="/uses">Uses</a></li> + <li><a href="/wiki">Wiki</a></li> + <li><a href="/resume">Resume</a></li> + <li><a href="/colophon">Colophon</a></li> + <li><a href="/now">Now</a></li> + <li><a href="/donate">Donate</a></li> + <li><a href="/atom.xml">RSS</a></li> + <li><a href="#top">↑ Top of the page</a></li> + </ul> + <small> + Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br> + Maintained with ♥ for the web. <br> + Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br> + The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>. + </small> +</footer>
\ No newline at end of file |