In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

3 Types of Content Management Systems to Consider in 2019: Traditional CMS vs Headless CMS vs Static Site Generators

3 Types of Content Management Systems to Consider in 2019: Traditional CMS vs Headless CMS vs Static Site Generators

by RADU SIMILEANU on Feb 26 2019

Kind of stuck here? One one hand, you have all those software development technologies that are gaining momentum these days —  API, serverless computing, microservices — while on the other hand, you have a bulky "wishlist" of functionalities and expectations from your future CMS.  So, what are those types of content management systems that will be relevant many years to come and that cover all your feature requirements?

And your list of expectations from this "ideal" enterprise-ready content infrastructure sure isn't a short one:

 

  • to enable you to build content-centric apps quick and easy
  • multi-languages support
  • user role management
  • a whole ecosystem of plugins
  • inline content editing
  • to be both user and developer friendly
  • personalization based on visitors' search history
  • to support business agility
  • search functions in site

     

... and so on.

Now, we've done our research.

We've weighed their pros and cons, their loads of pre-built features and plugins ecosystems, we've set them against their “rivaling” technologies and selected the 3 content management systems worth your attention in 2019:

 

But What Is a Content Management System (CMS)? A Brief Overview

To put it simply:

Everything that goes into your website's content —  from text to graphics — gets stored in a single system. This way, you get to manage your content — both written and graphical — from a single source.

With no need for you to write code or to create new pages. Convenience at its best.

 

1. Traditional CMS, One of the Popular Types of Content Management Systems

Take it as a... monolith. One containing and connecting the front-end and back-end of your website: both the database needed for your content and your website's presentation layer.

Now, just turn back the hands of time and try to remember the before-the-CMS “era”. Then, you would update your HTML pages manually, upload them on the website via FTP and so on...

Those were the “dark ages” of web development for any developer...

By comparison, the very reason why content management systems — like Drupal, WordPress, Joomla — have grown so popular so quickly is precisely this empowerment that they've “tempted” us with:

To have both the CMS and the website's design in one place; easy to manage, quick to update.

 

Main benefits:

 

  • your whole website database and front-end is served from a single storage system
  • they provide you with whole collections of themes and templates to craft your own presentation layer
  • quick and easy to manage all your content
  • there are large, active communities backing you up

     

Main drawbacks:

 

  • they do call for developers with hands-on experienced working with that a specific CMS
  • except for Drupal, with its heavy ecosystem of modules, content management systems generally don't scale well
  • they require more resources —  both time and budget — for further maintenance and enhancement

     

A traditional CMS solution would fit:

 

  • a small business' website
  • a website that you build... for yourself
  • an enterprise-level website

     

if and only if you do not need it to share content with other digital devices and platforms.

You get to set up your website and have it running in no time, then manage every aspect of it from a single storage system.

Note: although more often than not a traditional CMS is used to power a single website, many of these content infrastructures come with their own plugins that fit into multi-site scenarios or API access for sharing content with external apps.

 

2. Headless CMS (or API-First Pattern)

The headless CMS “movement” has empowered non-developers to create and edit content without having to get tangled up in the build's complexities, as well. Or worrying about the content presentation layer: how it's going to get displayed and what external system will be “consuming” it.

A brief definition would be:

A headless CMS has no presentation layer. It deals exclusively with the content, that it serves, as APIs, to external clients.

And it's those clients that will be fully responsible with the presentation layer.

Speaking of which, let me give you the most common examples of external clients using APIs content:

 

  • static page application (SPA)
  • client-side UI frameworks, like Vue.js or React
  • a Drupal website, a native mobile app, an IoT device
  • static site generators like Gatsby, Jekyll or Hugo

     

A traditional CMS vs headless CMS comparison in a few words would be:

The first one's a “monolith” solution for both the front-end and the back-end, whereas the second one deals with content only.

When opting for a headless CMS, one of the increasingly popular types of content management systems, you create/edit your website content and... that's it. It has no impact on the content presentation layer whatsoever.

And this can only translate as “unmatched flexibility”:

You can have your content displayed in as many ways and “consumed” by as many devices as possible.

 

Main benefits:

 

  • front-end developers will get to focus on the presentation layer only and worry less about how the content gets created/managed
  • content's served, as APIs, to any device
  • as a publisher, you get to focus on content only
  • it's front-end agnostic: you're free to use the framework/tools of choice for displaying it/serving it to the end-user

     

Main drawbacks:

 

  • no content preview 
  • you'd still need to develop your output: the CMS's “head”, the one “in charge” with displaying your content (whether it's a mobile app, a website, and so on)
  • additional upfront overhead: you'd need to integrate the front-end “head” with your CMS

     

In short: the headless CMS fits any scenario where you'd need to publish content on multiple platforms, all at once.

 

3. Static Site Generators (Or Static Builders)

Why are SSGs some of the future-proofed content management systems? 

Because they're the ideal intermediary between:

 

  • a modular CMS solution
  • a hand-coded HTML site

     

Now, if we are to briefly define it:

A static site generator will enable you to decouple the build phase of your website from its hosting via an JAMstack architectural pattern.

It takes in raw content and configures it (as JSON files, Markdown, YAML data structures), stores it in a “posts” or “content” folder and, templating an SSG engine (Hugo, Jekyll, Gatsby etc.), it generates a static HTML website with no need of a CMS.

How? By transpiling content into JSON blobs for the front-end system to use. A front-end system that can be any modern front-end workflow.

And that's the beauty and the main reason why static site generators still are, even after all these years, one of the most commonly used types of content management systems:

They easily integrate with React, for instance, and enable you to work with modern front-end development paradigms such as componentization and code splitting. 

They might be called “static”, yet since they're designed to integrate seamlessly with various front-end systems, they turn out to be surprisingly flexible and customizable.

 

Main benefits:

 

  • they're not specialized on a specific theme or database, so they can be easily adapted to a project's needs
  • Jamstack sites generally rely on a content delivery network for managing requests, which removes all performance, scaling and security limitations 
  • content and templates get version controlled with right out of the box (as opposed to the CMS-powered workflows)
  • since it uses templates, an SSG-based website is a modular one

     

And, in addition to their current strengths, SSGs seem to be securing their position among the most popular types of content management systems of the future with their 2 emerging new features:

 

  • the improvement of their interface for non-developers (joining the “empower the non-technical user” movement that the headless CMS has embraced); a user-friendly GUI is sure to future-proof their popularity
  • the integrated serverless functions; by connecting your JAMstack website with third-party services and APIs, you get to go beyond its static limitation and turbocharge it with dynamic functionality 

     

To sum up: since they enable you to get your website up and running in no time and to easily integrate it with modern front-end frameworks like Vue and React, static site generators are those types of content management systems of the future.

The END!

What do you think now? Which one of these CMS solutions manages to check off most of the feature and functionality requirements on your wishlist?

Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

7 Ways that You Can Reduce Image Size on a Large-Scale Drupal Site, With a Lot of Images
Images can make or... break the user experience. Especially if we're talking about large amounts of images. So, what are your best options to reduce image size on a large-scale Drupal 8 site? And, most importantly: How do you strike a balance between the smallest file size and the best possible image quality? Well, just keep on reading... Here are 7 ways that you can manage image compression on your image-heavy Drupal site without affecting their quality: 1. Use a PNG Optimizer to Reduce Image File Size Let's say that you have a lot of PNG images on your Drupal website. How do you reduce the image file size? Simple: you use TinyPNG to... squeeze them. Expect to reduce them somewhere around 60% (while keeping the lossless image quality). 2. Use a JPEG Compressor to... Compress Your Images Server-Side  "How to make images load faster on my website?" Just use a compressor to reduce image size for your JPG and JPEG files: TinyJPG CompressJPEG Compress Now JPEGOptim It will take... a while, especially since we're talking about an image-heavy Drupal site. Different JPG files mean different settings for you to... play with till you've balanced out size and quality. 3. How to Improve Image Load Times: Use Drupal 8 Image Styles It's a tool that you get... out of the box. And what you gain is more control over the size of the images on your website: Set several image styles, of different sizes, that will go on various areas of a page. Good to know! Configure your image styles just once: from then on, they'll resize all your new images by default. Here's how you do it: Go to "Manage display", in the content type setup section Click the gear wheel icon next to the image field to open the settings tab and choose an image style There, you can either choose one of the previously configured image styles or... create a new one, by selecting the "Configure Image Style" option from the dropdown menu Source: Drupal.org          Good to know! Once you've set your image style, the module updates all the created images... automatically. 4. Use Drupal 8 Image Toolkit to Adjust Their Quality (And Their Size) It's the best way to resize images in Drupal 8. And the easiest way, as well: Go to Admin > Configuration > Media > Image Toolkit Choose the setting that allows you to compress your images (the JPEG quality field) Play with it till your strike the perfect size-quality balance Save the new settings Note! The new setting will apply to all your images; there's no way for you to adjust the quality for each image, one by one. Tip! Stick to somewhere between 60% and 80% when setting the image quality. 5. Use the Responsive Images Module to Resize Your Images  "Which module is used for image optimization?" Which is the best Drupal 8 module to reduce image size on pages that contain lots of images... Responsive Images is (but) one of them. Here's how it works: Its image formatter maps the breakpoint of the original image and renders a responsive image instead. All that by using an HTML5 picture tag (that has sizes and srcset attributes). It basically enables browsers to select the image to display according to the image style selections. And here's how you set up responsive images on your Drupal 8 website: Enable the module (for, even if it's a core module, it's not enabled by default) in Admin > Configuration Select "Responsive Image" Hit "Install" What about breakpoints? How do you set them up? Go to your editor (if it's a custom theme that you're using) Create a file named "yourthemename.breakpoints.yml" in your theme directory ("/themes/custom/yourthemename") Now, its time to configure the image styles for your responsive images: Different breakpoints call for... different image sizes.  Go ahead and pair each breakpoint that you set up at your_theme_name.breakpoints.yml with an image style and create your responsive image styles. 6. Use the ImageMagick Module to Reduce Image Size   "How do I manage compression on my image-heavy Drupal site?" You use ImageMagick. It's another one of your best options for Drupal 8 image resize. Here's why: Drupal might provide the GD2 image manipulation toolkit out of the box and enable you to set multiple alternatives, of different sizes, for the same image. Yet, it lacks some key features, such as... TIFF format support or GIF support with an image style. And this is where the ImageMagick module comes in handy. To install it, just run this command: Composer require 'drupal/imagemagick' And here's how you use it to reduce image size: enable it via ‘yoursite/ path set the quality for your image to 100% in the ImageMagick image toolkit The results? you've just enabled the GIT format support with image style you've reduced your image size by 20-40% Mission accomplished... 7. If It's Still Not Enough, Lazy Load Your Images  "How to load images faster?" Use the Lazy Loader, the ultimate Drupal 8 image optimization solution. Have you tried them all — all the dedicated modules and Drupal core features available — and you're still not satisfied with how fast your image-heavy pages load? Then go even further and incorporate a lazy loading functionality into your website. The END! But maybe you have better things to do — a business strategy to improve, urgent projects to work on — than finding and implementing the best solution to reduce image size on your Drupal website. Yet, you still want to make your pages load faster... So, just pass on the "burden" to us! We'll identify the best solution for speeding things up on your image-heavy web pages and... implement it for you sitewide. Image by Alexandra_Koch from Pixabay   ... Read more
Silviu Serdaru / Jul 23'2020
Drupal Performance Optimization: 17 Drupal Caching Best Practices To Speed Up Your Page Load Time- Part 2
"How can I make my Drupal 8 website faster?" Are you still struggling with this? Still striving to figure out which are the best (and most straightforward) Drupal performance optimization techniques for your website? Well, here I am today with a handful of 9 more ways that you can speed up your Drupal site. In addition to the 8 ones that I covered in the first part of this post. And yes: it's another round of Drupal caching best practices that'll help you boost your page load time. So, let's dive right into it: Tip #9: Use the Dynamic Page Cache Module  ... to cache for both authenticated and anonymous users. Unlike the Internal Page Cache module, that I mentioned in Part 1, which only caches pages for anonymous users. Tip #10: Use Distributed Cache, A Highly Effective Drupal Performance Optimization Technique But how does it work, more precisely? Once you've installed a distributed cache, it'll store your database's cache tables (Drupal's "cache_" tables) either in: file or memory Tip #11: Enable Drupal Cache for Anonymous Users Another one of those quick, yet powerful Drupal performance tuning steps that you can take. Tip #12: Use Squid to Cache Images and Static Content on Your Website "How to optimize Drupal for better performance?" You could go for Squid, an open-source caching proxy server. Now, since Drupal's already famed for its particularly dynamic content, the only cases where Squid does make a great performance booster are those where you need to cache static content. Tip #13: Add a Front-End Cache (i.e.Varnish Cache) Here's another handy Drupal performance optimization method for you: Use Varnish Cache to reduce the load on your server. How does it do it? It stores the HTML response, so that next time that the same page is requested, it serves it from memory. The result? Bypassed PHP and web server and... improved page load time. Tip #14: Use the Advanced CSS/JS Aggregation Module to Improve the Front-End Performance of Your Website  Combining your assets together is one of the most straightforward and effective ways to address those Drupal performance issues on your website. From: file grouping to caching to compressing ... the AdvAgg module handles all the steps that you need to take to aggregate your CSS and JS files. Tip #15: Install Memcache to Reduce Your Database Load You know how you're often struggling with keeping your database load to a minimum by caching database objects in RAM? In this respect, Memcache makes a great Drupal 8 performance optimization technique. It helps you reduce that load on the database and boost your page loading time. How? By taking standard caches out of the database. And by caching the results of resource-intensive database operations... Tip #16: Use the Entity Cache Module to Cache... Entities   Another caching best practice to boost Drupal 8 with is installing the Entity Cache module.  And its name says it all: it helps you cache entities. Tip #17: Cache Views  Here's the situation: Page requests made by registered users on your website lead to loads of queries to your database. Which impact the page load time. Now, to query the database, views are being used. And this is where this views caching module comes in handy to... boost things in there.   The END! These are our 17 recommendations for you on the best Drupal performance optimization methods for boosting your page load time. Not thrilled about the idea of having to go through the... Memcache installation process or to configure Varnish for Drupal? Or to put your current projects on hold so that your team can set up a... distributed cache? Maybe you don't have a professional Drupal maintenance team that could handle all these caching settings? We're here to help! Just drop us a line and let's figure out which of these 17 techniques are best suited for your website and the specific performance issues that it's struggling with. Let's speed things up in there! Image by Izwar Muis from Pixabay   ... Read more
Silviu Serdaru / Jun 23'2020
Drupal Performance Optimization: 17 Drupal Caching Best Practices To Speed Up Your Page Load Time- Part 1
"Why is my Drupal site so slow?" "How do I speed up my Drupal website performance?" In other words, what Drupal performance optimization techniques should you use? Which is the: most budget-friendly quickest most straightforward most effective ... solution to those Drupal performance issues that are slowing down your website? Caching... And luckily, Drupal 8 (it is a Drupal 8 website that you have, isn't it?) "spoils" you with one of the most advanced caching systems out there. The trick is that you follow the Drupal caching best practices and use it to its full potential. Speaking of which, here's a list of 17 such best practices: * I'll be covering 8 of them in this post, leaving the 9 remaining ones for the next blog post. But First: What Is Caching? "What is the purpose of caching?" "How does caching improve performance?"  2 legitimate questions that you might be yourself right now. Let me start by defining the Drupal caching process: Once a user accesses a page on your website, content elements and web data from that specific page (images, HTML, CSS, etc.) get stored in an accessible space. When that user visits the same web page again, your website will serve him/her the cached version of the content.  That if you haven't updated it since his/her last visit, of course... And this translates into: reduced bandwidth faster page loads Tip #1: Use the Internal Page Cache Module to Cache Pages for Anonymous Users   Say you have an "Add to cart" functionality for anonymous users on your eCommerce website. You can use this module to cache precisely this functionality. A Drupal performance optimization tweak that'll take you less than a minute to set up. Tip #2: Go for the Best Suited Tools for Heavy Traffic Drupal Sites Say you have a fairly busy Drupal 8 website. You've turned on caching in your performance settings, but... you haven't noticed any significant impact on your site's loading speed. So, you need to bring in the heavy artillery. To use powerful caching tools designed for high traffic websites. Here are some of the best tools and optimization techniques to try: switch to a Drupal-specialized hosting provider like Pantheon or Acquia move your database to its own VM/container (that if you still have it running locally, on your Drupal web server) upgrade to PHP 7.1.0 Enable OPcache via php.ini.  Put a proxy (i.e. Nginx) in front of your server Tip #3: Enable Block Cache - A Quick and Easy Drupal Performance Optimization Solution How to increase Drupal 8 performance? You cache those blocks that don't get updated frequently (like from one user to another). Tip #4: Use Views Content Cache to Update Upon Content Changes Only How does this Drupal module help you optimize your website for better performance? It allows you to expire views caches every time you update or remove content. The great thing about this caching method is that you get to cache blocks that appear on thousands of pages. Tip #5: Use a Content Delivery Network By far the most powerful Drupal performance optimization solution for your website. Why? Here are the 2 strongest reasons why you'd want to use a CDN to cache the static content (files, CSS, images, JS, fonts...) on your website: you keep the network delay to a minimum since your CDN has endpoints across the globe you get a better page loading time: your CDN has a domain different from your website's, so web browsers load content requests to your domain in parallel with the content coming from the CDN Tip #6: Set a Far Future Expiration Date for Your Static Assets Set up a "Newer expire" policy for your static components (e.g. use a far future Expires header) Tip #7: Use Redis as a Drupal Performance Optimization Technique to Store Large Amounts of Data Data that wouldn't fit into your server. "But what is Redis?" you ask? An in-memory store optimized for high-performance. Tip #8: Set the Maximum Time that Your Pages Can Remain Cached Another one of the Drupal caching best practices is setting the maximum amount of time that browsers should keep your cached data. The END of Part 1! And these are but 8 Drupal performance optimization solutions focused on caching. I have a whole list of 17 tips ready to share with you... So, stay tuned for another round of simple and effective caching techniques that'll help you speed up your website... But what if you don't have the time or the people in your team that you could assign tasks like: enable a block cache set up Redis  install the... views_content_cache module ...?  What if you could have a dedicated Drupal maintenance team implement all these performance optimization techniques on your website for you? We're ready to help you speed things up on your website. Drop us a line and let's set up the best caching strategy for your Drupal website. Image by mohamed Hassan from Pixabay   ... Read more
Silviu Serdaru / Jun 19'2020