Want a Lightning-Fast Web Design? Pick the Right CMS

Your CMS Can Have a Profound Effect on Page Speed

If you didn’t build your own site, you’re likely using a content management system (CMS) that your web builder chose. If he or she didn’t educate you on the pros and cons, you may be in for a big surprise in your webpages’ performance and search engine rankings.

What is a CMS

The technical definition for a content management system (CMS) is “is a computer software program used to manage the creation and modification of digital content.” (1)

A CMS consists, typically, of two components. The first is the application interface, which allows a user the means to design and add content with limited to no coding experience. The second is the builder or content delivery application (CDA), which converts the content into code that a web browser can use to build the page.  

To make this easier to understand, I use a simple metaphor of an architect, contractor, and warehouse. In this metaphor, the architect creates a set of blueprints that they give to the contractor. The contractor takes those blueprints, assembles his or her team, and pulls everything they need from the warehouse to complete the build.

This metaphor illustrates the three key elements of a CMS. Now, I want to add a few new concepts to this metaphor to illustrate how a CMS actually works when creating a website.

First, the architect has a specialty or theme to their design. In this metaphor, we will use a house as an example. There are myriad options within a house, for example, flooring, tile, window size, etc.  

Next, the contractor doesn’t see the blueprint before showing up at the site to build the house. The contractor knows he or she is building a home, but other than that, it’s left open. Therefore, they have to bring all the labor and materials they might use, even if they aren’t needed in this specific build.

Once at the site, the contract reads the blueprints and then has to sort through and organize their materials first before the job can start.

To translate this back into the CMS components. The content management systems’ theme is the blueprint template in terms of HTML and CSS that the front-end user customizes. While HTML and CSS are not technically coding languages, manipulating them requires some coding knowledge.  

The front-end interface uploads any materials into the data warehouse. However, the contractor still has to bring the whole template to the build because then, we, the CDA, know what to use.

As you can see, there is a trade-off between how much flexibility is afforded to the user/designer and the burden it puts on the builder. This is the cause of all the issues that can arise later, so it is an excellent concept to keep in mind throughout this post’s remainder.

Who are the Major CMS Providers?

The major CMS providers by market share may surprise you. All the top names are there, but WordPress is over seven times bigger than its next competitor, Wix (2).

Why Should I Care?

Sticking with the house building metaphor, if you are the homeowner, who is eager to move in, it’s a good idea to know how long it will take to build the house. This is why it is important to understand the impact your CMS choice will have on website design and user experience (UX). 

It is also important to understand where it is hosted. The hosting is the warehouse in our metaphor. If the warehouse is slow or far away, it can cause delays in getting the necessary materials to the location.

It’s also important to know the assets for your site are sized appropriately. Screen size varies across usage platforms. The design process will need this into account and make sure the design elements work across all platforms. One option is to choose a responsive design, which adjusts text and images and the overall visual design. 

For example, if you stored 40 ft. of wallpaper for a 10 ft. wall, it takes time to cut the paper to size. Just as a faux-finish is faster to install than a full finish, you’ll have to ask yourself, when you create visuals, if the quality of the image, etc., outweigh the time and cost to transport and install it. 

Convenience 

The significant advantage of a CMS is convenience. Users with little to no experience in web development can get a site live in minutes. Now, that site is likely to put a heavy burden on the contractor as the images are likely sized appropriately or optimized for speed, the hosting may be slow or shared, and the list goes on. 

Performance

The fundamental trade-off is performance in terms of speed. As mentioned, the contractor has a lot of heavy lifting to do, and that takes time. This is especially true on mobile. 

Not only does the contract have to build the house, but he or she also needs to figure out how to shrink it without affecting the user’s experience. UX design needs to be a part of the consideration set.

For example, a ten-room mansion will not fit on a 100 sq. ft. plot of land. Therefore, something must give either load times, user experience, and/or both. 

Aesthetics

According to BestDesigns, "original graphics make up 40% of all successful visual content that accomplishes marketing goals, but 43% of marketers struggle with the consistent production of captivating visuals." Whenever you use a theme, you are using a non-original graphic design. No matter how customized a theme is, many of the design elements remain the same. For example, the grid pattern used, navigation layout, footer, and the list goes on. They often offer, templates for pages, which may be seen as benefit in saving you time. However, by doing so, your design begins to lose originality.

How Do You Choose the Right One?

When it comes to CMS providers, I’ve used all of the top five mentioned above. There are some differences in ease of use, flexibility, design aesthetic, and e-commerce. 

• WordPress is best supported, given its market share. Most developers write to it when it comes to plug-in and features. 
• Squarespace tends to have much more modern and visually appealing themes. 
• Joomla! has a longer learning curve, but not by a significant amount. 
• Shopify is built solely for e-commerce and includes all the necessary features upfront.

However, no matter which you chose, you will have to deal with the one fundamental problem with CMS systems, mobile. Mobile is now the number used device globally. Therefore, it cannot be simply ignored or handled solely with a responsive or interactive design. 

Without taking any action, your performance on mobile will likely fall in the 20s to 40s on Google PageSpeed Insights. They rank 0-49 as poor, 50-89 as needs improvement, and 90+ as good. Google is a hard grader, but since they made the rules for search, it is probably a good idea to follow what they say. 

With a slow speed on mobile, the target audience will likely bounce if it takes more than 3 to 4 seconds to load.

The Options to Deal with Mobile

The four common options are: plug-ins, AMP, custom, clean-up.

Plug-ins

For this interest of time, I will focus on WordPress as they are the dominant market player. There are several plug-ins for WordPress, namely W3 Total Cache, WP-Optimize, JetPack, and Smush, which all have over a million installs.

Pros

• Simple, except for W3 total cache, which is not
• A measurable difference in speed

Cons

• For the maximum benefit, you will need to pay a subscription fee.
• While measurable, it has been our experience that instead of being in the 20s-40s, you might hit the 50s, maybe 60s on Google PageSpeed insights.

AMP

Accelerated Mobile Pages was introduced by Google in and around 2016. AMP is an open-sourced platform that is akin to a prefab house, going back to our earlier metaphor. 

It has fewer features but is easier for the contractor to put together. It does not have the same look, but it is functional and livable.

The news sites are great examples of non-AMP desktop with AMP mobile:

Pros

• Superfast. AMP provides the fastest experience available for mobile

Cons

• Need to upkeep two sites
• The loss of consistency between mobile and desktop
• While the platform is free, you will likely need help in creating your AMP daughter site. The number of restricted functionality is significant.
• AMP is headless, so you can lose a lot of tracking data that requires a header to transfer information.

Custom Build

These are sites built by web designers. They are built using just the code required to provide the web design effect you desire. With smart header management, you can achieve scores in the upper 80s on PageSpeed Insights.

Pros

• Fast performance without sacrificing quality
• Manage only one site. 
• No loss of header information because they are designed to be light, and therefore do not require AMP to achieve speeds comparable to AMP sites. This is subject to the caveat below. 

Cons

• Excessive header use can slow down the site. Google Tag Manager can help but not eliminate the header issue. It’s been our experience that only header less sites actually hit the 90s benchmark.
• Requires funding, but it is generally not more expensive than fixing mobile using the other non-plugin methods: AMP or theme optimization.

Theme Optimization

Theme optimization also requires a developer. He or she would physically remove the excess code from your theme. This requires significant coding knowledge to do it correctly.

Pros

• Same as custom

Cons.

• Same as custom but can be more expensive depending on the theme and platform used.

Summary

If you want a lightning-fast web design and site, a custom build is definitely worth a look.

1. Page Speed: The contract sees the blueprints before the build, so only the needed assets are used. Therefore, there is no bloated code.
2. One site: There is no daughter AMP site to ensure everything stays up to date.
3. Cost: Unless you are willing to settle for mediocre performance on mobile, you likely will be hiring a web design firm at some point. Investing in a developer, in the beginning saves both time and money in the end.

‍

References

(1) wikipaedia.org

(2) https://websitesetup.org/news/popular-cms/