October 10, 2019
Crumpets! Tea time! WordCamp London 2019 (yes, WC London was in May, so yes this post is very delayed, but better late than never, amirite?) was so fun – it was great meeting and catching up with so many awesome WordPress-ers! And, I know that organizing a WordCamp is no small feat so shoutout to all the organizers!
Pearly Kings and Queens Wapuu! Cute!
My major passion these days is the JAMstack, which is all about the potential of modern websites. So, I was thrilled to be able to speak about my fave topic at WordCamp London.
The term JAMstack was coined by Mathias Biilman, the co-founder of Netlify, to contrast more ‘modern’ approaches to web development with the LAMP stack we all know very well. JAMstack refers to the serverless, database-less stack comprised of Javascript, APIs and Markup.
Interest in the JAMstack is growing, and many feel that the JAMstack approach to web development, which in many ways is faster, more secure, and offers greater stability than the traditional stack, is the future of the web. But it also has many drawbacks and issues.
In my talk we looked at the JAMstack to understand what it is and what it offers, and to see the progression of approaches to web development, the pros and cons of the various methodologies, and where WordPress fits in with it all.
You can watch my full talk here (starts at 2hrs 2min):
In case you prefer reading, here’s a recap:
Circa 1999, websites consisted of HTML and CSS and it was pretty simple and we called them static websites. And it was the era of Geocities. If you miss it, you can still look through an archive. Oh the ugliness! Oh the nostalgia!
I even looked back at the first site I built for my web agency – which was static. It was easy to build but when we built static sites for clients, it was seriously problematic. Our clients would be all “Change my site. Add this comma”. That was obviously not a great way to work so I looked for a content management solution and started using WordPress, which let our clients edit their own sites, thank goodness.
A LAMP Stack consists of the Linux operating system, the Apache HTTP Server, the MySQL relational database management system, and the PHP programming language.
The browser requests. The PHP processes the request. The database is queried. Content appears on the page. Tada!
That worked for a while.
But you’ll never believe what happened next.
Websites got heavier. And heavier. And heavier!
Images. Lots and lots of images. And tracking codes. And Javascript.
Here’s a look at the increase of webpage size since 2015:
From March 2015 to 2018, median desktop webpage size increased by 25.8% and median mobile webpage size increased by 77.5%
And, if you look specifically at WordPress sites, they suffer from bloat even more:
Median desktop webpage size increased by 15% but notice that the median is way higher than the average webpage and median mobile webpage size increased by 28.6%.
So yeah, websites are heavy. And the LAMP stack and all its processing and querying certainly doesn’t help.
Lots of people are trying to find solutions to deal with this by using caching and speed-related plugins. Just take a look in the WordPress plugin repository, you’ll find pages and pages of plugins trying to help with this issue. But all these solutions are difficult to configure and can only get a site so far.
I’m referring to AMP, Google’s Accelerated Mobile Pages project that is trying to help websites load really fast on mobile.
But, in order to do that, AMP is pushing a new web format on people. But, do we really need to adopt yet another web format when the old web format is the standard and doing just fine? And the caching bit is not great – Google caches your site on THEIR servers and serves it up from there, which means you no longer have complete control over your valuable web property.
One of the things that I’ve always championed is owning your own content and not putting all your hard work into third-party services like social networks. Your website is the one place on the web that you can completely own and control.
But with AMP and Google’s caching, it’s no longer the case! I’m not the only one who feels this way about AMP – tens of web professionals put together a letter about Google AMP addressing these issues.
It’s better for the web if we find a different solution rather than allowing Google control our content. The web is not, and should not be, just Google. <rant over>
Every day another plugin needs to be patched due to security vulnerabilities. In fact, the majority of web hacks are due to outdated plugins. Hopefully you’re updating and patching quickly, otherwise you’re leaving a window of opportunity for hackers.
The vast majority of website owners and managers aren’t aware of the ongoing updates that need to be made to plugins or WordPress core, or are aware but aren’t updating because they think it’ll break their site, or lack the time and resources to take care of it.
Looking at the website hack report from Sucuri, WordPress has a scary 90% of hacks out of the sites that Sucuri scans and analyzes.
There are tons of WordPress security plugins out there, like Sucuri, trying to solve this problem, but from my experience, none have been totally successful in securing WordPress.
If you’re running a site and there’s a traffic peak or there’s a Ddos attack, it’s definitely a challenge to keep your site running quickly, or to even keep it up and running at all. It’s hard for most people to know how to handle these peaks of traffic. This shouldn’t be a barrier of entry. You should get excited about tons of traffic, not scared that it’ll take down your site.
JAMstack is a term created by Matt Billman, the founder of Netlify, because the term “static” doesn’t represent what a static site can do since it can have dynamic functionality, thanks to modern javascript, CSS, etc.
Netlify promotes the concept of developing websites that are basically just frontend. The site gets its content through APIs, its dynamic functionality via Javascript, and its content is presented using Markup.
I remember being so jealous when, a few years ago, Smashing Magazine migrated their site to Netlify to benefit from the JAMstack. Back then, there weren’t as many options as there are now. Even though it took them around two years to complete the migration, they made the case that it made their site faster and more secure, and was therefore worth it.
Vitaly, the founder of Smashing Magazine, said:
“With a proper CDN, full HTTP/2 support and service workers in place, last year we managed to beat the performance results we had so far. However, even with a fancy nginx build, the performance we could get with a pre-built website enhanced with JavaScript was nothing short of breathtaking. ”
Even though Smashing Magazine has a DevOps team dedicated to making their site fast and secure, they still couldn’t achieve the performance results that they got when they moved to a JAMstack, static site architecture.
Static site generators are platforms that allow you to create page templates and then run a build process that generates all the pages on your site.
There are tons of static site generators out there, with new ones popping up nearly every day. Netlify put together a directory of static site generators of 199+ options. PS you gotta love the names – CousCous, PieCrust2, Pretzel, etc. How to decide?!
Some of the most popular static site generators are Jekyll, Hugo, and Gatsby with Gatsby being the most popular right now.
Here are some services around static site generators that you can use to host your static website
Since static sites are…static, they need a way of handling dynamic functionality such as forms, comments, and search, which typically require communicating with a database. That’s where the API part of the equation comes into play. There are lots of amazing solutions out there, so you can really get all of the functionality you need from third-party solutions. We are so excited about all the options that we started putting together a directory of static-friendly tools and continuously add new ones.
Here are some examples:
Forms
There are lots of third-party form solutions that would work with a static site such as Formbackend, Wufoo, Typeform, etc.
Search
There are many static-friendly search solutions out there such as Algolia, Swiftype, and AddSearch that index your site and store the data on their servers.
Comments
For comments, you can use third-party services such as DIsqus or Facebook comments. There are also Open Source commenting platforms like Juvia that let you outsource commenting to an external system so that you don’t have to build your own.
JAMstack is the bee’s knees (in my humble opinion) but there’s definitely some challenges that might prevent people from adopting this approach:
WordPress has passed the threshold of powering over one third of the web. Go WordPress! WordPress consistently grows and there aren’t any CMSs that come close to WordPress’s growth.
CMS market share: a numbers analysis by Joost de Valk
But, WordPress is showing its age – and growth and interest are slowing down.
Many feel that they have to use WordPress because it meets many of their needs and therefore is still the best tool out there, while others, like Chris Earls, feel like they have to because there isn’t a great alternative at the moment 🤔.
(1/2) I finally accepted that WordPress has won when it comes to content management for most marketing websites. That may seem like stating the obvious, but I've observed and tried so many services and tools that are looking to unseat WordPress.
— Chris Earls (@cearls) March 20, 2019
(2/2) I've looked for every reason not to use it, but it's tough to beat WordPress' portability and extensibility. With that being said, I will continue to look for creative ways to use it by deploying static with services like @hardypress or as a headless CMS.
— Chris Earls (@cearls) March 20, 2019
So, the challenge we face is to see how to resolve the disadvantages of WordPress (slow, vulnerable, challenging to scale), and bring it into the modern web (fast, secure, scalable).
Here are a few options.
One way to make WordPress more modern is to use WordPress’s REST API, which turns WordPress content into an API, by sending and receiving JSON objects, which makes that content portable beyond WordPress.
One way to make use of the REST API is to go with a headless CMS approach, where WordPress would continue to be your Content Management System, and then the REST API would push the content through a frontend like React or Angular to an app or a CDN, or wherever you want.
This approach can be simply put as: API only. UI everything. Once it’s in an API format, you can do whatever you want with it.
If you use WordPress as a Headless CMS, a new project, Gatsby WordPress Themes, could save you tons of time by providing you with a Gatsby theme based on popular WordPress themes. This approach makes it easier to use WordPress to manage your site and Gatsby to deploy your site to a React front-end. There are a few simple themes so far, but there’s a lot of interest, so I think this may grow quickly.
There are two WordPress plugins that can help you generate a static version of your site: Simply static and WP2Static
WP2Static has been updated more recently and has more settings and options for where you can deploy your site to. The way it works is that you Install the plugin on a WordPress site in a subdomain or subdirectory or even locally, and then the plugin will deploy a static version of your site to your public-facing URL (www.mysite.com) via Netlify, S3, Github pages, FTP, etc.
Yet a third way to benefit from WordPress and JAMstack is to use a platform that will turn your WordPress site into a static site and put it on a serverless architecture, like Strattic. The way that this platform works is that you use your WordPress site as usual and then click a button which deploys a static version of your site (HTML, CSS, Javascript) to a CDN, making the static site pre-rendered and super-fast (everywhere).
This approach makes it easy to democratize publishing since it outputs the best version of a WordPress site without the need for a team of developers. All it takes is a click of a button and BAM! your public-facing site is now static. And, in the case of Strattic, you’d also get HTTP/2, Gzip, serverless forms, Algolia-integrated search, and ultimate security since there’s no database on the static site.
The world of JAMstack offers really exciting possibilities for bringing websites into the modern web which strives for fast, secure and scalable websites.
But what about our beloved CMS, WordPress?
Luckily, there are emerging JAMstack solutions for WordPress (Headless CMS + Gatsby themes, static site generator WordPress plugins, and static site generator platforms), that will bring it into the modern web era and be able to get all the benefits of the JAMstack.
By bridging the gap between JAMstack and WordPress, we can continue democratizing publishing through an open source platform.
Get the slides here
Miriam Schwab
Co-Founder & Head of Strattic
After years of dealing with the ongoing struggle of keeping client WordPress sites secure and performant (and not sleeping so soundly at night :)), she realized that these issues could be solved in a radical way by converting the sites to a static, headless architecture, and founded Strattic.
