Features

• Gatsby, like Jekyll and other static site generators, is built for this.
• Squarespace allows static content but doesn't allow it to be edited with the CMS.
• WordPress allows it with some customization.

• CDN-providing hosts like Netlify support sites built on Gatsby and other static frameworks
• WordPress allows this through plugins.
• Site builders like Squarespace usually come with a CDN out of the box.

• Gatsby, Jekyll, and WordPress all support this through plugins and starter kits.
• Squarespace supports this.

Gatsby supports content pre-fetching, out of the box. This means that when a page loads, the content needed to load the next link you click will be loaded in the background while you browse the page.

You can put this together in Jekyll. The situation is considerably more tricky for WordPress & requires maintaining dual PHP and JS templates.

Fingerprinting static resources that aren't expected to change lets browsers serve content locally when a user visits a page they've already been to, as opposed to making an extra network call.

Gatsby and Jekyll support this out of the box, while WordPress allows this via plugins and Squarespace doesn't allow it at all.

Progressive image loading means displaying a blurry placeholder image before loading the full heavyweight asset. This prevents the display from "bouncing around" as images load in addition to making the page feel complete before they have.

The most well-known implementation of this is on Medium-hosted blogs. Gatsby comes with this feature out of the box (demo at using-gatsby-image.gatsbyjs.org); it takes custom per-page code on other code-based platforms.

Responsive images enable modern browsers to load the right size of image assets given browser size -- that way users with high-resolution, large-screen devices can get a high-quality image while users on low-resolution or small-screen devices don't spend extra time waiting for the page to load when a low-resolution asset would suffice. Gatsby comes with this feature out of the box (demo at using-gatsby-image.gatsbyjs.org).

WordPress and Squarespace supports this out-of-the-box automatically, while Jekyll requires some customization.

There's two ways to get CSS on your web page -- inline it with your html, or load it on a separate page referenced in your html. If you reference CSS in a separate page, your client's browser will block page loading until it receives the CSS file. This can delay interactivity by 500ms (on a fast connection), to 3+ seconds on a slow connection.

Gatsby offers this out of the box; in other frameworks it is usually possible but requires a lot of custom code, often written on a per-page basis.

Google Fonts and other open-source font libraries are helpful in building beautiful sites. The hard part is what you don't see -- a page load blocking request to Google's servers. While this request is pretty fast, even faster is hosting fonts on your own server, so you can just load them from your local filesystem.

This is doable with WordPress and Jekyll; Gatsby open-sourced a library enabling this for Gatsby and other JavaScript-based apps; it's baked into the framework.

Serverless means not having to worry about security and framework upgrades. It means reduced ops -- you don't have to ssh into a live production server and see what's going on.

Hosted is not quite as good as serverless -- they still have a server you just don't see it.

If your site is built on open-source software, you can change your hosting provider; and customize to your heart's content.

If you use a site-builder, you're locked into a specific platform and a specific provider. If they don't offer a feature you need, your only option is to rebuild your site on a different platform. You also assume additional business risk that the platform goes out of business or moves in a direction different than you had hoped.

Gatsby is built on top of React, which uses a one-directional data binding system for its components. One-directional data flows are essential to building complex frontend components by removing complex cross-dependencies present in alternate data flow approaches, such as MVC.

React's one-directional data flow is a pattern, rather than a library, so you could in theory implement in PHP / WordPress, but there's no out-of-the-box solution.

Asset pipelines are the compilers of the web stack -- turning images and code in a variety of developer-friendly languages (SCSS, Less, CSS modules, templates, JSX, JS modules, ES7, ES6, TypeScript, Flow...) into minified, raw HTML, CSS and JS that browsers can parse.

Gatsby provides asset pipelining out of the box through its build system on top of Webpack and Babel. WordPress and Jekyll don't provide this, although you could set up your own. Squarespace has a limited and tightly controlled development environment (no local development) that doesn't allow for creating an asset pipeline.

• Syntactic sugar: arrow functions, destructuring, template strings, dynamic object property names.
• Language features: Classes, static variables, generators, async control flows like promises & async / await
• Data structures / types and modularity: Maps, sets, modules, module loading, unicode...