LIGHT MODE

DARK MODE

Workflow

May 11, 2022

What does it mean to “optimize” a website?

BY

Part of my job involves optimizing the websites we make. I actually enjoy this part of the job, but I feel like nobody knows what I mean when I talk about it. I can just imagine a movie where a worker tells her boss she’s going to “optimize a website” just to get him off her back. Then she goes back to Reddit to discuss Magic Card strategies or mock the people selling chimp NFTs.

But not only is website optimization an important part of the process, it is the process. It guarantees we make the best site to meet your goals. Optimization isn’t just about oiling the gears but the entire design, development, and end-user experience. We keep optimization at the front of our minds when planning, designing, and developing a site. The ultimate goal is to always center the most important aspect of tech: the human relationships it’s designed to improve.

What do you mean by “optimize” a website?

As a recent homeowner, I can say with some authority that a website is a lot like a house:

  • You want company, so it needs to look inviting, but you don’t want intruders, so it also needs locking windows, sturdy deadbolts, and maybe a motion sensor light or two.
    • Likewise, a website needs an SSL certificate to encrypt data, a web server with strict permissions, and maybe a reverse proxy if you want to ward off DDoS attacks.
  • You need to trust the people who live there and protect them when you’re away. If your five-year-old likes to wake up in the middle of the night and explore the house, you need to hide the treadmill key.
    • A website needs the admins and editors to be able to access their documents but not break the site for other staff or visitors.
  • And you need to watch and regulate different resources, such as heat, electricity, and off-brand La Croix in the mini-fridge.
    • With a website, you are worried about your backend – such as your server’s processor, memory, and bandwidth capabilities – as well as the frontend – how the site is loaded into a website guest’s browser.

Optimization deals with that last bullet. If your website is trying to attract potential clients or customers, you want to make sure you don’t run out of lemon-lime seltzer.

How do you optimize your websites?

Most of our sites use WordPress, which offers a lot of simple out-of-the-box solutions anyone can employ with relative ease.

Cache resources

When I first learned HTML in middle school, I would create a text document ending in “.html”. Then I’d copy/paste as much markup code from another website before deciding to stop and start changing it.

Nowadays, websites rarely start with static .html files. Every time you visit a WordPress site, your server works hard to use a programming “preprocessor” that connects hundreds of different files and pulls from a database to generate the appearance of an HTML file. As far as Chrome or Safari or Microsoft Edge are concerned, you are looking at an HTML file. That’s because the server is doing tons of work to achieve that illusion.

But if you get more than a few thousand visitors a day, or even hundreds of thousands of views, it would be a lot less stress on the server to just send users a static HTML file.

That’s what popular caching files achieve: they turn your dynamic Content Management System into a series of static HTML files. The free plugin Autoptimize does a pretty good job of this. But we prefer the premium plugin WP Rocket, which not only caches the pages, but improves performance by shrinking (or “minifying”) external text documents, such as html pages, stylesheets, and javascript files.

Minify documents

When you see a lot of blank space on a computer screen…

… like this,

the computer treats those spaces the same way they would treat any other letters, numbers, or symbols. So to your web browser, the above “empty space” is actually this:

<br /><br />&#9;&#9;&#9;&#9;&#9;&#9;&#9;&#9;

White spaces are ignored by browsers, but developers and programmers use them to visually organize our code.

Since those organizational white spaces take up memory, but aren’t actually used in the page that website visitors see, we remove them. This can be done at any point in the development process. WP Rocket can take your completed code and minify it. But to make sure your files are as minified as possible (and therefore your website is optimized), it’s best to include this as part of the development process.

Specify resources

Not only do we use software to minify code as we’re writing it, we also make sure each page of our websites only load the resources they need and nothing more.

One of the problems with most out-of-the-box premium WordPress themes is this lack of specificity. Since they’re designed to allow you to do anything on any page, they must load every script, stylesheet, and font you might potentially use.

So if your homepage has a rotating image slider, then every page will load that slider’s javascript files, their script dependencies, and their styles, even if those pages don’t have a slider. That can quickly add to a lot of wasted bandwidth, server processing time, and client memory usage.

After all, what’s the point of minifying documents when those resources shouldn’t be loaded in the first place? By writing a custom WordPress theme from scratch, we ensure that resources are only loaded on the pages that need them.

Is that it?

Honestly, there are countless ways to optimize a website depending on your needs. If your pages are constantly changing because of user activity, caching might not be your priority. If your content is text-heavy, minification can come after you design an efficient database. And for web apps focusing on high resolution media, the first concern should be finding a fast CDN.

Because we recognize the different needs and priorities of our clients, we create sites that cater to those needs. While this means we can’t white-label our WordPress themes for long-term income, it guarantees that we focus on our clients – the actual people – and not profits, technology, or fads.

An illustration of a hand gripping a bunch of pencils.

Like our chats?
Join our list.

KEEP GOING

June 15, 2022

Donating to causes | June 2022
Open it up
Open it up
KEEP GOING