Building Lightning-fast, Extensible Websites with Perch CMS

While WordPress might have the most users, an increasing number of designers and developers are beginning to explore alternatives. One solution that’s growing in popularity is Perch.

I run a web studio in Brighton in the UK dealing mainly with smaller projects. Perch has always been our CMS of choice. Now, with the introduction of Perch Runway and the imminent arrival of Perch Shop, it works for bigger projects too.

Perch is more expensive than open-source alternatives, and Perch Runway isn’t that much cheaper than the likes of Craft or ExpressionEngine. It has fewer plugins, and doesn’t (yet) have the community of a WordPress or a Drupal (though it does have a very active and supportive community, including very helpful support from the creators themselves). So what makes it such an attractive proposition?

Ease of Use

Like most designer/developer types, for years I built sites with WordPress. My work flow went something like this:

• download and setup WordPress
• install Bones
• spend the next x amount of time reverse engineering my design to make it work in WordPress.

Sound familiar?

(The process was always similar with Drupal, but you can replace Bones with something like Zen.)

Perch works differently. Themes are an alien concept in Perch. You build your templates with HTML, CSS and JS, as if it was a static site. Then add the Perch runtime:

<?php include('runtime.php');?>

Then you can replace editable regions with simple PHP tags and you’re away. So, at the most basic level, here’s a before and after:

Once you’ve made these changes, you can assign an HTML template to the region you’ve just created (‘Main content’). In the above example, we’d probably just want a predefined text block template. Once that’s done, and you’ve input your content, the HTML rendered in the browser is exactly the same as your original HTML file. No surprise tags, classes, scripts or meta data.

Configurable

The above example is a little unrealistic, though. Let’s say our site has a carousel of images, and our HTML needs to look something like this:

<ul class="carousel">
    <li>
        <img src="img_1.jpg" alt="Brighton Beach" />
        <h2>My local Beach</h2>
    </li>
    <li>
        <img src="img_2.jpg" alt="Aeropress" />
        <h2>My Coffee Maker</h2>
    </li>
    <li>
        <img src="img_3.jpg" alt="Hugo and Jude" />
        <h2>My Children</h2>
    </li>
</ul>

In WordPress, we’d either hunt down and reverse engineer an existing plugin, or spend half an hour building a custom post type. In Drupal, we’d maybe use Views. But Perch works differently.

In this example, we’d add a region to our page:

<?php perch_content('Carousel'); ?>

We’d then make our own template, using exactly the HTML we require, and replacing the bits that are editable with easy-to-read Perch tags. So, in its most simple form, the above example would become:

<perch:before>
<ul class="carousel">
</perch:before>
    <li>
        <img src="<perch:content type="image" id="image" label="Image" />" alt="<perch:content type="text" id="alt" label="Description" />" />
        <h2><perch:content type="text" id="title" label="Image Title" /></h2>
    </li>
<perch:after>
</ul>
</perch:after>

Once we’ve input the relevant content into Perch, the HTML rendered is exactly the same as our original.

The ability to create new regions and templates on the fly makes building HTML components quick and easy. Those coming from a developer background can also be reassured that these clean and well structured HTML files are mirrored in the database—but more on that later.

Lightning-fast

Unless you’ve been sitting under a Drupal shaped bus for the past few years, you’ll know that performance is now a big deal. Google cares, and users care, so you should care too. If implementing a carousel involves installing three plugins or modules or whatever they’re called in your CMS of choice, that is going to affect load times, and it’s going to affect how much your audience (humans and robots) like you.

There’s none of that bloat with Perch. And changes made earlier this year mean that Perch sends those crucial first bytes of data faster than any other CMS I’ve ever worked with, including entirely bespoke ones I’ve painstakingly (and in hindsight foolishly) crafted myself.

Let’s put some numbers on this. We recently published a site for a tech company in the UK. The home page loads two different partials (one for the header and one for the footer), it has a carousel and six different editable regions. There’s no caching, or any other clever business like that, and the TTFB is around 50ms:

Extensible

Calling Perch a “CMS” is a bit of fib, to be honest. The content management part is fine, but it’s the system bit I take issue with. Perch is more of a content management toolkit. It stores data for you in a logical structure, and then allows you to do what you like with it.

Let’s take the above example. What if we want to be a bit more adventurous, and a simple list of files doesn’t quite suffice. Let’s say we want our gallery as a JSON file? That’s simple enough with a few tweaks from the ever helpful docs and a new template:

<perch:before>{</perch:before>
    [
    {"image":"<perch:content type="image" id="image" label="Image" jsonencode="true" />",
    "description":"<perch:content type="text" id="alt" label="Description" jsonencode="true" />",
    "title":<perch:content type="text" id="title" label="Image Title" jsonencode="true" />
    <perch:if exists="perch_item_last">}]<perch:else />}],</perch:if>
<perch:after>}</perch:after>

Or what if we just want the content as an array? Or want to filter only the images of my mischievous children? Or get the one most recent item?

All these tasks are super simple with Perch. Instead of using perch_content() on our page, we just need to use perch_content_custom()—which takes an array of options, allowing us to filter and manipulate the content stored by Perch.

Perch Runway

As mentioned, Perch really shines on small to medium projects. Being based on a file system, it’s not ideal for very large projects. That’s where its bigger sibling, Perch Runway, comes in.

In my head, Runway sits alongside CMSs like Craft and ExpressionEngine. It has high-spec features like Varnish and CDN support, Cloud storage, collections (similar to ExpressionEngine “channels” or “section” in Craft), and it has dynamic routing—which is pretty essential once you get beyond a small number of pages on a site.

Back when I was working with ExpressionEngine, I ended up using lots of third-party add-ons, which always felt strange and gave me the heebie-geebies. With Perch, the first-party add-ons are almost always enough; and if not, building a Perch app yourself really isn’t that daunting.

For studios like mine that work on small and large projects, the combination of Perch and Perch Runway means we only have to master one tool, whatever the problem. That’s the USP for me. Just as I wouldn’t want to switch code editors depending on a project’s size, I don’t want to have switch CMSs for the same reason.

One More Thing …

In the course of this article, I’ve barely mentioned the CMS itself. It’s well structured, fast and easy to use. In five years, I think I’ve written one manual (for a client who really shouldn’t be allowed near a computer). In the words of a recent client—

The CMS is an absolute dream! I don’t think I gave it or you enough love when I first saw it. It is incredible.

Clients love the CMS. Developers love the performance. Front-enders love that it doesn’t screw their HTML. All in all, Perch is terrific.

If you have any questions about Perch, or experiences to share, please post a comment below.