For a project I was recently working on, the requirement was to use WordPress as the site's backend. Content management, blog posts, and media were all handled through the WordPress admin. The frontend was open: it could be a theme, a template, or something customized through Elementor.

I could've built the same result in Elementor, but the process would've been slower and harder to maintain. Drag-and-drop works until the design gets specific, and then every small tweak costs more time than it should.

As a full stack developer, writing code turned out to be faster for me and produced cleaner output. Tools like Claude Code make the iteration cycle even tighter. So I kept the requirement – WordPress as the backend – and decided to build the frontend separately in code.

I wanted to share how I did this so that, if you're facing similar requirements, you'll know the way forward.

By the end of this tutorial, you'll have:

• A WordPress install serving content through its REST API on a subdomain

• An Astro SSR frontend rendering the content on the root domain

• A Cloudflare Pages deployment triggered on every git push

• Security hardening for a headless WordPress setup

• Draft post preview working across both systems

Prerequisites: You should be comfortable with the command line, have basic familiarity with WordPress admin, and know enough JavaScript to read and write simple functions.

To follow along, you'll need a WordPress installation, a GitHub account, and a Cloudflare account.

Table of Contents

• Why Headless WordPress?

• The Architecture

• Why Astro?

• Infrastructure Setup

  • Step 1: Move DNS to Cloudflare

  • Step 2: Create the CMS Subdomain

• WordPress Configuration

  • Tell WordPress it Lives on the Subdomain

  • Must-Use Plugin: Redirect and Preview

  • Clean Up Plugins

• The Astro Frontend

  • astro.config.mjs

  • .env

  • src/lib/wordpress.js

  • src/middleware.js

  • src/layouts/Layout.astro

  • src/pages/blog/index.astro

  • src/pages/blog/[slug].astro

  • src/pages/sitemap.xml.ts

  • src/styles/global.css

• CI/CD with Cloudflare Pages

• Final Thoughts

• Good to Know

Why Headless WordPress?

Headless WordPress separates content management from content delivery. WordPress keeps doing what it handles well: storing content and giving editors a familiar admin interface. A separate frontend handles rendering, routing, and performance.

A few situations where this split pays off:

• Your content team is trained on WordPress and moving them elsewhere would slow everyone down. Headless preserves their workflow and gives you a modern frontend.

• Your site needs a design or interaction pattern that a WordPress theme or page builder struggles to deliver. Custom dashboards, interactive tools, data-driven layouts, or integrations with non-WordPress APIs all fit here.

• You want edge delivery and modern tooling without rebuilding content management from scratch. WordPress handles content and media well. A JavaScript frontend on a CDN handles delivery well. Headless lets each side do its job.

• You need the same content across multiple surfaces. One WordPress install feeds a marketing site, a mobile app, and an internal dashboard through the same REST API.

Headless is not a fit for every site. Skip it if your site is a simple brochure, if one person does everything in the admin, or if you have no developer time to maintain a second codebase. A regular WordPress theme is the better answer there.

The Architecture

The term "headless" means you strip WordPress of its frontend responsibility. Instead of WordPress generating and serving HTML pages to visitors, it only stores and serves content through its REST API. A separate frontend framework, in this case Astro, handles what the visitor actually sees.

When a visitor loads a page, the request hits Cloudflare Pages, which runs the Astro server. Astro fetches the relevant content from WordPress via the REST API, builds the HTML, and returns it to the visitor. WordPress never touches the visitor's browser.

Content editors log into the WordPress admin at the CMS subdomain. They write, publish, and manage content as they normally would. The moment they publish, the content is live. There's no rebuild step because Astro fetches fresh data on every request.

The REST API has been built into WordPress since version 4.7. You don't need a GraphQL plugin, a paid headless CMS service, or any extra infrastructure.

Why Astro?

You could use Next.js, Nuxt, or SvelteKit here as well. But I chose Astro because its defaults fit this use case.

Astro compiles components to plain HTML and ships zero JavaScript to the browser by default. You only add client-side JavaScript where you explicitly need it.

For a CMS-driven site, most pages need none. SSR mode means every request fetches fresh data from WordPress at runtime, so content changes go live immediately without a rebuild. Cloudflare has an official adapter that handles the build output. Tailwind v4 integrates through a Vite plugin with no config file needed.

If WordPress wasn't a requirement, I would have used Next.js with Payload CMS. Payload gives you a fully typed CMS built in TypeScript that sits inside the same Next.js project, with more control over your content schema from day one. But the requirement was WordPress, and for a WordPress REST API frontend, Astro is the faster and cleaner choice.

Infrastructure Setup

Here's my setup: domain at Namecheap, WordPress on Hostinger shared hosting, and a Google Workspace email. The steps below apply to any host, whether shared hosting with cPanel or hPanel, a VPS with Apache or Nginx, or a self-managed server.

Step 1: Move DNS to Cloudflare

First, you'll need to move your domain's nameservers to Cloudflare. This gives you free DDoS protection, SSL, and the ability to attach a custom domain to Cloudflare Pages.

Before switching, verify that all DNS records transferred correctly, including your website A or CNAME records. For email, get your MX, SPF, DKIM, and DMARC values from your email provider's admin panel and add them to Cloudflare DNS first, otherwise email breaks during propagation.

Step 2: Create the CMS Subdomain

Move WordPress to cms.yourdomain.com so the root domain is free for Astro. In Cloudflare DNS, add an A record pointing cms at your server IP, or a CNAME if your host uses a CDN hostname. Then create the subdomain in your hosting panel pointing to the same WordPress directory.

One thing people miss: your server needs its own SSL certificate for the connection between Cloudflare and your origin to work. Cloudflare handles SSL at its edge, but if the origin has no certificate, you get a 525 error.

On Hostinger, this isn't automatic for new subdomains. Install it manually through hPanel. On cPanel, use Let's Encrypt. On a VPS, use Certbot.

Moving WordPress off the root domain also means /wp-admin no longer exists at your main domain, which reduces exposure. But the default login path is still /wp-admin on the subdomain. That is the first thing you should change — more on this in the Good to Know section at the end.

WordPress Configuration

Tell WordPress it Lives on the Subdomain

In wp-config.php, before the "That's all, stop editing!" comment:

define('WP_HOME',    'https://cms.yourdomain.com');
define('WP_SITEURL', 'https://cms.yourdomain.com');

WordPress admin is now at cms.yourdomain.com/wp-admin. The old path at the root domain stops working. That's intentional.

Must-Use Plugin: Redirect and Preview

WordPress has a folder called mu-plugins inside wp-content. Files placed there are treated as must-use plugins. They load automatically on every request, before regular plugins, and there is no way to activate or deactivate them through the admin UI. This makes them the right place for behaviour you never want accidentally turned off.

Create wp-content/mu-plugins/headless-redirect.php:

<?php
/*
Plugin Name: Headless Redirect
Description: Redirects frontend visitors to the Astro site and rewires the WordPress preview link.
*/

add_action('template_redirect', function() {
    if (is_user_logged_in()) return;
    if ($_SERVER['HTTP_HOST'] === 'cms.yourdomain.com') {
        wp_redirect('https://yourdomain.com', 302);
        exit;
    }
});

add_filter('preview_post_link', function(\(link, \)post) {
    $token = HEADLESS_PREVIEW_SECRET;
    \(type  = \)post->post_type;
    return 'https://yourdomain.com/preview?type=' . \(type . '&id=' . \)post->ID . '&token=' . $token;
}, 10, 2);

The template_redirect action fires when WordPress is about to render a page. If the visitor isn't logged in and the request is on the CMS subdomain, it redirects them to the main frontend. Logged-in editors pass through to the admin normally. REST API requests to /wp-json/... don't go through template_redirect at all, so they are unaffected.

The preview_post_link filter changes what happens when an editor clicks Preview on a draft post. By default, WordPress previews using its own theme, which in a headless setup renders blank.

This filter replaces that URL with a request to your Astro /preview page, passing the post ID, post type, and a secret token. Your Astro preview page uses those values to fetch the draft via the REST API and renders it exactly as it would appear live.

Clean Up Plugins

Now it's time to remove everything that renders the frontend: page builders, caching plugins, and hosting onboarding plugins.

But you'll want to keep Akismet, Wordfence, and Yoast SEO. Yoast adds SEO meta and Open Graph data directly to the REST API response, which your Astro pages read through post.yoast_head_json.

Then switch the active theme to a lightweight default. WordPress requires one active, but nobody sees it.

The Astro Frontend

Start with pnpm create astro@latest, then install the Cloudflare adapter and Tailwind:

pnpm add @astrojs/cloudflare
pnpm add -D @tailwindcss/vite tailwindcss

astro.config.mjs

import { defineConfig } from 'astro/config'
import cloudflare from '@astrojs/cloudflare'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  output: 'server',
  adapter: cloudflare({ imageService: 'passthrough' }),
  vite: { plugins: [tailwindcss()] },
})

output: 'server' puts Astro into full SSR mode. Without it, Astro pre-renders pages at build time, which breaks dynamic routes like /blog/[slug] that depend on WordPress content that didn't exist at build time.

imageService: 'passthrough' is required specifically for Cloudflare Workers. Astro's default image service uses Sharp, which depends on child_process and fs. Those Node.js built-ins don't exist in the Cloudflare Workers runtime. The deployment fails with a module resolution error. Setting passthrough skips image processing entirely and renders standard <img> tags instead.

.env

WORDPRESS_API_URL=https://cms.yourdomain.com

Add this same variable in Cloudflare Pages project settings under Environment Variables before deploying.

src/lib/wordpress.js

This file is the single place all WordPress API calls go through. Centralising them means if the API URL or authentication changes, you update one file.

The _embed parameter is important. By default, a post response only includes the post data. Featured images, author details, and categories are separate entities with their own IDs. Without _embed, you would need additional API requests to fetch each one. Adding it inlines all that related data into the same response.

cache: 'no-store' on every fetch call is not optional. Cloudflare Workers runs a fetch cache internally that's separate from HTTP Cache-Control headers. Without disabling it, Cloudflare caches your WordPress API responses at the edge. An editor publishes a post and sees the old version on the frontend because the cached response is being served.

const WP_URL = import.meta.env.WORDPRESS_API_URL

const fetchWP = (path) =>
  fetch(`\({WP_URL}\){path}`, { cache: 'no-store' }).then((r) => r.json())

export const getPosts = (page = 1, perPage = 10) =>
  fetchWP(`/wp-json/wp/v2/posts?_embed&per_page=\({perPage}&page=\){page}`)

export const getPostBySlug = async (slug) => {
  const posts = await fetchWP(`/wp-json/wp/v2/posts?_embed&slug=${slug}`)
  return posts[0]
}

export const getCategories = () =>
  fetchWP(`/wp-json/wp/v2/categories`)

export const getPostsByCategory = (categoryId, page = 1) =>
  fetchWP(`/wp-json/wp/v2/posts?_embed&categories=\({categoryId}&page=\){page}`)

export const getAllPostsForSitemap = () =>
  fetchWP(`/wp-json/wp/v2/posts?_fields=slug,modified&per_page=100`)

The sitemap function uses _fields instead of _embed to fetch only the fields it needs, keeping that request lightweight.

src/middleware.js

Middleware runs on every request before the page handler. This one adds Cache-Control: no-store to every SSR response so Cloudflare doesn't cache the rendered HTML pages.

export function onRequest(_context, next) {
  return next().then(response => {
    const newResponse = new Response(response.body, response)
    newResponse.headers.set('Cache-Control', 'no-store, no-cache, must-revalidate')
    newResponse.headers.set('CDN-Cache-Control', 'no-store')
    return newResponse
  })
}

The original Response from Astro has immutable headers, so you can't call .headers.set() on it directly. The fix is to construct a new Response using the original body and response as the init argument. The new Response has mutable headers, so .set() works. CDN-Cache-Control is a Cloudflare-specific header that controls caching at the edge independently from the standard Cache-Control header.

src/layouts/Layout.astro

Every page goes through this layout. HTML structure, meta tags, and global imports live here so you don't repeat them on every page.

---
interface Props {
  title: string
  description?: string
}
const { title, description = '' } = Astro.props
---
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{title}</title>
    <meta name="description" content={description} />
  </head>
  <body>
    <slot name="nav" />
    <main id="main-content"><slot /></main>
    <slot name="footer" />
  </body>
</html>

Named slots let the navbar and footer sit outside <main>, keeping the HTML landmark structure correct for accessibility.

src/pages/blog/index.astro

---
import Layout from '../../layouts/Layout.astro'
import { getPosts, getCategories, getPostsByCategory } from '../../lib/wordpress'

const page = Number(Astro.url.searchParams.get('page') ?? 1)
const categoryId = Astro.url.searchParams.get('category')

const [posts, categories] = await Promise.all([
  categoryId ? getPostsByCategory(categoryId, page) : getPosts(page, 10),
  getCategories(),
])
---
<Layout title="Blog">
  <nav>
    <a href="/blog">All</a>
    {categories.map((cat) => (
      <a href={`/blog?category=${cat.id}`}>{cat.name}</a>
    ))}
  </nav>

  <ul>
    {posts.map((post) => {
      const image   = post._embedded?.['wp:featuredmedia']?.[0]?.source_url
      const imageAlt = post._embedded?.['wp:featuredmedia']?.[0]?.alt_text ?? ''
      return (
        <li>
          {image && <img src={image} alt={imageAlt} />}
          <a href={`/blog/${post.slug}`} set:html={post.title.rendered} />
          <div set:html={post.excerpt.rendered} />
        </li>
      )
    })}
  </ul>

  {page > 1 && <a href={`/blog?page=${page - 1}`}>Previous</a>}
  <a href={`/blog?page=${page + 1}`}>Next</a>
</Layout>

Promise.all fetches posts and categories in parallel. The category filter reads from the URL query string so the same page handles both /blog and /blog?category=5 without separate routes.

Featured images live inside post._embedded['wp:featuredmedia'][0] because _embed inlines the media object into the post response.

src/pages/blog/[slug].astro

---
import Layout from '../../layouts/Layout.astro'
import { getPostBySlug } from '../../lib/wordpress'

const { slug } = Astro.params
const post = await getPostBySlug(slug)
if (!post) return Astro.redirect('/404')

const image    = post._embedded?.['wp:featuredmedia']?.[0]?.source_url
const imageAlt = post._embedded?.['wp:featuredmedia']?.[0]?.alt_text ?? ''
const author   = post._embedded?.author?.[0]?.name
const seoTitle = post.yoast_head_json?.title ?? post.title.rendered
const seoDesc  = post.yoast_head_json?.og_description ?? ''
---
<Layout title={seoTitle} description={seoDesc}>
  <article>
    <h1 set:html={post.title.rendered} />
    <p>{author} · {new Date(post.date).toLocaleDateString()}</p>
    {image && <img src={image} alt={imageAlt} />}
    <div set:html={post.content.rendered} />
  </article>
</Layout>

Use set:html for WordPress content, not {post.content.rendered}. Astro treats curly brace expressions as text and escapes the HTML, so you see raw tags printed on the page instead of rendered content.

Always guard with if (!post) return Astro.redirect('/404'). If someone visits a slug that doesn't exist, the API returns an empty array. Without the guard, accessing properties on undefined throws an error that crashes the Cloudflare Worker and returns a 500.

post.yoast_head_json is available when Yoast SEO is active. It contains the computed SEO title and description that Yoast generates. Using it means the SEO work done in WordPress carries over to the Astro frontend automatically.

src/pages/sitemap.xml.ts

import type { APIRoute } from 'astro'
import { getAllPostsForSitemap } from '../lib/wordpress'

export const GET: APIRoute = async () => {
  const posts = await getAllPostsForSitemap()

  const urls = [
    { loc: 'https://yourdomain.com/', lastmod: new Date().toISOString() },
    { loc: 'https://yourdomain.com/blog/', lastmod: new Date().toISOString() },
    ...posts.map((p) => ({
      loc: `https://yourdomain.com/blog/${p.slug}/`,
      lastmod: p.modified,
    })),
  ]

  const xml = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
\({urls.map((u) => `  <url>\n    <loc>\){u.loc}</loc>\n    <lastmod>${u.lastmod}</lastmod>\n  </url>`).join('\n')}
</urlset>`

  return new Response(xml, { headers: { 'Content-Type': 'application/xml' } })
}

This generates fresh XML on every request, so the sitemap always reflects currently published posts without a rebuild.

src/styles/global.css

@import "tailwindcss";

@theme {
  --color-brand: #your-color;
  --font-sans: 'Your Font', sans-serif;
}

Tailwind v4 uses CSS-first configuration through the @theme block. CSS variables defined here become Tailwind utilities automatically. --color-brand becomes bg-brand, text-brand, and so on. No tailwind.config.js needed.

CI/CD with Cloudflare Pages

With the Astro code in place, the last piece is getting it deployed. Cloudflare Pages connects directly to GitHub, so you don't have to maintain a separate pipeline.

Here are the steps:

1. Push your repo to GitHub.

2. Go to Cloudflare Pages, create a project, connect it to your GitHub repository.

3. Set the build command to pnpm build and the output directory to dist.

4. Under Environment Variables, add WORDPRESS_API_URL pointing to https://cms.yourdomain.com.

5. Deploy.

After the first deploy, every push to main triggers a new deployment automatically. Cloudflare runs the build, and within minutes the new version is live globally. Content updates in WordPress go live immediately, since Astro fetches from WordPress on every request. A developer pushing code and an editor publishing a post are completely independent operations.

Final Thoughts

This setup exists because of the specific requirement that the content team was already on WordPress and changing that was not on the table.

If you're starting fresh with no CMS in place, this is probably not the stack you want. Go with something like Next.js and Payload CMS where the backend and frontend are designed to work together from the start.

But if your situation matches where content editors are already familiar with WordPress, and you need a custom frontend that a page builder can't deliver cleanly, then this separation makes sense.

Pros:

• Content editors keep using WordPress. No retraining, no migration.

• The frontend has full control over design and behaviour. No theme or plugin constraints.

• Deployments are automatic on every push. Content changes go live immediately without a rebuild.

• No added cost for most sites. WordPress stays on its existing host. Cloudflare Pages is free within generous limits, and scales to $5 per month on the Workers Paid plan if you outgrow them.

Cons:

• Two systems to maintain instead of one. You operate the WordPress install (updates, plugins, backups) and maintain the Astro codebase separately.

• The WordPress REST API has limitations. Complex content structures or real-time features need more work to handle compared to a purpose-built headless CMS.

• Adapter and deployment target are tied together. @astrojs/cloudflare v13 drops Pages support in favor of Workers, so staying on Pages means staying on v12. Details in the Good to Know section.

• Frontend changes require a developer. With Elementor, anyone with admin access could adjust layouts directly in the browser. Here, any visual change outside of content goes through code, which means it goes through you.

The stack is WordPress on existing hosting, Astro on Cloudflare Pages, with GitHub as the bridge between development and production. It solves a specific problem cleanly. Outside of that problem, there are better options.

Good to Know

Change the default login URL immediately. Every bot targets /wp-login.php and /wp-admin. Install WPS Hide Login and move it to something custom. Anyone hitting the default paths gets a 404.

Remove the /wp-json/wp/v2/users endpoint. It returns a public list of usernames. In headless mode you get author data through _embed and have no use for this endpoint. Add to the mu-plugin:

add_filter('rest_endpoints', function($endpoints) {
    unset($endpoints['/wp/v2/users']);
    unset($endpoints['/wp/v2/users/(?P<id>[\d]+)']);
    return $endpoints;
});

Disable XML-RPC and enable 2FA. Add add_filter('xmlrpc_enabled', '__return_false') to the mu-plugin — you aren't using it in headless mode and it's a common brute force target. Enable Wordfence's Brute Force Protection and add two-factor authentication through WP 2FA for all admin accounts.

Don't upgrade @astrojs/cloudflare to v13 if you deploy via Cloudflare Pages git-push CI. v12 outputs dist/_worker.js which Pages CI expects. v13 outputs a different format for wrangler deploy — Pages CI falls back to serving the dist folder as a static site and every SSR route returns 404 with no helpful error message.

The v12 adapter throws a deprecation warning on entrypointResolution. Silence it by adding entrypointResolution: 'auto' to the adapter options. Test before committing — it changes how the build locates the Worker entry file.

Custom Post Types follow the same pattern. Register the CPT with show_in_rest: true and a rest_base, and it shows up at /wp-json/wp/v2/your-base. The same fetch helpers, _embed, and slug routing work exactly the same way.

The REST API returns pagination headers. The raw response includes X-WP-Total and X-WP-TotalPages headers before you call .json(). If you want proper previous/next pagination, read those instead of guessing whether a next page exists.

Wrap API calls in try/catch. If WordPress is unreachable, an unhandled fetch throws and returns a 500. A try/catch returns an empty page instead, which is a much better failure mode.

Preview auth uses Application Passwords. WordPress 5.6 added Application Passwords under Users → Profile. That's what WP_APP_USER and WP_APP_PASSWORD in your .env should point to — not your regular admin password. Generate one per environment. Define the preview token as a constant in wp-config.php (define('HEADLESS_PREVIEW_SECRET', '...')) and reference that constant in the mu-plugin — never hardcode secrets in version-controlled files.

Even skilled developers spent hours setting up a basic site. This process was slow and often frustrating, especially for new users.

But that’s changing. Artificial intelligence is now playing a big role in how WordPress sites are built. It takes care of the boring, time-consuming parts like writing content or designing pages, so that developers and site owners can focus on the parts that really matter.

Table of Contents

• The Pain of Starting from Scratch

• How AI Is Changing WordPress Development

• AI in the WordPress Workflow

• AI Tools for WordPress

• 10Web Website Builder in Action

• Why AI Matters for WordPress Developers and Hosts

• The Future of WordPress with AI

• Conclusion

The Pain of Starting from Scratch

If you’ve ever installed WordPress on a fresh hosting account, you know what it’s like. After setup, you see an empty dashboard with no content and no design.

From there, you have to search for a theme, install plugins, add some demo content, and try to figure out how it all fits together. Most users get stuck early in this process.

For new site owners, this can feel overwhelming. They don’t want to build every page manually. They just want a working website that fits their business. But most hosting companies still provide a blank WordPress install and expect users to do everything from there.

That leads to frustration. And for many hosting companies, it leads to churn. New customers sign up, don’t know what to do, and give up before launching their site.

How AI Is Changing WordPress Development

In the last two years, AI tools have started to shift how websites are created. Platforms like v0 and Lovable showed that you could describe your business and get a working site generated in seconds. These tools are fast and exciting. But they had a downside: they weren’t built for WordPress.

So users had to choose between fast results and long-term flexibility. WordPress is still the most powerful content management system in the world, and runs over 40% of all websites.

WordPress has thousands of themes, plugins, and developers who can extend it in any direction. But until recently, WordPress didn’t offer the instant setup that AI tools could. That’s the gap AI is now closing.

AI in the WordPress Workflow

Today, AI is being used inside WordPress itself. It helps create sites faster, easier, and with fewer mistakes. Instead of starting from zero, developers now begin with a site that’s already built with pages, layout, images, and text included.

This saves hours of time. You don’t have to install the same plugins or write placeholder content over and over. Instead, you can focus on what really matters: making the site faster, more secure, and easier to use.

Even better, AI can continue helping after the site is live. It can improve SEO, fix design problems, suggest better headlines, and more. Site owners can talk to a built-in assistant that helps them make updates just by typing what they want.

This changes the job of a WordPress developer. But doesn’t remove the need for developers – it makes them more powerful. Now they can spend their time solving real problems instead of doing the same setup tasks again and again.

AI Tools for Wordpress

The rise of AI inside the WordPress ecosystem has opened the door to a new generation of tools, ones that don’t just speed up development but also rethink how websites get built, edited, and maintained.

Rather than starting from a blank canvas, these tools give you a solid foundation in seconds. And just as importantly, they do so without locking users into closed ecosystems.

One of the most widely used WordPress building tools today is 10Web, which takes the idea of AI-native website creation a step further compared to other tools that help with individual tasks like text generation or layout tweaks.

With 10Web, you describe your business, and within seconds, it generates a complete website with design, content, structure, and e-commerce-ready pages. For hosting providers, this AI site generation is delivered through a fully white-labeled WordPress plugin that integrates directly into their infrastructure, branded and automated. It runs on the host’s stack and allows further edits via a drag-and-drop interface or an AI Co-Pilot.

The company is backed by Andrew Ng, often called the father of modern deep learning, making it a serious contender in shaping the future of WordPress development.

What sets 10Web apart is its integration into the hosting provider’s provisioning flow. Instead of being another plugin or third-party builder, it becomes part of the WordPress provisioning process itself.

For developers and infrastructure providers, this means clients get a fully working site at signup, without any extra integrations or tools required. You can use 10Web’s AI-native website builder to generate WordPress sites for your clients, under your own brand.

10Web Website Builder in Action

Let’s put the tool to the test and see if it delivers. On the home page, click “Generate AI Website”.

It should take you to the page to describe your requirements.

My prompt was simply “Generate a simple portfolio website with projects, about, testimonials, and contact us options.”

Let’s wait for the skeleton first. Here’s what it’ll look like:

I have the option to customize settings here. Once you’re done with that, click “Generate”.

It took a minute, but this is what the platform delivered:

Quite a stunning website. I have the option to fully customize it, and the created website is mobile responsive by default. It has automated 10-12 hours of developer effort in a few minutes.

Once a website is generated, you still have full control over your website. You can use prompts to make additional changes to your pages or use the native WordPress admin panel within 10Web to edit individual pages similar to a self-hosted WordPress site.

10Web acts as an enabling layer to speed up your WordPress development while giving you full control of your website.

Why AI Matters for WordPress Developers and Hosts

The impact of this shift is felt on two fronts: the individual developer’s workflow and the hosting provider’s business model.

For developers, these AI tools reduce the time spent on low-level tasks. Instead of writing placeholder content or tweaking basic layout elements, developers can now focus on performance, accessibility, security, and high-value customizations.

AI gives them a head start and more mental space to do what truly matters. It’s no longer about building every piece by hand but curating, editing, and optimizing what’s already there.

For hosting providers, offering a blank WordPress install is no longer enough. User expectations have changed. People want a site that’s ready to go, one they can edit, not just one they have to build from the ground up.

With AI-powered builders and plugins baked into their offering, hosts can provide real value on day one. This reduces support tickets, increases activation rates, and gives users a sense of momentum. More importantly, it lets providers differentiate in a crowded market.

The old model of “sell hosting and leave the rest to the user” is fading. The new model is all about packaging infrastructure with outcomes.

Open Source Alternatives

While platforms like 10Web offer a seamless, integrated way to build AI-powered WordPress sites, they’re not the only option. For developers who prefer more transparency, or the ability to customize every layer of the stack, open source AI tools can be an attractive path.

Projects like WordPress Playground AI, and CodeWP are community-driven solutions that bring AI-assisted content generation, image creation, and even block-level design suggestions directly into the WordPress editor. Because they’re open source or built with open APIs, you’re free to host models yourself, extend features, or integrate with other workflows without being tied to a single vendor.

The trade-off is that open source AI solutions often require more setup and technical know-how. You may need to configure your own AI backend, manage API keys for services like OpenAI or Hugging Face, and handle updates manually. But in return, you get better flexibility, and the ability to adapt the tools to your exact needs.

The Future of WordPress with AI

We’re at the beginning of a bigger shift. In the coming years, WordPress won’t just be a place to build sites. It will be a platform that helps run, grow, and evolve them.

AI will play a central role in that evolution. It will help personalize content, track performance in real-time, and recommend design or structure changes based on user behavior. We’ll see more tools that learn from how visitors interact with a site and offer ways to improve it without needing a developer to log in.

This means smarter marketing, faster publishing, and less guesswork. Developers will become strategists. Site owners will become editors instead of builders. And hosting providers will evolve into true partners in online growth.

Conclusion

WordPress has always been about freedom. Freedom to build what you want, extend how you like, and scale as needed. That hasn’t changed. But now, that freedom comes with a boost. With AI built into the stack, developers and site owners don’t have to choose between power and speed. They get both.

AI doesn’t replace the developer. It empowers them. It doesn’t remove the need for creativity. It gives creators a head start. And it doesn’t lock users into closed systems. It opens the door to faster, better, and more flexible websites built on the world’s most popular platform.

Hope you enjoyed this article. You can find me on Linkedin to stay in touch.

We just published a beginner-friendly WordPress course on the freeCodeCamp.org YouTube channel to guide you through every step of creating a WordPress website. Whether you’re starting from scratch or looking to refine your skills, this course equips you with all the tools and knowledge you need to succeed. And best of all, the course was developed by me!

What You’ll Learn in This Course

In this comprehensive course, you’ll go from zero to a fully functioning WordPress website. Here’s what you’ll cover:

• Getting Started with WordPress:

  • Understand what WordPress is and why it’s a great choice for building websites.

  • Learn how to get a domain name and hosting, essential for making your site accessible online.

• Installing and Setting Up WordPress:

  • Step-by-step guidance on installing WordPress and setting up your site.

  • Learn how to create a custom email for your domain.

• Customizing Your Website:

  • Explore the WordPress dashboard and configure important settings.

  • Learn how to install plugins to add features and functionalities to your site.

  • Install and customize a theme to give your site the exact look and feel you want.

• Building and Personalizing Your Website:

  • Use Elementor, a powerful page builder, to create visually stunning pages without writing code.

  • Add logos, menus, and custom HTML elements to make your website unique.

  • Customize pages like "About" and "Contact," including creating and updating a contact form.

• Making Your Site Responsive:

  • Learn how to ensure your website looks great on all devices, from desktops to smartphones.

• Adding a Blog:

  • Set up a blog on your site and create posts using an AI content creator.

  • Customize your blog layout to align with your website’s design.

Course Highlights

• Hands-On Learning: Each section includes practical, step-by-step instructions to help you build your site as you follow along.

• No Coding Required: Perfect for beginners, this course leverages WordPress tools and plugins to simplify the process.

• Professional Tips: Learn best practices for site design, responsiveness, and functionality to create a polished and professional website.

Why Take This Course?

By the end of the course, you’ll have a fully customized WordPress website and the confidence to manage and update it independently. Whether you’re a business owner, a creative professional, or someone who wants an online presence, this course will empower you to bring your vision to life.

Ready to get started? Watch the full course on freeCodeCamp.org’s YouTube channel (1-hour watch).

So if you run a WordPress site, you’ll need to make sure it’s secure. And this isn’t just a technical task, but is also a key responsibility from several points of view such as brand reputation, data breach, and business continuity.

One tool that stands out in the WordPress ecosystem is WPScan. It’s a security scanner that’s specifically designed for WordPress. It comes with both a paid and free license, according to your needs. It is also pre-installed in Kali Linux distributions.

So whether you’re a seasoned website admin or a website owner looking to improve your site's security, WPScan can help you identify vulnerabilities before attackers exploit them.

Before going ahead, one very important thing: the purpose of this article is to help individuals and organizations strengthen the security of their WordPress websites by effectively utilizing WPScan.

While this tool is incredibly powerful in identifying vulnerabilities, it’s important to emphasize that any unauthorized use of WPScan—such as scanning websites without proper permission—is not only unethical but also illegal.

My goal in sharing this information is to empower site administrators and developers to proactively secure their websites, safeguard their data, and create a safer online environment for everyone.

What we’ll cover:

1. What is WPScan?

2. How to Scan Your WordPress Site Using WPScan

3. What to do with WPScan Results

4. Limitations of WPScan

5. Best Practices for Using WPScan

6. How to Monitor Results Effectively

7. Conclusion

What is WPScan?

WPScan is a command-line tool that helps you identify potential vulnerabilities in your WordPress installation. It’s like a security guard for your website, keeping an eye on outdated plugins, misconfigurations, and other common issues.

What makes WPScan unique is its focus on WordPress. It uses a database maintained by security experts, which is updated regularly to track thousands of known vulnerabilities in WordPress core, plugins, and themes.

What Can WPScan Do?

Here are just a few things WPScan can help you with:

• Detecting outdated WordPress core versions.

• Identifying vulnerabilities in plugins and themes.

• Enumerating users (for example, discovering usernames).

• Testing for weak passwords (using a dictionary attack).

• Finding exposed sensitive files (like backups or debug logs).

Let’s see now the most common commands you can use.

How to Scan Your WordPress Site Using WPScan

1. Basic Scan

A basic scan provides an overview of your WordPress site's security by identifying key vulnerabilities or misconfigurations. It can detect the WordPress core version and flag it if it's outdated, highlighting potential risks like SQL injection or cross-site scripting (XSS) vulnerabilities associated with older versions.

The scan might also reveal publicly accessible backup files (for example, .sql or .zip) or debug files like debug.log, which could expose sensitive information such as database credentials or server paths.

It can flag missing or improperly configured HTTP security headers, such as Strict-Transport-Security (HSTS) or Content-Security-Policy (CSP), which are critical for protecting against protocol downgrade attacks and unauthorized script execution.

Open directories that expose your site's file structure and potentially vulnerable plugins or themes may also be flagged if they are identified in public metadata.

These findings provide a starting point to address fundamental security gaps.

wpscan --url http://yourwebsite.com

This is what you’ll see on your terminal when you run this command:

2. Enumerating Users

User enumeration is a process of identifying usernames on your WordPress site. Knowing these usernames can help attackers target specific accounts for brute-force attacks.

To enumerate users, run:

wpscan --url http://yourwebsite.com --enumerate u

The output will show usernames:

If you find default usernames like admin, you should replace them with something unique and secure.

Here are some best practice for usernames:

• Avoid default names: Replace default usernames like admin or user with something unique and not easily guessable.

• Rename vulnerable usernames: To change a username, you can create a new user with administrator privileges, transfer ownership of posts or content, and then delete the old user.

• Use role-based usernames carefully: Avoid naming accounts after their roles (for example, editor, manager), as these can be easy targets.

• Implement login lockouts: Combine secure usernames with plugins that lock accounts after repeated failed login attempts.

• Enable Two-Factor Authentication (2FA): Adding 2FA ensures that even if a username is guessed, the account remains secure.

3. Checking Plugins and Themes

Plugins and themes can have security issues. WPScan can list all installed plugins and themes, along with any associated vulnerabilities.

For plugins, run this:

wpscan --url http://yourwebsite.com --enumerate p

It’ll have an output like this:

For themes, run this:

wpscan --url http://yourwebsite.com --enumerate t

It’ll have output similar to this:

Look for outdated versions or known vulnerabilities in the results, and update or replace those components immediately.

Let’s look at some common security issues in plugins and themes.

First, we have Cross-Site Scripting (XSS). Insecure input handling in plugins or themes can allow attackers to inject malicious scripts, potentially stealing user information or taking over admin sessions. A poorly secured WordPress site with an XSS vulnerability can allow attackers to steal session cookies, potentially gain unauthorized admin access, inject malicious redirects, take users to phishing sites, display deceptive content, tricking users into providing sensitive information.

There’s also SQL Injection. Poorly written plugins or themes can enable attackers to manipulate database queries, exposing sensitive data or damaging your site. SQL injection vulnerabilities can be exploited to dump sensitive data, bypass authentication, and modify or delete data

Some plugins or themes might include malicious code—intentionally or due to poor security—that grants attackers unauthorized access to your site, known as backdoors. Once installed, a backdoor can grant persistent access, enable arbitrary file uploads, undermine site integrity, and steal sensitive data.

There’s also Remote Code Execution (RCE) – vulnerabilities that allow attackers to execute arbitrary code on your server, often leading to full control of your site or server. Once attackers gain RCE access, they can create admin users, exfiltrate data, launch further attacks, and privilege escalation.

Best Practices:

• Always keep plugins and themes updated to the latest versions.

• Remove any unused or inactive plugins and themes, as these can still pose a risk.

• Ensure plugins and themes are downloaded from trusted, reputable sources and have a history of active maintenance.

• Consider using security plugins to monitor changes to plugin or theme files and detect suspicious activity.

4. Password Testing

WPScan can test for weak passwords by attempting a brute-force attack using a wordlist:

wpscan --url http://yourwebsite.com --passwords /path/to/passwords.txt

and this is the output on your command line:

What is Brute-Forcing?

Brute-forcing is a method attackers use to guess passwords by systematically trying every possible combination until the correct one is found. When combined with a wordlist—a file containing a collection of commonly used passwords—brute-forcing becomes much faster and more efficient.

A typical wordlist might include:

• Simple passwords like 123456, password, and qwerty.

• Common patterns such as Spring2024! or welcome123.

• Leaked passwords from previous data breaches.

By simulating this type of attack, WPScan can identify accounts that use weak passwords, allowing you to address vulnerabilities proactively.

Weak passwords make brute-forcing easier and faster. A short or predictable password might be guessed in seconds, while a longer, complex password with unique elements is exponentially harder to crack.

How to Create Strong Passwords

Strong passwords are your first line of defense against brute-force attacks. Here are key characteristics of strong passwords:

• Length: At least 12–16 characters long.

• Complexity: Use a mix of uppercase and lowercase letters, numbers, and special characters.

• Uniqueness: Avoid reusing passwords across multiple accounts.

• Unpredictability: Avoid dictionary words, common phrases, or personal information like birthdays.

Strategies for Generating Strong Passwords

There are various measures you can take to create strong passwords. First, use a password generator. Tools like LastPass and Bitwarden can create and store highly complex passwords for you.

You should also use pass phrases (instead of just regular passwords). Combine random, unrelated words with numbers and symbols, such as Sky#Tree!Motorbike12.

Finally, avoid patterns that might be easily guessed by an attacker. Don’t use sequential or keyboard patterns like abcdef or qwerty.

Use Tools to Manage Passwords

Managing strong passwords can be challenging. Password managers simplify this by securely storing and autofilling your credentials. Popular options include:

• Bitwarden

• LastPass

These tools also have features like password auditing to detect reused or weak passwords.

Use Two-Factor Authentication (2FA)

Two-factor authentication (2FA) adds an additional layer of security by requiring users to verify their identity through a second factor beyond the password. This can include:

• One-time codes sent via email or SMS.

• App-generated codes from tools like Google Authenticator or Authy.

• Biometric verification, such as fingerprints or facial recognition.

Even if an attacker guesses your password through brute-forcing, 2FA prevents them from accessing your account without secondary verification. This additional step makes brute-forcing impractical, as attackers would also need to compromise your 2FA device or method.

How to Implement 2FA in WordPress

1. Install a WordPress plugin such as Google Authenticator.

2. Require all user accounts, especially administrators, to enable 2FA.

3. Offer backup codes or recovery options in case users lose access to their 2FA device.

4. Test and make sure that 2FA works reliably for all user roles before making it mandatory.

The Importance of Password Hygiene

By using strong passwords and implementing 2FA, you can significantly reduce the effectiveness of brute-force attacks.

WPScan’s password testing feature can help you identify weak credentials. It also underscores the critical need for proactive password hygiene and additional security layers to keep your WordPress site secure.

What to Do with WPScan Results

WPScan reports provide actionable insights into your site’s security. Here’s what you can do with the information:

First, update WordPress core, plugins, and themes: Keep everything updated to patch vulnerabilities.

Second, address configuration issues: Fix misconfigured file permissions, insecure HTTP headers, and other warnings.

Here are a couple of remediation examples you can apply:

• Directory indexing: If WPScan detects open directories, disable directory browsing by adding this line to your .htaccess file:

    Options -Indexes
  

• File permissions: Ensure critical files like wp-config.php are read-only by setting permissions to 440 or 400 using the command:

    chmod 400 wp-config.php
  

You should also harden all user accounts. You can do this in several ways:

• Update weak passwords: Use strong, unique passwords for all user accounts (refer to the password testing section for tips).

• Remove unused accounts: Delete inactive accounts, especially those with administrator privileges.

• Rename predictable usernames: Change usernames like admin to something less obvious.

Make sure you also secure any sensitive files: If WPScan finds exposed files like debug.log, delete or secure them. Delete unnecessary files or old backups.

For files you need to keep, move them to a directory outside the web root. You can also protect files with .htaccess, by blocking access to sensitive files using Deny and Allow rules:

<Files wp-login.php>
    Order Deny,Allow
    Deny from all
    Allow from 123.456.789.000
</Files>

Limitations of WPScan

WPScan is a powerful too, but it does have some limitations. Just be aware of them so you can take other measures to protect your WP sites.

1. Known Vulnerabilities Only

WPScan relies on its database of known vulnerabilities, so it won’t catch zero-day exploits or custom vulnerabilities.

Here are some tips on how you can mitigate this issue:

• Stay informed: Monitor WordPress security blogs, vulnerability databases like CVE or WPVulnDB, and community forums for emerging threats.

• Use a Web Application Firewall (WAF): Tools like Cloudflare or Sucuri can block suspicious activities and attempts to exploit unknown vulnerabilities.

• Conduct manual security reviews: Periodically review your site for unusual behavior or unauthorized changes, particularly in critical files like wp-config.php or your database.

2. No Real-Time Protection

WPScan a diagnostic tool, not a firewall or intrusion detection system. For real-time protection, it’s a good idea to combine WPScan with other tools.

Some steps you can take are:

• Install security plugins: Use specific security plugins to provide continuous monitoring, malware scanning, and firewall protection.

• Monitor activity logs: Set up activity tracking to identify suspicious login attempts, file changes, or unauthorized user actions.

3. Resource-Intensive

Scanning large sites with many plugins and themes can be time-consuming and may impact server performance.

There are various strategies you can adopt to mitigate this such as scheduling scans during low-traffic periods to minimize disruption to site visitors. You can also perform scans on a staging copy of your site rather than directly on the live environment.

4. Learning Curve

As a command-line tool, WPScan can be intimidating for less technical users. However, the documentation is excellent, and with practice, you’ll become proficient.

If the CLI is overwhelming for you, try pairing WPScan with security plugins that offer GUI-based scanning and reporting.

Best Practices for Using WPScan

To get the most out of WPScan, you’ll want to to tailor its usage to your site’s specific needs and establish a robust strategy for monitoring results. Here’s how you can maximize its effectiveness:

Choose the Right Scans for Your Site

WPScan offers a variety of scan options, from basic scans to targeted vulnerability checks for plugins, themes, and user accounts. Choosing the right scans depends on the type of site you manage and the sensitivity of the data it handles.

For small, low-traffic sites:

• Prioritize basic scans to check WordPress core, plugins, and themes for updates and vulnerabilities.

• Run scans monthly or after major updates.

• Use user enumeration (--enumerate u) if you suspect weak passwords or default usernames.

For medium-sized business sites:

• In addition to basic scans, include plugin and theme enumeration (--enumerate p,t) to ensure all components are secure.

• Weekly scans to stay ahead of emerging threats.

• Combine WPScan with activity log plugins to track user actions and file changes.

For high-traffic or e-commerce sites:

• Perform comprehensive scans, including user enumeration (--enumerate u), file enumeration (--enumerate f), and password brute-force testing (if allowed).

• Daily or weekly scans to minimize risk.

• Implement additional measures like 2FA for admin accounts, a web application firewall (WAF), and security headers to reinforce your site.

For sites handling sensitive data:

• Prioritize all available scans, including those for exposed files and configuration vulnerabilities.

• Weekly scans with real-time monitoring via a security plugin.

• Use staging environments to test security settings without affecting production.

Should You Use All Scans?

While it may seem beneficial to use every scan WPScan offers, there are various factors to consider.

First, think about your site’s size and your resources. For smaller sites, running all scans can be overkill and resource-intensive.

You’ll also want to focus on scans that address your site's most likely vulnerabilities. For example, an e-commerce site should prioritize user and payment security over exhaustive file enumeration.

Compliance requirements are also important to take into consideration. If you’re subject to regulations like GDPR, ensure you scan for and address vulnerabilities related to data protection.

How to Monitor Results Effectively

Monitoring WPScan results is important. It helps you fix vulnerabilities, of course, but it also helps you create a system to track changes over time and stay vigilant.

Set Up Reporting

You can save scan results to files using the --output flag:

wpscan --url http://example.com --output /path/to/report.txt

Then review the reports regularly and compare them to previous scans to identify recurring issues or new vulnerabilities.

Create an Action Plan

It’s a good idea to categorize vulnerabilities based on severity (for example, critical, moderate, low).

This allows you to address high-severity issues (like outdated plugins with known exploits) immediately. Then you can schedule lower-priority tasks, such as file permission adjustments or minor configuration changes, for routine maintenance.

Track Trends Over Time

Use tools like spreadsheets or a project management app (for example, Trello, Asana) to log vulnerabilities, fixes, and follow-up actions.

Make sure you analyze recurring issues to identify patterns, such as frequent plugin vulnerabilities, and consider replacing problematic components.

Automate Notifications

If you schedule scans using cron jobs, set up email alerts or notifications to review results without delay.

Use security plugins with real-time monitoring to notify you of suspicious activities in between WPScan checks.

Communicate with Your Team:

You’ll want to make sure you share reports with relevant team members, such as developers or site administrators, so everyone is aware of potential vulnerabilities.

It’s also a good idea to establish protocols for immediate action if critical vulnerabilities are discovered.

By choosing scans based on your site’s specific needs and implementing a structured approach to monitoring results, you can ensure WPScan is used effectively. Also, make sure you tailor the tool to your risk profile, track vulnerabilities over time, and integrate its findings into a broader security strategy.

This approach not only improves your site’s security posture but also minimizes resource use and effort while delivering maximum protection.

Conclusion

WPScan is an invaluable tool for anyone managing a WordPress site. It simplifies the process of identifying vulnerabilities and provides clear, actionable recommendations to strengthen your site’s security.

By integrating WPScan into your workflow and following best practices, you can reduce the risk of attacks and keep your WordPress site safe. Security is a continuous journey, and tools like WPScan make it easier to stay ahead of potential threats.

Recently, I faced the challenge of integrating WordPress into my existing Next.js project. I had a blog hosted on WordPress and wanted to migrate it to my Next.js app.

I needed a solution that would allow me to use WordPress as a headless CMS. The goal was simple: leverage the power of WordPress for managing content while utilizing a modern frontend framework for displaying it.

In this article, we’ll walk through how to integrate WordPress to a Next JS app.

Why Use a Headless CMS?

A headless CMS separates the content management (back-end) from the presentation layer (front-end). This gives developers more flexibility over how content is delivered and displayed, without being restricted by traditional themes or layouts.

It's great for performance, and scalability, offering more control over how content is rendered on the frontend. In this case, you’ll use WordPress as your content management system but display the content in a more modern and performant way using Next.js.

What is Next.js?

If you are yet to come across Next.js, it's a powerful React-based framework that makes building optimized, server-side rendered (SSR) applications much easier.

It offers a bunch of features out of the box like file-based routing, API routes, static site generation (SSG), and incremental static regeneration (ISR). All these make it a great choice for creating fast, SEO-friendly websites.

How to Connect WordPress and Next.js

When using WordPress as a headless CMS, there are two primary ways to connect your Next.js application to your WordPress backend:

1. WP REST API: WordPress comes with a built-in REST API, which allows you to retrieve content from WordPress in JSON format.

2. WPGraphQL: WordPress supports headless content management through the use of GraphQL (with plugins such as WPGraphQL), making it easy to query and retrieve specific content, like blog posts, for use in a front-end framework like React.

While the REST API is popular, we’ll to go with WPGraphQL because it allows for more precise queries and flexibility. With GraphQL, you can ask for exactly the data you need, which can reduce the amount of data transferred and improve performance.

Steps to Connect WordPress and Next.js Using WPGraphQL

The first thing you need to do is to install the WPGraphQL plugin on your WordPress site. This plugin enables GraphQL API functionality within WordPress. You can install the plugin like any other by navigating to the WordPress admin dashboard.

First, go to Plugins and select Add New. Then, search for WPGraphQL, and once you find it, simply install and activate the plugin.

After installing and activating the plugin, the GraphQL IDE will appear on the WordPress dashboard. Here, you can test various queries you may need for your frontend development.

Let's move on to the frontend.

How to Fetch Data from WPGraphQL in Next.js

In your Next.js project, you'll need to fetch data from the GraphQL API. Here’s a simple example using graphql-request:

1. Install graphql-request to make it easy to query the GraphQL API:

npm install graphql-request

2. In your Next.js component, create a GraphQL query to fetch the blog posts:

import BlogHeader from '@/components/blog/BlogHeader';
import BlogNewsletter from '@/components/blog/BlogNewsletter';
import BlogPosts from '@/components/blog/BlogPosts';
import Link from 'next/link';
import React from 'react';

import { request, gql } from "graphql-request";

const query = gql`
{
  posts(first: 10) {
    edges {
      node {
        id
        title
        excerpt
        content
        date
        author {
          node {
            id
            name            
          }
        }
        date
        slug
        featuredImage {
          node {
            sourceUrl
          }
        }
        categories {
          edges {
            node {
              name
            }
          }
        }
      }
    }
  }
}
`

export async function getStaticProps() {
  try {
    const posts: any = await request('https://blog.intercity.ng/graphql', query);

    return {
      props: { posts }
    }
  } catch (error) {
    console.error('Error fetching posts:', error);
    return {
      props: {
        posts: []
      }
    };
  }
}

const Index = ({ posts }: { posts: any }) => {

  return (
    <main className="relative pb-10 pt-10 lg:pt-0 lg:mt-[-3%]">
      <div className='t40-container w-full'>
        <BlogHeader />
        <BlogPosts posts={posts} />
        <BlogNewsletter />
      </div>
    </main>
  )
}

export default Index

In the code above, your Next.js app fetches blog posts from your WordPress backend using GraphQL and displays them on the frontend. The GraphQL query is created to retrieve post details like the title, author, content, and featured image.

Using Next.js getStaticProps, the data is fetched at build time and passed as props to the component. The blog posts are rendered through custom components like BlogHeader, BlogPosts, and BlogNewsletter, making the page dynamic and efficient.

This demonstrates how WordPress can be used as a headless CMS for a Next.js application. Now that you have successfully integrated WordPress as a headless CMS in your Next.js application, you can continue fetching more data from the GraphQL API to enhance the functionality of your app.

Conclusion

By using WordPress as a headless CMS and Next.js for the frontend, we can build a fast, SEO-friendly blog while taking advantage of WordPress’s powerful content management features.

Using WPGraphQL allowed us to efficiently fetch only the data we needed, giving us more control and improving the site's performance.

I hope this was useful. Happy coding!

WordPress is a content management system (CMS) that allows you to create and manage websites easily, even if you don't have any coding experience. Whether you're starting a personal blog, a business website, or an online store, WordPress offers the flexibility and features to get your site up and running.

Hostinger provided a grant to make this course possible.

This course is designed to take you from a complete beginner to a confident WordPress user. Here's a brief summary of what you'll learn:

• Overview of the course and the benefits of using WordPress.

• Choosing and registering a domain name, and finding the right hosting plan.

• Setting up your WordPress site on Hostinger.

• Setting up professional email accounts.

• Navigating the WordPress admin panel.

• Using AI tools to design a professional logo.

• Customizing your site to make it unique.

• Creating and publishing blog posts and articles.

• Using AI tools to generate content.

• Basics of search engine optimization.

• Advanced AI content creation features.

• Customizing the layout and design of your articles page.

• Personalizing your home page and header.

• Further customization for improved user experience.

• Ensuring reliable email delivery.

• Creating and managing email newsletters.

• Advanced home page customization techniques.

• Optimizing page URLs for better SEO and user experience.

• Final tips and resources for your WordPress journey.

AI tools can significantly speed up the process of creating and managing your WordPress site. From designing logos to generating content, these tools can help you create professional-quality work with less effort. Hostinger's AI tools are user-friendly and designed to integrate seamlessly with WordPress, making them perfect for beginners.

Watch the full course on the freeCodeCamp.org YouTube channel (1-hour watch).

Many publishers who work with writers need collaborative writing and editing features. This is where Google Docs comes into the picture. It’s a collaborative platform, enabling multiple users to write and edit simultaneously.

Google Docs also offers powerful formatting tools, simplifying the content creation process before transferring it to WordPress for publishing.

However, converting Google Docs to WordPress can add an extra step to your publishing workflow and requires some attention to detail.

This tutorial explores four seamless methods to bridge that gap and streamline your publishing journey:

• Manually converting using the copy-paste method
• Publishing with SEO optimization using the Docs to WP Pro add-on
• Using the WordPress Gutenberg editor
• Using the Markdown conversion method

Using the Simple Copy Paste Method

In this simple copy-paste approach, you can copy the contents from Google Docs and navigate to WordPress to create a new post, then paste in the content.

But when pasting content into WordPress, you may encounter some issues that require manual adjustments, especially if your WordPress site is using the Classic Editor.

First of all, you may have issues with spacing – for example, WordPress adds extra line breaks, as you can see in the image below:

Unnecessary link breaks added by Wordpress

Second, you may have to remove or clean up messy code – WordPress adds unnecessary span tags to the content.

Unnecessary span tags

Finally, you may have to manually upload images to the Media library and include them in your posts, as it's not done automatically.

The spacing issues and the messy code can affect your website performance. HTML counts toward your overall page weight, so unnecessary code slows your page down, impacting both user experience and SEO.

Images also need to be manually compressed before uploading to the WordPress Media library.

Also, the native Google Docs doesn’t offer options for SEO optimization or the use of reusable blocks to add boilerplate content. So using this method requires more manual work for publishing from Google Docs to WordPress.

Using Docs to WP Pro add-on

The Google Docs add-on Docs to WP Pro can help you publish SEO-optimized posts from Google Docs to WordPress.

The add-on allows you to configure the site once and includes additional capabilities, such as letting you create reusable blocks for content like FAQs, Author bios, and affiliate disclaimers. Beyond these, the add-on provides the following functionalities:

Automated Internal Linking

Adding internal links to your article is crucial for enhancing user experience and SEO. After creating content, identifying potential keywords and adding relevant internal links is essential.

But manually managing this process can be challenging, especially with a large number of articles and multiple authors. It becomes difficult to identify all potentially related articles without a comprehensive overview of your site, leading to more guesswork.

The Docs to WP Pro add-on can automate internal linking by automatically identifying and linking relevant keywords within your content to related posts on your site. This saves you time and effort and can help improve the SEO of your content by creating relevant internal links.

Related Posts Suggestions

Including a few related posts at the end of articles enhances reader engagement, increases dwell time, and improves overall user experience.

For this use case, the tool suggests topics that can be added as related posts. These suggestions include additional contextual data for the target posts, such as Relevance score, Number of incoming links, Post published on, and Post update on.

This information helps you link to the most recent articles when you have multiple articles on closely related topics and ensures a balanced distribution of internal links.

Suggestions for Related posts

SEO Optimization

Apart from internal linking, the tool also supports other SEO optimizations and seamlessly integrates with RankMath and Yoast.

The tool allows you to add a focus keyword and checks the content against it, suggesting optimizations such as the presence of the focus keyword in the title, subheadings, and image alt text.

The tool also evaluates whether the keyword is naturally integrated into the content or if it is overly used.

Additionally, the add-on provides useful information such as Flesch reading scores, content length, and reading time, helping you improve the readability of your content.

Image Handling

The add-on offers effortless image handling by automatically compressing images before publishing to the WordPress media library. This ensures a sleek media library and enhances your site's loading time.

It also enables you to add featured images directly from Google Docs to your WordPress posts. It can also automatically generate Alt Text for your images, contributing to improved accessibility and SEO.

The add on has a free version with paid features.

Using the WordPress Gutenberg Editor

Another option for publishing Google Docs to WordPress without additional add-ons is the WordPress Gutenberg editor. When you paste the Google Docs content into the Gutenberg editor, you won't encounter formatting issues such as extra line breaks or span tags.

This proves helpful when your content doesn't include images. But if your content contains images, the Gutenberg editor presents a few challenges.

After pasting the content into WordPress, checking the HTML code reveals that the image source is set to the location of the image in your Google Drive. This implies that you are hosting the images through your personal Google Drive, which is not recommended from a security standpoint.

Images hosted from your Google account

Also, deleting the image from your Google Drive or the Google Docs containing the image will result in the image disappearing from your website. This means you have to check your entire website and delete any links of images from your Google Drive.

An alternative approach is to upload the images manually to your WordPress media library and use those images in your posts. This adds some manual work and is error-prone. Also, the images must be manually compressed before uploading to the media library.

Markdown Conversion Method

You can convert Google Docs to Markdown format using the free and open source add on Docs to Markdown. The free tool will convert your fully formatted Google Doc to Markdown format (.md). You can paste this Markdown text into your WordPress editor for perfectly formatted text without any additional line breaks or span tags.

This option is also most useful only if your content doesn't include images. If your content does have images, it requires manual work to compress and upload your images into your WordPress media library and update the HTML accordingly.

Also, this method doesn't include built-in SEO features.

Conclusion

Transferring content from Google Docs to WordPress efficiently is essential for a smooth workflow.

This tutorial has presented four methods: manual copy-paste, using the Docs to WP Pro add-on, using WordPress Gutenberg editor and Markdown conversion method.

Each method has its own advantages and disadvantages, so the best choice for you will depend on your specific needs and preferences.

• Manual copy-paste is a simple option but requires manual adjustments for formatting and images.
• Docs to WP Pro offers features like automated internal linking, SEO optimizations and image handling, but may require additional investment.
• WordPress Gutenberg editor is a best option for the text only posts, but if you have images, then it requires additional work to host your images on WordPress media library.
• Converting to Markdown preserves formatting but requires manual image handling and lacks SEO optimization features.

Consider factors like the amount of content you create, your budget, and your technical expertise when making your decision.

I just created and released a course on the freeCodeCamp.org YouTube channel that will teach you how to use AI to help create an e-commerce store powered by WordPress. You will use AI for everything from creating content to creating actual products to sell.

Whether you're looking to create an e-commerce platform or simply trying to expand your web development skills, this course offers insights into leveraging WordPress alongside AI. I will demonstrate everything from the initial setup of hosting and domain to the customization of WordPress themes and pages.

In addition to teaching you how to quickly set up a WordPress store, I'll show you how to use AI to create sticker designs. You will learn how to add the stickers to your store as actual physical products that people can buy. And you don't even have to deal with shipping anything yourself.

Here are the sections covered in this course:

• Introduction
• Set up hosting and domain
• Set up WordPress with AI
• Set up email
• Start customizing WordPress
• Create logo with AI
• Update WordPress pages and store
• Create images for site using AI
• Update home page
• Customize menus
• Customize blog posts
• Use AI to create sticker designs
• Add products to store
• Change look of cart
• Add payment processing and shipping
• Test an order and set up billing method on Printful
• Create your first order
• Conclusion

By the end of this course, you'll not only have acquired the skills to create an AI-assisted WordPress e-commerce site but also the confidence to explore the limitless possibilities that AI and web development hold.

Watch the full course on the freeCodeCamp.org YouTube channel (1-hour watch).

This guide was put together by the team at InMotion Hosting. They offer web hosting, servers, and cloud WordPress hosting.

I created a course based on this guide (and other resources) to teach people how to improve the performance of their WordPress and non-WordPress websites. You can watch the course below or on the freeCodeCamp.org YouTube channel. InMotion Hosting provided a grant to make this video course possible. Right after the video embed you can start reading the guide.

Here are the top steps you can take right now to get immediate performance results:

• Setting Your Performance Goals
• Understanding a Website Request
• DNS Configuration & CDNs
• Server Configuration & Tuning for WordPress
• Caching Techniques
• Optimizing the WordPress Application
• Monitoring & Adjusting

Website performance is a critical factor in the success of any website, and optimizing your website for speed should be a top priority. This guide is an invaluable resource for anyone looking to optimize their website's performance and gain a competitive edge in the online marketplace. By following the practical advice and best practices outlined in this guide, you can improve your website's performance and provide your users with a fast, efficient, and enjoyable online experience.

Setting Your Performance Goals

Determining goals for optimizing a website's speed and performance is crucial to achieving desired outcomes. Here are some steps to help you establish clear goals and objectives:

• Define your purpose: Start by understanding why you want to optimize your site's speed and performance. Is it to enhance user experience, reduce bounce rates, improve conversion rates, or achieve better search engine rankings? Clarifying your purpose will guide your goal-setting process.
• Analyze current performance: Use tools like Google Lighthouse, Google PageSpeed Insights, Google Search Console, or WebPageTest to evaluate your website's current speed and performance. Identify areas where improvements are needed, such as slow loading times, excessive page weight, or high server response times. These insights will help you prioritize and set specific goals.
• Prioritize metrics: Determine which performance metrics are most important for your website. Common metrics include page load time, time to first byte (TTFB), render start time, and interactive time. Align these metrics with your purpose to identify the most critical areas for improvement.
• Set measurable targets: Establish specific, measurable, achievable, relevant, and time-bound (SMART) goals. For example, set a goal to reduce page load time by 30% within three months or achieve a TTFB of under 200 milliseconds. Clear targets will provide a benchmark for progress and help you stay focused.
• Consider user expectations: Understand your target audience's expectations and browsing behavior. Different websites may require different levels of optimization based on their user base. Consider factors like device usage (mobile vs. desktop), geographic location, and connection speeds to tailor your goals accordingly.
• Break it down: Divide your optimization goals into smaller, actionable tasks. For instance, optimizing image sizes, minifying CSS and JavaScript, leveraging browser caching, or implementing a content delivery network (CDN). Breaking down goals into manageable steps makes them more achievable and allows for incremental improvements.
• Monitor and iterate: Regularly monitor your website's performance using performance monitoring tools or website analytics. Track progress towards your goals and identify areas that need further optimization. Continuously iterate your strategies to adapt to changing technologies and user expectations.

By following these steps, you can establish well-defined goals for optimizing your website's speed and performance. Remember, the goals should be aligned with your website's purpose, measurable, and adaptable to evolving needs.

Performance Testing Tools

There are many testing tools available online to gauge your website performance. In this section, we want to get a website to rank better on Google, so we will use Google's tools to achieve our goals. There are also some other pretty awesome optimization tools such as GTMetrix, Pingdom, and many others.

Google Lighthouse

Before we explain how to assess your site prior to optimizing, let’s go over a quick outline of how the different pieces are weighted in the Lighthouse tests. The Lighthouse Scoring Calculator gives this information at a glance, and even allows you to plug in your own scores to understand how your overall PageSpeed score is calculated.

Inside Chrome’s Developer Tools (DevTools), you can use the code inspector to get to the Open Source Extension for Google Lighthouse. It is helpful because it runs tests right within your browser, and generates a report for you on how well the website you are looking at stacks up for both mobile and desktop versions. This test gives you information about performance, accessibility, best practices, and SEO.

Example of what this report looks like in your browser

Google Lighthouse also provides an “opportunity” list with items you can optimize on your page to improve your site's pagespeed, and by proxy, improve the performance scoring of your page.

PageSpeed Insights

PageSpeed Insights (PSI) is an online tool that tests your site and then delivers a score for both mobile devices and desktop computers. You will see a score and a breakdown of the metrics used to determine your site performance. PSI will also provide a breakdown of the issues causing any slowdowns to the performance of your site. Recommendations are provided on actions you can take to improve performance. PSI uses simulations and real-world data (when available) to provide its scores.

Chrome User Experience Report

The Chrome User Experience Report is also called the Core Web Vitals metrics. This is an aggregate of user experience metrics that is compiled from actual users that visit your website over the last 28 days.

This data is not comprehensive, however. These users are limited to people that have opted to sync their browser history with Chrome, and the data is made available by PageSpeed Insights, Google’s BigQuery project, and Data Studio. While it is helpful information when optimizing your website for speed and performance, it is not representative of everyone’s experience with your site.

Google Search Console

The Page Experience report in Google’s Search Console provides you with a summary of their measurement for your visitors' user experience. Google evaluates these metrics for individual URLs on your website and will use them as a ranking signal in search results.

This report covers Core Web Vitals, mobile usability, and HTTPS usage for every page that you have in Google’s index. In order for a page to be counted in this report's data, it must also have data in the Core Web Vitals report simultaneously.

Other Performance Testing Tools

We should mention other tools as well because this is by no means an exhaustive list.

In short, there are a ton of professional tools that you can use to measure your website’s performance, such as GTMetrix, Pingdom, WebPageTest, and more.

Any tool you use will guide you with things that need to be done to improve your website speed.

Why Are My Scores Always Different?

There are many factors that will impact the score you see on these tests. These variables can range from your location related to the website, activity on your server, network routes, and even the activity on your local computer.

Because of these and many other factors, no two tests will show the exact same results.

However, with a little persistence, you can minimize the impact that your server and website bring into the equation. Simply follow the suggestions, learn about them and implement best practices. This will increase the likelihood that your visitors will have a good user experience.View Lighthouse’s Score Variability documentation for a table containing several common sources of metric variability, the impact they have on results, and the extent to which they are likely to occur in different environments.

Speed and Performance Indicators

When testing your website’s performance and putting together your plan of attack, the tool you use will dictate the metrics used in the audit. Here are the top performance indicators to pay attention to. We recommend focusing on achieving passing (green) scores on Core Web Vitals before you move onto the other performance metrics.

Core Web Vitals

The key to success for your website is to focus on the user experience. Google’s Core Web Vitals are a set of metrics that measure real-world user experience for loading performance, interactivity, and visual stability of the page. These metrics are designed to help you understand how good the user experience is on your site compared to other sites on the web.

Core Web Vitals are broken down into a subset of page experience signals that apply to all websites and should be measured by website owners. The metrics that make up Core Web Vitals are subject to evolve over time as these signals are not set in stone, and are intended to change as time passes to continue improving the overall user experience on the web.

Page Experience Signals and Core Web Vitals are the best signals that developers have to measure and improve the quality of user experience, and they are broken down into Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Below, we will outline what each signal is, and share some best practices and steps to take to ensure you improve your website's performance in relation to each metric.

Tools that measure Core Web Vitals consider a page to be passing if it meets the recommended target of 75th percentile for all 3 metrics.

Largest Contentful Paint (LCP)

LCP measures your website's loading performance. In order to provide a good user experience for your visitors, your LCP should occur within 2.5 seconds of the initial page loading.

The types of elements that are considered for largest contentful paint are usually images or videos. It is important to understand that an element can only be considered the LCP once it is rendered, and the user can see it.

This metric is also tied to First Contentful Paint (FCP), which measures how long it takes for the initial DOM content to render, but FCP does not account for how long it takes the largest and usually more important content on page to render.

• What LCP represents: A user’s perception of loading experience.
• Lighthouse Performance score weighting: 25%
• What it measures: The point in the page load timeline when the page’s largest image or text block is visible within the viewport.
• How it’s measured: Lighthouse extracts LCP data from Chrome’s tracing tool.
• Is Largest Contentful Paint a Web Core Vital? Yes

LCP Scoring

What Elements are Part of LCP?

• elements
• elements inside an element
• elements (the poster image is used)
• An element with a background image loaded via the url() function (as opposed to a CSS gradient)
• Block-level elements containing text nodes or other inline-level text elements children.

How To Define LCP Using Chrome Devtools

1. Open the page in Chrome.
2. Navigate to the Performance panel of Dev Tools (Command + Option + I on Mac or Control + Shift + I on Windows and Linux).
3. Hover over the LCP marker in the Timings section.
4. The element(s) that correspond to LCP is detailed in the Related Node field.

What Causes Poor LCP?

Poor LCP typically comes from four issues:

• Slow server response times.
• Render-blocking JavaScript and CSS.
• Resource load times.
• Client-side rendering.

How to Improve LCP

The usual suspects of a poor LCP can be caused by many things. Some of the causes can be slow response times from the server, render blocking JavaScript and CSS, slow resource load times and even client rendering.

Slow server response times is the first thing you should tackle when optimizing for performance. A faster server response will directly impact and improve every page loading measurement, including LCP.

If the cause is slow server response time:

• Optimize your server.
• Route users to a nearby CDN.
• Cache assets.
• Serve HTML page cache-first.
• Establish third-party connections early.

If the cause is render-blocking JavaScript and CSS:

• Minify CSS.
• Defer non-critical CSS.
• Inline critical CSS.
• Minify and compress JavaScript files.
• Defer unused JavaScript.
• Minimize unused polyfills.

If the cause is resource load times:

• Optimize and compress images.
• Preload important resources.
• Compress text files.
• Deliver different assets based on the network connection (adaptive serving).
• Cache assets using a service worker.

If the cause is client-side rendering:

• Minimize critical JavaScript.
• Use another rendering strategy.

First Input Delay (FID)

First Input Delay (FID) measures a website's interactivity and focuses on input events from discrete actions like clicks, taps, and key presses. When a website does not respond in a certain amount of time after a user interaction, users experience this as lag, or slowdown. To provide a good user experience your web pages should have a FID of 100 milliseconds or less.

• What it represents: Your user's first impression of your site's interactivity and responsiveness.
• Lighthouse Performance score weighting: N/A
• What it measures: Measures the time from when a user first interacts with your site (when they click a link, tap a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.
• How it’s measured: FID requires a real user and thus cannot be measured in the lab. However, the Total Blocking Time (TBT) metric is lab-measurable and can be used as a proxy as it correlates well with FID in the field, and also captures issues that affect interactivity. Optimizations that improve TBT should also improve FID in the field.
• Is Largest Contentful Paint a Web Core Vital? Yes

FID Scoring

What Causes Poor FID?

The main cause of a poor FID is heavy JavaScript execution. Optimizing how JavaScript parses, compiles, and executes on your web page will directly reduce FID.

How to Improve FID

• Reduce the impact of third-party script execution
• Reduce JavaScript execution time
• Defer unused JavaScript
• Minimize unused polyfills
• Break up Long Tasks
• Optimize your page for interaction readiness
• Use a web worker
• Minimize main thread work
• Keep request counts low and transfer sizes small

Cumulative Layout Shift (CLS)

CLS measures visual stability. A good user experience is measured as having a CLS of 0.1 or less. This allows the experience to avoid any surprises for the user but isn’t particularly helpful for page speed, it's more a measurement that your website is following best practices and is a necessary piece for achieving a high performance score for your page.

These best practices include following common UX patterns that are optimized for CLS. When your page is loading, you should always be sure to set size attributes or reserve space. This will help ensure your page does not jitter and move for the customer while they are trying to interact with it.

Your website should never insert content above existing content unless a user interacts and expects the behavior, and you should always use transform animations when transforming the layout during said interactions.

• What it represents: The visual stability of a page. Instability is defined as unexpected movement of page content as the user is trying to interact with the page.
• Lighthouse Performance score weighting: 15%
• What it measures: CLS measures the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.
• How it’s measured: To calculate the layout shift score, the browser looks at the viewport size and the movement of unstable elements in the viewport between two rendered frames. The layout shift score is a product of two measures of that movement: the impact fraction and the distance fraction
• Is Cumulative Layout Shift a Web Core Vital? Yes

CLS Scoring

CLS Scores Color-Coding Score 0.1 Green (Fast / Good) 0.1 - 0.25 Orange (Moderate / Needs Improvement) Over 0.25 Red (Slow / Poor)

How To See CLS Using Chrome DevTools

Use DevTools to help debug layout shifts by leveraging the Experience pane under the Performance panel.

The Summary view for a Layout Shift record includes the Cumulative Layout Shift score as well as a rectangle overlay showing the affected regions.

What Causes Poor Layout Shifts?

• Changes to the position of a DOM element
• This is often the result of:
• Stylesheets that are loaded late or overwrite previously declared style.
• Delays in animation and transition effects.
• Changes to the dimensions of a DOM element
• This often the result of:
• Images, ads, embeds, and iframes without dimensions
• Insertion or removal of a DOM element
• Animations that trigger layout
• This is often the result of:
• Insertion of ads and other third-party embeds.
• Insertion of banners, alerts, and modals.
• Infinite scroll and other UX patterns that load additional content above existing content.
• Actions waiting for a network response before updating DOM

How to Improve CLS

• Always set size attributes to images and video elements, or allocate the correct amount of space for that element while it is loading.
• Never insert content above existing content, except during an intentional user interaction.
• Prefer transform animations to animations of properties that trigger layout changes.
• Preload fonts using <link rel=preload> on the key web fonts, and combine <link rel=preload> with font-display: optional

Additional Resources

• Cumulative Layout Shift (CLS) - web.dev
• Optimize Cumulative Layout Shift - web.dev
• Debug Layout Shifts - web.dev

Other Performance Opportunities

First Contentful Paint (FCP)

Measures time to render the first piece of DOM content.

• What it represents: The amount of time it takes the browser to render the first piece of DOM content after a user navigates to your page. Images, non-white <canvas> elements, and SVGs on your page are considered DOM content.
• Lighthouse Performance score weighting: 10%
• What it measures: FCP is a user-centric metric for measuring perceived load speed because it marks the first point in the page load timeline where the user can see anything on the screen.
• How it’s measured: The FCP score is a comparison of your page's FCP time and FCP times for real websites, based on data from the HTTP Archive.
• Is Largest Contentful Paint a Web Core Vital? No

FCP Scoring

FCP Time (seconds) Color-Coding Score 0 - 1.8 seconds Green (Fast / Good) 1.8 - 3 seconds Orange (Moderate / Needs Improvement) Over 3 seconds Red (Slow / Poor)

How to Improve FCP

• Eliminate render-blocking resources
• Minify CSS
• Remove unused CSS
• Preconnect to required origins
• Reduce server response times (TTFB)
• Avoid multiple page redirects
• Preload key requests
• Avoid enormous network payloads
• Serve static assets with an efficient cache policy
• Avoid an excessive DOM size
• Minimize critical request depth
• Ensure text remains visible during webfont load
• Keep request counts low and transfer sizes small

Additional Resources

• First Contentful Paint (FCP) - web.dev

Speed Index (SI)

• What it represents: The average time at which visible parts of the page are displayed.
• Lighthouse Performance score weighting: 10%
• What it measures: Speed Index measures how quickly content is visually displayed during page load. Lighthouse first captures a video of the page loading in the browser and computes the visual progression between frames.
• How it’s measured: The Speed Index score is a comparison of your page's speed index and the speed indices of real websites, based on data from the HTTP Archive.
• Is Largest Contentful Paint a Web Core Vital? No

Speed Index Scoring

How to Improve Speed Index

• Minimize main thread work
• Reduce JavaScript execution time
• Ensure text remains visible during webfont load
• Eliminate render-blocking resources

Additional Resources

• Speed Index - web.dev
• WebPagetest Speed Index

Total Blocking Time (TBT)

• What it represents: The total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses.
• Lighthouse Performance score weighting: 30%
• What it measures: TBT measures the time between First Contentful Paint and Time to Interactive. TBT is the lab equivalent of First Input Delay (FID) – the field data used in the Chrome User Experience Report and Google’s Page Experience ranking signal.
• How it’s measured: The total time in which the main thread is occupied by tasks taking more than 50ms to complete. If a task takes 80ms to run, 30ms of that time will be counted toward TBT. If a task takes 45ms to run, 0ms will be added to TBT.
• Is Total Blocking Time a Web Core Vital? Yes! It’s the lab data equivalent of First Input Delay (FID).

TBT Scoring

Long Tasks and Total Blocking Time

TBT measures long tasks – those taking longer than 50ms.

When a browser loads your site, there is essentially a single line queue of scripts waiting to be executed.

Any input from the user has to go into that same queue.

When the browser can’t respond to user input because other tasks are executing, the user perceives this as lag.

Essentially, long tasks are like that person at your favorite coffee shop who takes far too long to order a drink.

Like someone ordering a 2% venti four-pump vanilla, five-pump mocha whole-fat froth, long tasks are a major source of bad experiences.

What Causes High TBT on your Page?

• Heavy JavaScript
• Heavy CSS

That’s it.

How To See TBT Using Chrome DevTools

How to Improve TBT

• Break up Long Tasks.
• Optimize your page for interaction readiness.
• Use a web worker.
• Reduce JavaScript execution time.

Additional Resources

• First Input Delay (FID) - web.dev
• Total Blocking Time (TBT) - web.dev
• Optimize First Input Delay - web.dev
• Lighthouse: Total Blocking Time - web.dev

Time to First Byte (TTFB)

Time to First Byte (TTFB) is a foundational metric for measuring the time between the request for a resource and when the first byte of a response begins to arrive. It helps identify when a web server is too slow to respond to requests.

TTFB is the sum of the following request phases:

• Redirect time
• Service worker startup time (if applicable)
• DNS lookup
• Connection and TLS negotiation
• Request, up until the point at which the first byte of the response has arrived

TTFB Scoring

How to Improve TTFB

• Hosting services with inadequate infrastructure to handle high traffic loads
• Web servers with insufficient memory that can lead to thrashing
• Unoptimized database tables
• Suboptimal database server configuration
• Avoid multiple page redirects
• Preconnect to required origins for cross-origin resources
• Submit your origin to the HSTS preload list to eliminate HTTP-to-HTTPS redirect latency
• Use HTTP/2 or HTTP/3
• Use server-side generation (SSG) for markup instead of SSR where possible and appropriate

Minimizing TTFB starts with choosing a suitable hosting provider with infrastructure to ensure high uptime and responsiveness. This in combination with a CDN can help significantly.

Understanding a Website Request

In this section, we'll discuss how the speed of a request to a website impacts overall website performance.

When a user makes a request to load a website, a series of processes happen behind the scenes to deliver the requested content to the user's browser. The process can be broken down into the following steps:

1. DNS Lookup: The Domain Name System (DNS) is a distributed database that maps domain names to IP addresses. When a user types a URL into their browser, the browser first sends a request to a DNS server to look up the IP address of the domain name.

1. Connection: Once the browser has the IP address of the website, it establishes a connection to the server hosting the website using the Hypertext Transfer Protocol (HTTP) or the more secure HTTPS protocol.
2. Request: After establishing the connection, the browser sends an HTTP request to the server requesting the specific web page or resource that the user wants to access.

1. Processing: The server receives the request and begins to process it. This may involve executing scripts, querying databases, and retrieving files from the file system.
2. Response: Once the server has processed the request, it sends an HTTP response back to the browser. This response includes the requested content, such as the HTML, CSS, JavaScript, and any images or other resources required to display the web page.
3. Rendering: The browser receives the response from the server and begins to render the web page. This involves parsing the HTML and rendering the layout, styling the page with CSS, executing JavaScript, and loading any images or other resources required to display the page.
4. User Interaction: Finally, the user can interact with the web page, clicking on links, filling out forms, and performing other actions.

These steps happen very quickly, often in a matter of milliseconds, but any delay or bottleneck in any of these steps can cause the page to load slowly or not at all, leading to a poor user experience. To optimize website performance, it's important to identify and address any performance issues at each stage of this process.

Server Configuration & Tuning for WordPress

These tips explain what measures can be taken with Redis, MySQL, Opcache, and other technologies to achieve a high performance server. There are many opportunities to improve performance. We focus on fast storage and emphasize tuning the cache. Accessing files from NVMe storage, storing PHP scripts in Opcache, and compressing responses with Brotli are all part of a high performance server. Read on to find out how to analyze your server performance and make incremental improvements.

Install and Configure Redis

Services like Redis and Memcached can significantly improve WordPress performance by caching data in memory and reducing the number of database calls required to serve content. They act as key-value stores that temporarily hold frequently accessed or computationally expensive data, resulting in faster response times and reduced server load. WordPress can be configured to use Redis as an object store by employing specific plugins, such as Redis Object Cache or W3 Total Cache.

Once Redis is installed and configured, you can check the following items to ensure Redis is optimized and operating at its full capacity.

Memory Usage

Check Redis memory usage with the following command (some output has been omitted):

When used_memory_peak is close to maxmemory, Redis may not have enough resources to operate to its full capacity. In addition, Redis may be actively evicting keys from the cache to make room for new ones. This is not ideal, and key eviction should be avoided if possible. Increase the maxmemory variable in your Redis configuration to resolve this issue.

Key Eviction

Key eviction is the process of removing old and unused data from the cache to make room for new data. This can be especially problematic for high-traffic websites that rely on Redis caching to improve performance. If your system resources allow for it and the evicted_keys count is high, it is again recommended to increase maxmemory. The following command will provide information about the number of keys and how many have been evicted.

By examining these aspects and making appropriate adjustments, you can optimize Redis to significantly enhance your WordPress site's performance

Optimize the Database

If object caching like Redis is not available for the WordPress site, requests for database content go straight to the database. First, the database checks its cache to serve the result directly, if possible, and stores it for future use. If caching is unavailable or not allowed, the query proceeds to the database. The database combines cached and uncached information, requesting data from the Operating System. The speed of retrieving the data depends on available RAM and the storage type, with NVMe being the fastest and HDD being the slowest. Simple queries return data immediately to the PHP call, while complex queries requiring temp tables demand more processing time and can slow down the website or cause server issues under high traffic.

Several tuning techniques can improve performance.

Set the buffer pool size

The buffer pool is the area of memory that MariaDB uses to cache data and indexes. It is important to configure the buffer pool size appropriately based on the amount of available memory and the size of the database. A good rule of thumb is to set the buffer pool size to about 40% of available memory, but keep in mind this percentage is typically applicable only on stand-alone database servers. The buffer pool size can be controlled using the innodb_buffer_pool_size variable. See https://mariadb.com/kb/en/innodb-buffer-pool/ for more information.

One way to analyze buffer pool performance is by observing the innodb_buffer_pool_wait_free status variable. If it is increasing, then you don't have enough buffer pool (or your flushing isn't occurring frequently enough). In this case, you should set the innodb_buffer_pool_size variable higher if your system resources allow for it.

Enable query cache

Query cache is a feature that stores the results of frequently executed queries in memory, which can significantly improve query performance. It is recommended to enable query cache, but it's important to note that it may not be effective for all workloads. The query cache can be enabled or disabled using the query_cache_type variable. See https://mariadb.com/kb/en/query-cache/ for more information.

The SQL server stores stats about the Query Cache.

Qcache_inserts contains the number of queries added to the query cache, Qcache_hits contains the number of queries that have made use of the query cache, while Qcache_lowmem_prunes contains the number of queries that were dropped from the cache due to lack of memory.

The above example could indicate a poorly performing cache. More queries have been added, and more queries have been dropped, than have actually been used.

Set In-memory Table Size Limits: As previously mentioned, complex queries will cause the SQL server to create temporary tables. The SQL server will attempt to create tables in memory up to a certain size for performance. It is important to set the max size to an appropriate value to avoid creating on-disk temporary tables. The variables that control this behavior are tmp_table_size and max_heap_table_size. You can compare the number of internal on-disk temporary tables created to the total number of internal temporary tables created by comparing Created_tmp_disk_tables and Created_tmp_tables values. See server-system-variables/#tmp_table_size and server-system-variables/#max_heap_table_size for more information.

You can see if it's necessary to increase by comparing the status variables Created_tmp_disk_tables and Created_tmp_tables to see how many temporary tables out of the total created needed to be converted to disk.

In the above example, the SQL server is not having to create temporary tables on disk. This is considered optimal.

Prune WordPress Database

Without intervention, WordPress will store junk/unused data in the database. Over time, this can add up causing database bloat and serious performance lags. This includes items such as:

• Post revisions
• Auto-saved drafts
• Trashed posts
• Trashed comments
• Comment spam
• Tables for plugins and themes that are no longer active or installed
• Transient records

In your wp-config.php file, add or edit the following setting to limit the number of post revisions saved to the database.

Many resources exist on the internet for dealing with these items.

Monitor Performance

It's important to regularly monitor the performance of MariaDB and adjust the configurations as necessary. This includes monitoring CPU usage, memory usage, disk I/O, and query performance. Use a tool like mysqltuner to gain insights on the performance of the SQL installation, or enable Slowquery logging to identify long running queries.

Review Opcache Hit Rates and Stats

Opcache provides significant benefits when used with PHP-FPM. When a PHP file has been previously requested and there is enough opcache available, the script is already stored in memory. This allows for faster execution as it stands ready to accept data inputs without having to reload the file from disk. It is important to maximize Opcache Hits and minimize misses.

PHP provides several built-in functions to obtain information about OPcache status and configuration like opcache_get_status() and opcache_get_configuration(). Additionally, there are several web-based monitoring tools to visualize OPcache usage and performance. Some popular options include:

• OPcache GUI (https://github.com/amnuts/opcache-gui): A single-file PHP script that provides a simple and clean interface to monitor OPcache usage and performance.
• OCP (https://github.com/ck-on/ocp): A web-based OPcache control panel that allows you to monitor and manage OPcache settings in real-time.
• OPcache Status (https://github.com/rlerdorf/opcache-status): A one-page opcache status page for the PHP 5.5 opcode cache.
• CacheTool (https://github.com/gordalina/cachetool) : CacheTool allows you to work with APCu, OPcache, and the file status cache through the CLI. It will connect to a FastCGI server (like PHP-FPM) and operate on its cache.

To use these tools, download and install them on your web server, following the instructions provided in their respective repositories. Keep in mind that some of the information displayed by these tools can reveal information about web server files, or other sensitive information about the website. It is best to keep these interfaces secured by IP, or another form of authentication.

When reviewing Opcache Statistics there are a few key items to look for and assess.

Opcache Hit Rate

The hit rate is the percentage of requests that are being served using cached opcode instead of parsing and compiling the scripts anew.

The above hit rate suggests opcache requires more memory or resources to perform to its full capacity. A high hit rate close to 100 indicates that the cache is functioning effectively and providing the desired performance benefits. Monitoring the hit rate can help identify if adjustments to OPCache settings are necessary to improve its efficiency. The next section explains how to adjust the memory allocation for opcache.

Memory Consumption

Analyzing memory usage involves checking the amount of memory allocated to the OPCache and how much of it is being utilized.

In the above output, the administrator would want to consider increasing the opcache.memory_consumption to a value higher than 128MB as the “cache_full” boolean is true and free_memory is at 8 bytes. This information helps determine if there is a need to increase or decrease the memory allocation, based on the size and complexity of your PHP scripts. Ensuring an appropriate memory allocation helps prevent cache evictions and promotes a more efficient use of server resources.

Both num_cached_keys and max_cached_keys are metrics that provide insight into the number of cached keys (compiled PHP scripts) currently stored in the OPCache (num_cached_keys) and the maximum number of cached keys allowed (max_cached_keys).

By comparing these values, you can identify if the cache is nearing its capacity or if adjustments are needed to optimize the cache size. If num_cached_keys frequently approaches max_cached_keys, it may be beneficial to increase the opcache.max_accelerated_files value to accommodate more scripts, reducing cache evictions and further improving performance.

Regularly reviewing these key items can help you optimize the OPCache configuration, leading to improved website performance and reduced server resource usage.

Utilize NVMe Storage

As previously mentioned in the database optimization section, NVMe storage helps database server performance by providing significantly faster data access and reduced latency compared to traditional storage solutions. This results in quicker response times and more efficient query processing, leading to improved overall server performance.

NVMe storage improves server performance for WordPress websites in several ways:

Faster Page Load Times

With its high-speed data transfer and low latency, NVMe storage allows for quicker access to website files and assets, such as images, stylesheets, and scripts. This leads to faster page load times and a better user experience.

Improved Database Performance

The benefits of using NVMe storage when processing database queries can be outlined as follows:

1. When processing queries, the database relies on both cached and uncached MySQL data, requiring interaction with the operating system to retrieve the necessary information.
2. If the operating system has ample RAM, the files needed for a query might already be stored in RAM rather than only being available on a persistent storage device.
3. In cases where data must be accessed from a storage device, an NVMe drive provides significantly faster data retrieval compared to a SATA SSD, while traditional HDDs are much slower and typically not used in such scenarios anymore.

Overall, using NVMe storage greatly enhances database query performance due to its rapid data access capabilities.

Enable Brotli and Gzip Compression

Compressing web server responses with Brotli or Gzip can significantly improve website performance by reducing the amount of data transferred over the network. This provides a final stage of optimization on the response being returned from the Origin Server. On average, Gzip compression can reduce the size of web content by 60-70%, while Brotli tends to provide even better compression rates, often reducing content size by 70-80%.

Enabling Brotli compression within NGINX is accomplished through the use of the brotli nginx module. The module can be compiled and installed alongside NGINX and loaded dynamically.

Analyze a Server Response for Compression

To determine if a request response was compressed with Brotli or Gzip compression, you can use Chrome or Firefox Developer Tools to review the Content-Encoding header – follow these steps:

1. Open the developer tools in your browser:

2. In Chrome, press Ctrl + Shift + I (Windows/Linux) or Cmd + Opt + I (Mac).

3. In Firefox, press Ctrl + Shift + I (Windows/Linux) or Cmd + Opt + I (Mac).

4. Or right click on the webpage and select Inspect.

5. Click on the "Network" tab in the developer tools.

6. Refresh the webpage or initiate the action you want to analyze. This will populate the network panel with a list of requests made by the browser.
7. Find the request you're interested in, such as the main document request or a specific resource like a CSS or JavaScript file. Click on the request to open the detailed view.
8. In the detailed view, look for the Headers tab (this should be the default tab in both browsers). Scroll down to the Response Headers section.
9. Check the value of the Content-Encoding header. If the response is compressed with Gzip, it will display gzip, and if it's compressed with Brotli, it will display br. If the header is absent or has a different value, the response is not compressed using either of these algorithms.

By examining the Content-Encoding header in the developer tools, you can quickly determine if a request response was compressed with Brotli or Gzip.

NGINX Proxy Caching

Serving requests from the Nginx cache can result in significant performance improvements, as it eliminates the need for the request to traverse the entire stack and access the backend services. This can lead to reduced processing times and improved response times, resulting in a better user experience.

According to benchmarks, serving requests from the Nginx cache can result in a 90% reduction in response times compared to requests that traverse the entire stack. This is due to the caching mechanism's ability to serve requests directly from memory or disk, reducing the time taken to process the request.

Furthermore, serving requests from the Nginx cache can significantly reduce server load and improve scalability. By reducing the number of requests that must be handled by backend services like PHP-FPM or MySQL, the server can handle more requests concurrently, leading to improved performance and faster response times. This is essential for a high traffic website.

Our UltraStack NGINX configuration adds an X-Proxy-Cache HTTP header to responses and the Upstream Cache Status to nginx access log entries. The following three techniques explain how to identify whether the page being received is a cached version served by Nginx:

1. Using cURL: make a simple GET request to the URL in question, and use grep to check the X-Proxy-Cache header.

1. Using Chrome DevTools: Headers can also be easily inspected using the Chrome DevTools. Use F12 or Ctrl+Shift+I to bring up the DevTools window, then click the Network tab. Tick the box that says “Disable cache”, which will bypass Chrome's internal cache, then reload the page to capture all of the network information (not disabling Chrome's cache will allow you to see 304 Not Modified responses for static assets, which shows how the client-side cache is working).

1. Using NGINX access log: Connect to the server using SSH and read the access log with a tail or cat.

The value assigned to ucs= (HIT in the above example) or the “Upstream Cache Status” will be one of the above cache statuses.

Using Central’s Manage Server tools, here is how you would enable NGINX proxy cache on your site:

With NGINX proxy cache configured, you may use our Ultrastack Utilities to determine the cache HIT rates for all requests to NGINX.

While this is a tool specific to InMotion Hosting, the information can be retrieved using the third party NGINX module, nginx-module-vts.

In summary, using NGINX proxy cache will help drive performance for high traffic websites.

Use TLSv1.3 and HTTP/2

TLS (Transport Layer Security) is a cryptographic protocol that provides secure communication between web clients and servers. TLS 1.3 is the latest version of the TLS protocol and is designed to provide faster and more secure communication compared to previous versions.

TLS 1.3 also introduces several new features that improve website performance, such as 0-RTT (Zero Round Trip Time) handshakes, which allows returning visitors to establish a secure connection more quickly. Additionally, TLS 1.3 reduces the number of round trips required to establish a secure connection, which reduces latency and improves website performance.

Here are two ways to determine if an nginx web server is using TLS 1.3:

1. Using the nginx access log: In the nginx access log, look for requests that were made over HTTPS (port 443) and check the TLS protocol version used by the client. If the client and server are using TLS 1.3, the access log will show the protocol version as "TLSv1.3". For example, a log entry for a request using TLS 1.3 might look like this:

https://nginx.org/en/docs/http/ngx_http_ssl_module.html#variables

2. Using an SSL/TLS checker: To determine if an nginx server is using TLS 1.3 using an SSL/TLS checker, run a test on the server using the checker tool, such as SSL Labs' SSL Server Test or Qualys SSL Labs SSL Server Test. The tool will analyze the server's SSL/TLS configuration and provide information about the TLS protocol being used, including whether TLS 1.3 is enabled. The report generated by the tool will also provide details about the server's SSL/TLS configuration, including any issues or vulnerabilities that were found.

Configure NGINX: To set the ssl_protocols parameter in the nginx configuration, open the /etc/nginx/nginx.conf file and locate the ssl_protocols parameter in the http block, then set the desired SSL/TLS protocols (e.g., ssl_protocols TLSv1.2 TLSv1.3;) and save the file. Finally, test the configuration using nginx -t and reload the nginx service using systemctl reload nginx.

https://nginx.org/en/docs/http/ngx_http_ssl_module.html#ssl_protocols

HTTP/2 is the latest version of the HTTP protocol that powers the web. It is designed to improve website performance by reducing latency and enabling faster page load times. HTTP/2 achieves this by introducing several new features, including multiplexing, header compression, and server push.

There are a few ways to determine if an nginx web server is using HTTP/2:

1. Check the response headers: When a client makes a request to an nginx server, the server responds with headers that include information about the protocol being used. If HTTP/2 is being used, the response headers will include the string "HTTP/2" in the "server" field. For example, the "server" field may read "nginx/1.20.1 (Ubuntu) HTTP/2".

2. Use a browser developer tool: Another way to determine if an nginx server is using HTTP/2 is to use a browser developer tool, such as Chrome DevTools or Firefox Developer Tools. When the tool is open and a page is loaded from the nginx server, the "protocol" column in the network tab will show "h2" if HTTP/2 is being used. If HTTP/1.x is being used, the protocol column will show "http/1.1".

Configure NGINX: To configure nginx to use HTTP/2, you need to ensure that your nginx version supports HTTP/2 and then enable it by adding the http2 parameter to the listen directive in the server configuration file, and also include an SSL certificate. For example, the directive listen 443 ssl http2; would enable HTTP/2 over SSL on port 443.

http://nginx.org/en/docs/http/ngx_http_v2_module.html

Increase Server Resources

While the exact amount depends on the specific workload of the website, a minimum of 4GB and 2 vCPU cores is recommended when benchmarking your resource needs on a high traffic website. In a high-performance server running MySQL, Redis, PHP-FPM, Apache, and Nginx, having enough RAM is critical to allow each service's caching techniques to work at their full potential.

These services use RAM to cache frequently accessed data and reduce the time taken to retrieve it from disk or other storage devices. If the server does not have enough RAM, the caching will not be as effective, leading to longer processing times and slower website performance.

For instance, MySQL uses the InnoDB buffer pool to cache frequently accessed data from the database, and Redis uses memory to store frequently accessed data in key-value pairs. PHP-FPM uses opcache to cache PHP scripts, and Nginx uses RAM to cache frequently requested web pages and assets.

If the server does not have sufficient RAM, these caching techniques will not be as effective, and the server may resort to swapping data in and out of slower storage devices, leading to slower response times and reduced server capacity.

Swap Usage

To determine if a Linux server is swapping, you can use the free command to view the system's memory usage. If the "Swap" value is greater than zero, it indicates that the server is currently using swap space to store data in memory.

Additionally, you can use the vmstat command to monitor the amount of swapping activity occurring on the server, with the "si" and "so" values indicating the amount of memory being swapped in and out, respectively.

The above server does not use Swap and is not swapping.

OOM Kills

To determine if a Linux server is experiencing OOM (Out of Memory) kills, you can check the system logs for messages related to OOM events. On most Linux distributions, the system log file is located at /var/log/messages or /var/log/syslog.

To view OOM-related messages, you can search for the keyword "OOM" using the grep command:

If OOM events are occurring, you will see log entries that indicate which process or application was killed by the OOM killer. Additionally, you can use tools like dmesg and journalctl to view kernel messages related to OOM events.

By having enough RAM on the server, each service can utilize caching techniques to their fullest extent, resulting in faster processing times, reduced disk usage, and an overall better user experience.

Caching Explained with Implementation Techniques

ETags

The ETag (or entity tag) HTTP response header that web servers and browsers use to determine whether a resource in the browser’s local cache matches the one on the origin server.

When a user revisits a site, one of two things happen:

• Display content to the user in the browser it if is within the allowable cache freshness time - Time to Live (TLL)
• If content is out of its cache time (TTL expired) then:
• If it has an Etag then it will need to send an Etag to the resolved URL to see if it needs to refresh.
• If it gets the matching Etag, then it will keep the content it has (no new downloading of content) and set the existing content’s TTL into the future which makes it a viable cached content for the TTL.
• If it gets a different Etag then it will trigger a fresh download of the new content.
• If it does not have an Etag then it will send a request out to get the potentially new content and will download that content regardless of if it really is new or not.

It is important to note that the Etag request and response is much, much smaller than a download of content. As most websites do not change between TTLs, the TTLs need to be low “just in case” the site does change, therefore the Etag process is much more efficient than TTLs by themselves.

How to Check if Your Server Responds is Using ETags

1. Open the developer tools in your browser:
2. In Chrome, press Ctrl + Shift + I (Windows/Linux) or Cmd + Opt + I (Mac).
3. In Firefox, press Ctrl + Shift + I (Windows/Linux) or Cmd + Opt + I (Mac).
4. Or right click on the webpage and select Inspect.
5. Click on the Network tab in the developer tools.
6. Refresh the webpage or initiate the action you want to analyze. This will populate the network panel with a list of requests made by the browser.
7. Locate a specific resource like a CSS or JavaScript file. Click on the request to open the detailed view.
8. In the detailed view, look for the Headers tab (this should be the default tab in both browsers).
9. Scroll down to the Response Headers section for the selected file and check for the presence of an Etag.

How to Configure ETags in W3 Total Cache

1. In your WordPress admin dashboard, navigate to Performance > Browser Cache.
2. Scroll down to the General section.
3. Check the box next to the “Set entity tag (ETag)” setting.
4. On the same page, using the method above, you can also enable or disable ETags for specific files types, including: CSS & JS, HTML & XML, Media & Other Files
5. Press the Save Settings & Purge Caches button within each respective settings box to save and apply the caching changes immediately.

Time To Live (TTL)

The Time To Live (TTL) value is the time that an object is stored in a caching system before it’s deleted or refreshed. In the context of CDNs, TTL typically refers to content caching, which is the process of storing a copy of your website resources (e.g., images, text, Javascript) on CDN proxies to improve page load speed and reduce origin server bandwidth consumption.

TTLs are used for caching purposes, and the value is stored in seconds. If the TTL value is set to a low number like 3600 seconds, the data will be stored in the cache for one hour. After one hour, a new version of the data needs to be retrieved.

If the TTL value is set to a high number like 86400 seconds, the data will be stored in the cache for 24 hours.

High TTL values cache your data longer, and lessen the frequency for retrieving new data. This gives your website a performance boost by reducing the server's load, which improves the user's experience.

TTL Policies for Static and Dynamic Content

Before you set your cache TTL policies, you need to consider the types of content you have: static and dynamic.

Static files like images and PDFs do not change frequently, so these should have a long TTL policy. This ensures that these files are cached for a longer period of time.

Dynamic content (e.g. CSS, HTML, database driven content) is updated on a frequent basis, so these resources need to be set accordingly. Dynamic content will have varying TTL policies, whether that’s a few minutes, seconds, or none at all.

Setting TTL Policies in W3 Total Cache

1. In your WordPress admin dashboard, navigate to Performance > Page Cache.
2. Scroll down to the Advanced section.Locate the “Maximum lifetime of cache objects:” setting and set the max-age length.
3. Scroll down to the bottom and press the Save Settings & Purge Caches button to save and apply the settings immediately.

HTTP Cache-Control Headers

• Cache-Control: Max-Age
• The max-age directive specifies the maximum amount of time that a resource can be cached by a client or a proxy server. After expiring, a browser must refresh its version of the resource by sending another request to a server.
• cache-control: max-age=3600 means that the returned resource is valid for one hour, after which the browser has to request a newer version.
• Cache-Control: No-Cache
• The no-cache directive tells a browser or caching server not to use the cached version of a resource, and to request a new version of the resource from the origin server.
• Cache-Control: No-Store
• The no-store directive tells browsers to never store a copy of the resource and not to keep it in cache. This setting is usually used for sensitive information like credit card numbers, and ensures PCI compliance by not storing this type of data in the cache.
• Cache-Control: Public
• The public response directive indicates that a resource can be cached by any cache. This directive is useful for resources that change infrequently, and when the resource is intended for public consumption.
• Cache-Control: Private
• The private response directive indicates that a resource is user specific - it can still be cached, but only on a client device. For example, a web page response marked as private can be cached by a browser, but not a Content Delivery Network.
• This directive can be used in conjunction with the max-age directive to specify how long the resource can be cached before it needs to be revalidated.

Setting HTTP Cache-Control Headers in W3 Total Cache

1. In your WordPress admin dashboard, navigate to Performance > Browser Cache.
2. Determine what your Cache-Control policies will be for the following files:
3. CSS & JS
4. HTML & XML
5. Media & Other Files
6. Locate the CSS & JS section.
7. Check the box next to the “Set cache control header” setting.
8. Below that option, select the “Cache Control policy:” from the selections provided.
9. Repeat step 3 for these sections:
10. HTML & XML section
11. Media & Other Files
12. Scroll down to the bottom and press the Save Settings & Purge Caches button to save and apply the settings immediately.

Cache Busting

Cache busting is a technique used to force a browser or caching server to retrieve a new version of a resource, rather than using the cached version. One way to do this is by using a query parameter, such as a timestamp or a version number, in the URL of the resource.

For example, instead of requesting a resource at the URL https://www.example.com/styles.css, a cache-busting URL would look like https://www.example.com/styles.css?v=1234, where v=1234 is the query parameter. This query parameter can be a timestamp or a version number, and it will be ignored by the server, but it will force the browser or caching server to treat the request as a new request, rather than using the cached version of the resource.

This technique is often used for static resources like stylesheets, scripts, images and so on, that are intended to be cached, but that may need to be updated frequently. By appending a query parameter to the URL, a new version of the resource will be retrieved each time the query parameter changes.

This technique is commonly used to ensure that the client gets the latest version of the resources after they are updated on the server side.

Enable Cache Busting in W3 Total Cache

Enabling Cache Busting in W3 Total Cache is done by selecting the option “Prevent caching of objects after settings change” under Performance > Browser Cache. This adds a random string at the end of static asset URLs.

Whenever a change is made to a static asset, busting cache is done by navigating to the Browser Cache page under performance, and clicking “Update Media Query String” at top. This regenerates a new string that appends to the static asset URL, which will not match the URL of the stored version in your browser so it will show the updated version to the visitor.

Proxy Caching / CDNs

Cache storage is a finite resource, so every bit of storage performance matters. Caching at proxy servers is one of the ways to reduce the response time perceived by World Wide Web users.

Explain choices: Ease of use versus complicated configurations vs your needs

• CDN level / edge caching
• Server (NGINX) Proxy Cache
• WordPress Plugins / Application level caching

What do you have now? What is your budget? (CDN’s can be expensive) Bunny has a region based solution, with explicit pricing per region we can mention here.

Where is your audience in relation to your server?

What do we want to guide user to do?

Cache Eviction Policies

Cache replacement algorithms play a central role in reducing response times by selecting specific website assets for caching, so that a given performance metric is maximized. They do this by deciding which objects can stay and which objects should be evicted the next time the website is accessed.

• Least Recently Used (LRU): Replaces the cache line that has been in the cache the longest with no references to it.
• First-In First-Out (FICO): Replaces the cache line that has been in the cache the longest.
• Least Frequently Used (LFU): Replaces the cache line that has experienced the fewest references.
• Random: Pick a line at random from the candidate lines.

Caching Storage Engines

For the different types of caching and storage engines available in the W3TC plugin. The following list outlines those choices for you.

Disk-Based Methods with W3 Total Cache

• Disk: Basic is the option that invokes a PHP script (advanced-cache.php) that does the hard caching job.
• Disk: Enhanced is the more efficient way of caching. This method does not invoke PHP scripts but solves the caching task in a much more elegant way by creating a static version of a web page and serves that instead of the dynamic version of your website via rewrites in the .htaccess file. This approach lets your web server deal with a static (cached) version of your web pages directly. Some tests reveal that the Enhanced method makes a website up to 2.5 times faster when compared to the Basic method.

RAM Based Methods with W3 Total Cache

• Memcached is a high-performance, distributed memory object caching system meant to speed up dynamic web applications by alleviating database load. It provides an in-memory key-value store for small chunks of arbitrary data (strings, objects) from the results of database calls, API calls, or page rendering.
• Memcached is ideal for relatively small and static data, and as a result may be more efficient than Redis in smaller data sets. It is also multi-threaded, which may be a benefit when using a VPS or Dedicated Server with a large resource pool.
• Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker. It supports data structures such as strings, hashes, lists, sets, sorted sets with range queries, bitmaps, hyperloglogs, geospatial indexes with radius queries and streams. Redis data structures resolve very complex programming problems with simple commands executed within the data store, reducing coding effort, increasing throughput, and reducing latency.

OPcode Based Methods with W3 Total Cache

• Alternative PHP Cache (APC / APCu) which provides in-memory Opcode caching and a key-value store for looking up cached items. This is largely deprecated in favor of modern Opcode Caching mechanisms, as APC is not supported in the PHP 7.x branch.
• APCu is similar to APC, though in order to support modern variants of PHP it is stripped of Opcode Caching and only provides the in-memory key-value store mechanisms. When paired with modern Opcode Caching mechanisms it can provide the functionality originally provided by APC, though it should only be used when you require having a limited cache size.
• eAccelerator is an in-memory Opcode caching solution that supports the PHP 4.x and 5.x major versions. This is largely deprecated in favor of modern Opcode Caching mechanisms, as eAccelerator is not supported in the PHP 7.x branch.
• XCache is an in-memory Opcode caching solution that supports up to the PHP 5.6 release. This is largely deprecated in favor of modern Opcode Caching mechanisms, as XCache is not supported in the PHP 7.x branch.
• WinCache (Recommended for Windows-based Environments) is an extension for Microsoft IIS which provides in-memory Opcode caching and currently supports up to IIS 10 as of 04/30/2019. Check the official Microsoft product page for the latest information.

Page Caching

Page caching refers to caching the content of a whole page on the server side. Later when the same page is requested again, its content will be served from the cache instead of regenerating it from scratch.

A page from a WordPress website contains dynamic content: PHP scripts, JavaScript, and SQL queries. Executing this dynamic content is very resource heavy and takes a lot of time. Page caching allows for forming a part of the web page into static HTML. With page cache enabled, website content displays faster for a visitor with less load to the server. It’s one of the most efficient ways to improve your website performance.

Explain why Disk Enhanced is often recommended, under what scenarios is another type of page cache going to give better performance?

CDN, NGINX Proxy Cache, etc…

Object Caching

Object caching is the process that involves storing database queries to serve a specific piece of data on the subsequent server request. As a result, there will be fewer queries sent to the database and the result is your website will load much faster.

WordPress Object Cache

The idea of an Object Cache is that WordPress Core, themes, and plugins may store some data that is frequently accessed and rarely changed in an object store. This is so these objects will not have to be retrieved and processed on each request.

wp_object_cache is WordPress’ class for caching data, and by default, the object cache is non-persistent. This means that data stored in the cache resides in memory only and only for the duration of the request. Cached data will not be stored persistently across page loads unless you install a persistent caching plugin.

Ultimately, Object Caching will reduce the total number of database queries required for each page load. When the CPU does not have to rebuild these blocks of data, your response time will decrease.

Store Transients in the Database with W3 Total Cache

Transients are the data that exists in memory (in cache) for current WordPress activity. It makes the website faster. However, when the cache is cleared or expires, the heavy numerous database requests should run again to re-fill the cache. In order to avoid these resource-intensive database requests, it’s recommended to save transient data into the database. It results in much less database load when the cache is cleared or expires.

In W3 Total Cache, there is an option to store transients in the database. This setting can be enabled in one of two areas: Object Caching Advanced Settings or by navigating to Performance > Object Cache.

Database Caching

Database caching will store the results of MySQL database queries, in theory making it faster to return a response. While this does sound like it would be useful, it is recommended that you disable it, and use Object Cache via Redis or Memcache instead.

Optimizing the WordPress Application

Once the server and database have been tuned for performance, the next step is to ensure the application is optimized for performance. This can be done by leveraging techniques designed to deliver assets more efficiently, or remove any unnecessary data from them resulting in faster transfers. The following are some of the most effective techniques you can use when it comes to optimizing your WordPress site for speed, but it is not an exhaustive list.

Top 10 Techniques to Improve Core Web Vitals for WordPress

When focusing on page and website performance, there are some essential tasks you can complete to help you achieve the performance results you are looking for. These tasks include configuring caching, following best practices for elements that can introduce layout shifts, and adjusting your assets to ensure they are configured for the fastest possible delivery to your visitors.

1. Page Caching

WordPress is a dynamic program by default, so the easiest way to speed things up is to create a static version of your website pages, and use redirects to serve those cached files instead of calculating the result again with PHP and MySQL. This cache can be stored on the disk, in the server's RAM or if you are using a CDN, on a Point of Presence or Edge Server.

If you are storing the page cache on the web server, then it is recommended to use Disk: Enhanced storage, so the web server redirects can serve the cache prior to the request reaching PHP, essentially making the site load faster by using these static files instead of recreating them with queries and calculations.

Storing page cache on a CDN at the edge is a practice known as Full Site Delivery or Acceleration, where the website is served by sending a cached version of the website from a geographic location near the visitor, as opposed to the request reaching out to the origin server where the data lives. This removes location introduced latency from the equation, making websites much faster for all of your visitors.

2. Object Caching with Redis

By default, the object cache in WordPress is not persistent. This means that data stored in the cache resides in memory for the duration of the request and is removed after the response is delivered. To store these cached objects for reuse, you can use a plugin that connects the WordPress cache to Redis, a RAM based service that is used for persistent object storage.

W3 Total Cache will allow you to use object caching with Redis. Redis stores the data as keys in the web server's memory, which allows for retrieval of the data to happen much faster than the WordPress method, which caches those objects to the options table in the database by default.

3. Leveraging Common UX Patterns

When adding elements such as fonts, carousels and banners to your website, you want to ensure you are following best practices. These types of elements can have a negative impact on Core Web Vitals if not implemented correctly.

A great example of this is not explicitly setting proper placeholders or dimensions for images, videos, iframes or other similar embedded content throughout your page. When the content is loaded, this can cause layout shift, and Core Web Vitals has very specific metrics, as a moving page can create a bad user experience for your visitor.

Loading custom fonts on your website is another example where things can go wrong. Adding them incorrectly can delay the text rendering or even cause layout shifts. Typically, your browser will delay displaying text until the font is loaded, which can also impact your FCP or LCP. If the text does load prior to your web font, and they are different sizes, layout shifts will occur and directly impact your CLS score.

Using best practices for these and other common UX elements is recommended to avoid negative impacts to your page performance.

4. Minification

When developing a website, most programmers tend to use spacing and comments to make code readable for both themselves and others. Minification is a technique used to reduce load times on a website by removing unnecessary characters and comments from the code for faster delivery and rendering. This technique can be used on HTML, CSS and Javascript files and code, and can dramatically improve your site's performance.

To minify your assets with W3 Total Cache, you will need to enable it in General Settings. There is an automatic mode which attempts to handle the heavy lifting for you, but if you have issues with it you will need to enable manual mode and add the assets you wish to be minified yourself under the minify page.

There is a help wizard for setting up minify, which you can use to specify the template to use when loading the asset, or choose to load the asset globally. Using this method you can create page templates and page specific assets that only load the necessary files for the page being requested to fine tune your application for performance.

5. Concatenation

The term concatenation refers to the action of linking things together in a series. In the context of website performance, this means combining multiple CSS and Javascript files into a few files, to deliver the assets the browser needs faster with less requests.

In W3 Total Cache, concatenating files is an option in General Settings, under minify. Checking the box will allow you to combine the asset files into one of 3 different files in the DOM: One in the head, one in the body or one at the footer before the closing of the document.

6. Eliminate Render Blocking Resources

Render-blocking resources is essentially code in your website files, usually CSS and JavaScript, that prevents a web page from loading quickly. To ensure your site loads as efficiently as possible, you can specify attributes that tell the browser how to download the code in relation to the other site assets.

When concatenating and minifying files using W3 Total Cache, you will also have the option of embedding them before the close of the document’s </head> tag, or after the <body> tag. To improve performance, you have the option of setting “rel” attributes for the assets such as async or defer, which will tell the browser when and how to load the file.

7. Using Minify with W3 Total Cache

https://www.boldgrid.com/support/w3-total-cache/how-to-use-manual-minify-for-css-and-js/

The Minify Help wizard in Total Cache will allow you to specify which JS and CSS files load by template, allowing you to have fine tune control over what assets load when and where. To use the wizard, you must set Minify to Manual Mode in General Settings, then visit the Minify Page to launch the Help Wizard.

8. Preconnect & Prefetch DNS Hints

If your site is using multiple 3rd party scripts, the location those scripts are hosted on will be considered a cross-origin domain. That 3rd party domain will need to resolve to an IP address for the browser to download the file and complete the request.

The time it takes for this DNS resolution to take place can introduce latency into the page load, and using preconnect and prefetch will instruct the browser to handle this prior to fetching the asset. This can help remove the latency introduced by resolving a large number of DNS requests for assets in the background.

Using dns-prefetch and preconnect links will help your page load faster by performing these operations for later use. The dns-prefetch will do a DNS lookup, while preconnect will establish the connection to the server. This connection established will also include a TLS handshake, if served over HTTPS.

The preconnect hint should be used sparingly, and only for the most critical assets being used in the viewport during the initial page load. For non critical assets, using only the dns-prefetch hint is recommended.

9. Image Optimization

Image Optimization refers to the practice of a website delivering the highest quality image with the right format, resolution and dimensions for the device and viewport accessing them. This is done with the intent of keeping the file size as small as possible. There are several layers when dealing with optimizing your images, including removing metadata, converting to a different format, resizing and lazy loading.

Removing Image Metadata

One of the ways to reduce an image's file size is to remove any metadata attached to the file. This data can include information about the camera used to take the picture, GPS coordinates, the files owner, comments, a thumbnail, date, description, keywords and much more.

There are several types of metadata that can be added to images, including EXIF, IPTC, XMP. Removing this data will help to decrease the file size of the image. An added benefit is that removing metadata keeps these details from being publicly shared.

Image Formats (WebP)

WebP is a compression format for images developed by Google. When optimizing your images for speed, using WebP is the recommended format for websites. Most modern browsers now support the WebP image format. There are many WordPress plugins that offer this type of image conversion and most even assist with redirects to automate the process and a fallback option in case the browser does not support the WebP format.

Dynamic Image Resizing

When different devices are used to access your web page, the image size needed will vary depending on the visitors viewport. Dynamic image sizes can be used to make each of these devices load the image with a size tailored specifically to the viewport where the site is being rendered.

A great example of this would be the hero image on your website. While a desktop would likely need the full size version of this image, the narrow viewport of a mobile device may only need an image that is 20% of that size. Providing the browser with the smaller size would reduce the time it needs to download the file, and display it.

There are many WordPress plugins and CDN Providers that offer dynamic resizing for images. The solution you choose should be based on your audience. If your visitors are mostly local and your traffic is not high volume, a CDN’s cost for this service may outweigh the benefits to you, so using a WordPress plugin may be your best option.

10. Lazy Loading Images and Other Embeds

Lazy Loading is the practice of identifying non critical assets, and ensuring they only load later as needed to render the page in the browser. In the context of images, lazy loading is usually based on a user interaction such as scrolling, and loads the images needed as a user gets near them.

Lazy Loading allows the first render to happen faster, as it instructs the browser to only load the critical resources needed to display what is being rendered in the viewport. Then, as you scroll, the application can detect when resources (such as images or embeds are needed), and initialize the download.

W3 Total Cache offers lazy loading for images. And upgrading to Pro gives you the ability to lazy load Google maps.

Using Image Facades for Interactive Elements

One of the biggest issues authors run across is having multiple video embeds from providers such as Youtube or Vimeo. Loading these videos will force your site to do DNS lookups, make connections to these 3rd party servers in the background, and download the elements needed to render the content.

Providing an image that is served from your site's domain as an interaction point to trigger loading these types of content embeds can save you precious time rendering your web page. It also saves the user from downloading Javascript and CSS for an element they are not going to use, as the video does not render unless the user specifically clicks on the image anchor link to trigger it.

This is also true for other interactive elements such as chat embeds or other interactive elements that are not hosted on your server and are being served to your visitor from a remote service.

Individual Page Audits

After you have optimized your site’s configuration, it is best practice to test your individual pages and disable any assets that are not needed on them. This can be done by using WordPress functions to deregister and dequeue any scripts or styles loaded by plugins not used, or there are some WordPress plugins that will help you do this from within the interface.

To accomplish this, you will need to measure each individual page and use the Network tab within the Inspector to determine what assets are loading per page. Once you have this information, you can determine if the assets are needed, or loading unnecessarily on a page.

This is a common issue with plugins that have front end output, and it can be easily remedied by identifying the pages where the asset is needed for the plugin to function, then using a WordPress function with conditional logic, to ensure those assets are only loaded on an “as needed” basis.

This example is for a plugin that is used on 3 pages - About Us, Contact and Management. Targeting any page that is not one of these by using a ! in front of the is_page conditional, we can use an if else statement to remove the scripts or styles. If this condition is not met, then normal operations would happen and the plugin assets would be included.

You can also disable the entire plugin if it is not one of the pages in the array using the following code snippet that fires on the wp action hook.

This article provides an overview of WP-CLI, focusing on its capabilities to create, modify, and delete users, as well as handle plugins with ease. This article will show you how WP-CLI can significantly elevate your WordPress management experience.

What is WP-CLI?

WP-CLI is a command-line tool designed for managing WordPress installations. It empowers developers, administrators, and site owners to interact with their websites directly from the command line, bypassing the need for manual interventions through the web interface.

It's built on PHP, and offers a wide range of commands that you can execute right from the terminal.

By using WP-CLI, you'll be able to manage your WordPress sites much more efficiently. Let's see a few examples of how WP-CLI commands can simplify your workflow:

WP-CLI Commands

Site Information Retrieval

The wp site info command provides a quick overview of your WordPress site's important details, including the site's URL, the number of posts and pages, the active theme, and more.

For instance, by running wp site info, you can promptly gather essential information about your site without navigating through the WordPress admin dashboard.

Database Management

WP-CLI allows you to manage your WordPress database seamlessly. Use the wp db export command to create a database export file, ensuring a backup of your site's data.

If you need to import data, the wp db import command facilitates this process. For example, if you have a database backup named backup.sql, executing wp db import backup.sql restores the database to a previous state.

Theme Manipulation

Manipulating themes is extremely efficient with WP-CLI. For example, the wp theme install command lets you install a theme directly from the official WordPress theme repository. To install the "Twenty Twenty-One" theme, you can use the command wp theme install twentytwentyone.

Post and Page Creation

Generating new content is made easier using WP-CLI. The wp post create and wp post generate commands enable you to create and populate posts and pages with content.

For example, wp post create --post_type=post --post_title="New Post" creates a new post with the specified title.

These examples illustrate the versatility and power of WP-CLI in managing various aspects of your WordPress site. By harnessing its capabilities, you can enhance your efficiency, reduce manual tasks, and gain greater control over your website's management.

How to Install WP-CLI

Before diving into more features of WP-CLI, let's understand the installation process.

You can install WP-CLI globally on your system, making it accessible from any directory.

To install WP-CLI, make sure you have PHP installed, along with a compatible version of WordPress. Download the Phar archive, place it in a directory reachable through your system's PATH, and you're ready to go.

You can verify the installation by typing wp --info in your terminal. Here you can find the doc with the URL to download WP-CLI with a wget.

How to Manage Users with WP-CLI

Managing users is a fundamental task when overseeing a WordPress site. WP-CLI simplifies user management with various commands that make creating, modifying, and deleting users much easier.

How to Create Users

The wp user create command lets you quickly create users directly from the command line.

To illustrate, let's create a new user named "Alice" with the email address "alice@example.com" and the role of editor. Simply enter:

wp user create alice alice@example.com --role=editor

How to Modify Users

WP-CLI also streamlines user modifications. Use the wp user update command to adjust a user's details.

For instance, let's change Alice's display name to "Alice Johnson" using the following command:

wp user update 123 --display_name="Alice Johnson"

In this example, "123" is Alice's ID.

How to Delete Users

When user accounts become obsolete or require removal for security reasons, WP-CLI simplifies the process.

To delete a user, use the wp user delete command. To remove Alice's account, simply execute:

wp user delete 123 --reassign=567

In this case, again "123" is Alice's ID and "567" is the ID of the user you want to assign Alice's content to (for example posts, pages, and so on).

How to Manage Plugins with WP-CLI

Plugins play a crucial role in enhancing WordPress websites. WP-CLI extends its capabilities to manage plugins, making tasks such as installation, activation, deactivation, and updates incredibly efficient.

How to Install Plugins

Use the wp plugin install command to seamlessly install plugins from the WordPress repository.

For instance, let's install the "Akismet" anti-spam plugin:

wp plugin install akismet

How to Activate and Deactivate Plugins

Managing plugin status is quite easy with WP-CLI. Activate or deactivate plugins using the wp plugin activate and wp plugin deactivate commands respectively.

To activate the "Akismet" plugin, type the following command:

wp plugin activate akismet

How to Update Plugins

Keeping plugins up to date is vital for security and performance. The wp plugin update command makes updates hassle-free.

To update all installed plugins, simply run:

wp plugin update --all

How to List Installed Plugins

WP-CLI offers an overview of installed plugins with the wp plugin list command. This provides a quick snapshot of each plugin's status, version, and available updates:

wp plugin list

Conclusion

WP-CLI is an invaluable asset in the world of WordPress management. Its extensive command set helps you manage users and plugins – and much more – with remarkable ease. This saves you time and minimizes manual interventions.

By harnessing the power of WP-CLI, administrators and developers can streamline workflows, improve security, and ensure their WordPress websites operate seamlessly.

Among various content management systems, WordPress is a popular choice due to its user-friendly interface and flexibility.

But having a WordPress site is just the beginning. Optimizing it for search engine visibility is a crucial step toward ensuring your content reaches the right audience.

In this comprehensive guide, we will delve into the key strategies and plugins that can significantly enhance your WordPress website's SEO, enabling it to rank higher on search engine results pages and attract more organic traffic.

1. On-Page SEO Optimization

On-Page SEO Optimization holds paramount importance for WordPress sites as it lays the foundation for higher search engine rankings, improved user experience, and increased organic traffic.

By meticulously crafting high-quality content, targeting relevant keywords, and optimizing meta tags, WordPress websites become more discoverable by search engines, ensuring that the right audience finds and engages with the content.

Using the proper heading tags, multimedia elements, and logical site structure not only enhances readability for users but also provides search engines with valuable information about the content's relevance and context.

On-Page SEO is the fundamental step that sets the stage for successful online visibility, enabling WordPress sites to establish their authority, credibility, and competitiveness in an ever-expanding digital landscape.

Keyword Research and Analysis

Effective SEO begins with thorough keyword research and Google competitors analysis. Identify the relevant keywords that resonate with your content and target audience.

Utilize SEO tools such as Google Keyword Planner, SEMrush, or Ahrefs to uncover high-volume and low-competition keywords. These keywords will serve as the foundation for your content creation and optimization efforts.

High-Quality Content Creation

Compelling, informative, and unique content is the cornerstone of SEO success. Craft articles, blog posts, and other content that addresses your audience's needs and interests. Utilize proper heading tags (H1, H2, H3, etc.) to structure your content logically. Engage your readers with multimedia elements like images, videos, and infographics.

At Camp Media, we use an SEO playbook, which involves all of these factors and allows us to be consistent with the process and outsource our best practices to new members of the team.

Optimizing Meta Tags

Meta tags are the first interaction users have with your content in search results.

Write enticing title tags that encapsulate the essence of your content while incorporating target keywords. Craft concise and relevant meta descriptions that encourage users to click through to your website. Also, use meta robots tags to control how search engines crawl and index your pages.

2. Technical SEO Enhancement

Technical SEO is a vital aspect for WordPress sites, serving as the backbone that supports optimal performance and user experience while ensuring search engines can effectively crawl, index, and rank the website's content.

A fast-loading website, facilitated by caching plugins and image optimization, not only keeps users engaged but also aligns with search engines' preference for responsive and swift sites, leading to higher rankings.

Mobile responsiveness is no longer an option but a requirement, as search engines prioritize mobile-friendly websites.

Implementing SSL certificates for HTTPS encryption not only enhances user trust but is also recognized as a ranking factor by search algorithms.

Overall, Technical SEO Enhancement guarantees that the technical infrastructure of a WordPress site is robust, efficient, and aligned with search engine guidelines. This ultimately contributes to improved visibility, higher search rankings, and a seamless user experience.

To make your website error-free, you can opt for a professional SEO services so that experts with technical SEO knowledge can quickly set your site up for success.

Website Speed and Performance

Website loading speed is a critical factor for both user experience and SEO. Use caching plugins such as WP Super Cache or W3 Total Cache to reduce loading times. Optimize images by compressing them without sacrificing quality. Minimize server response time by choosing a reliable hosting provider.

Mobile Responsiveness

Mobile-friendliness is no longer optional – it's a necessity. Ensure your WordPress theme is responsive, adapting seamlessly to various screen sizes.

Responsive themes provide an optimal user experience on both desktop and mobile devices. Test your site's mobile usability to identify and fix any issues.

SSL and Website Security

Website security is not only important for user trust but also for SEO. Implementing an SSL certificate to enable HTTPS on your site not only encrypts data transmission but is also considered a ranking factor by search engines.

Regularly audit your website's security measures and apply updates to prevent vulnerabilities.

3. User Experience and Accessibility

User Experience (UX) and Accessibility are of paramount importance for WordPress sites as they directly impact how visitors interact with and perceive the content.

A well-designed and intuitive site structure ensures that users can easily navigate through the website, finding the information they need without frustration.

By implementing breadcrumb trails, clear navigation menus, and logical URLs, WordPress sites create a user-friendly environment that encourages longer visits and reduces bounce rates. Also, optimizing for accessibility through features like descriptive alt text for images and semantic HTML ensures that all users, including those with disabilities, can access and understand the content.

Not only does this demonstrate inclusivity and social responsibility, but it also aligns with search engines' emphasis on providing valuable and accessible content to a wide range of users.

Ultimately, prioritizing User Experience and Accessibility within a WordPress site contributes to improved engagement, better search engine rankings, and a positive online reputation.

Intuitive Site Structure

A clear and intuitive site structure improves user experience and SEO. Ensure your navigation is logical and user-friendly. Create a URL structure that reflects the hierarchy of your content. Implement breadcrumbs to help users understand their location within your site and navigate back easily.

Accessibility Optimization

Design your website with accessibility in mind. Ensure your content is accessible to users with disabilities by using semantic HTML. Provide descriptive alt text for images and multimedia to assist screen readers.

Following accessibility guidelines not only benefits users but also enhances your site's search engine visibility.

4. Link Building and Off-Page SEO

Link Building and Off-Page SEO play a pivotal role in enhancing the authority, credibility, and visibility of WordPress sites in the vast digital landscape.

By acquiring high-quality backlinks from reputable and relevant sources, these websites garner validation from external sources, signaling to search engines that their content is trustworthy and valuable.

Engaging in ethical link building practices, such as guest posting, influencer collaborations, and industry partnerships, not only establishes connections within the online community but also drives referral traffic and expands the site's reach.

Social media integration further amplifies the distribution of content, leading to increased engagement and potentially generating more inbound links.

Recognizing that search algorithms consider external signals as a measure of a site's authority, Link Building and Off-Page SEO contribute to higher search rankings, expanded online visibility, and a broader audience reach for WordPress sites.

Creating High-Quality Backlinks

Backlinks from authoritative and relevant sources signal to search engines that your content is valuable and trustworthy. Once acquired, it's also crucial to ensure you get backlinks indexed for them to contribute effectively to your SEO.

Focus on earning backlinks naturally through strategies like guest posting on reputable websites, collaborating with influencers, and participating in industry forums. Avoid questionable practices like buying links or engaging in link farms, as they can lead to penalties.

Social Media Integration

Social media plays a significant role in amplifying your content's reach and engagement. Share your articles, blog posts, and other content on various social media platforms (Twitter, Pinterest, Facebook, LinkedIn, and Facebook's new Threads).

Encourage users to share and engage with your content by adding social sharing buttons to your site. While social signals are not direct ranking factors, increased engagement can indirectly influence SEO.

5. Essential SEO Plugins for WordPress

Essential SEO plugins are a cornerstone for optimizing WordPress sites. They offer an array of tools and functionalities that simplify and streamline the complex process of SEO.

Plugins like Yoast SEO and All in One SEO Pack provide invaluable insights and guidance for on-page optimization, ensuring that content is well-structured, keyword-optimized, and equipped with compelling meta tags.

These plugins facilitate the creation of XML sitemaps and breadcrumbs, enabling search engines to efficiently crawl and index the site's content.

Also, caching plugins like WP Super Cache and W3 Total Cache significantly enhance website speed and performance, critical factors for both user experience and search engine rankings.

By integrating these essential plugins, WordPress sites not only save time and effort but also benefit from a comprehensive approach to SEO that contributes to higher visibility, increased organic traffic, and a more competitive online presence.

Yoast SEO

Yoast SEO is a widely-used plugin that offers a comprehensive set of tools for on-page optimization. It helps you optimize content by providing real-time analysis of your focus keyword usage, readability, and meta tags. Configure XML sitemaps and breadcrumbs to enhance search engine crawling and user navigation.

All in One SEO Pack

Similar to Yoast SEO, the All in One SEO Pack plugin provides features for optimizing your content's meta tags, title tags, and meta descriptions. Configure settings for title templates, meta tags, and more. The plugin also offers advanced features suitable for experienced users who want more control over their SEO settings.

WP Super Cache and W3 Total Cache

As previously mentioned, these caching plugins are essential for enhancing website speed and performance. They create static versions of your pages, reducing server load and improving loading times.

Set up browser caching and object caching to further enhance speed. Minimizing database queries also contributes to a smoother user experience.

6. Monitoring and Continuous Improvement

Monitoring and continuous improvement are essential practices for maintaining the effectiveness and relevance of WordPress sites in the dynamic online landscape.

Regularly tracking key metrics through tools like Google Analytics provides insights into user behavior, site performance, and traffic sources. This data-driven approach enables webmasters to identify trends, understand user preferences, and refine content strategies accordingly.

Google Search Console offers invaluable information about how search engines index and rank the site, allowing for swift identification and resolution of any issues that might affect visibility.

As search algorithms evolve and user expectations change, the ability to adapt is crucial. By consistently monitoring and analyzing data, WordPress sites can ensure they remain aligned with best practices. Ongoing improvements based on insights gleaned from these tools can lead to enhanced user experience, sustained search engine visibility, and continued success in a competitive digital landscape.

Google Analytics Integration

Google Analytics provides invaluable insights into your website's performance, user behavior, and traffic sources. Monitor key metrics such as page views, bounce rates, and user demographics. Analyze this data to refine your content strategy and identify areas for improvement.

Google Search Console

Google Search Console is a powerful tool for monitoring your website's indexing status and search performance. Submit XML sitemaps to ensure search engines crawl and index your content efficiently. Regularly review the index coverage report to identify potential issues and address crawl errors promptly.

Conclusion

In conclusion, optimizing your WordPress website for search engine visibility is a multifaceted endeavor. It involves a combination of on-page and technical SEO strategies, user experience enhancements, link building efforts, and the integration of essential plugins.

By implementing these strategies and leveraging the power of SEO plugins, you'll be well-equipped to improve your website's ranking on search engine results pages and attract a steady flow of organic traffic.

Remember that SEO is an ongoing process, requiring continuous monitoring, adaptation, and improvement to stay ahead in the ever-evolving digital landscape.

In the fast-paced and competitive online world, optimizing your WordPress website for search engine visibility is not just a choice – it's a necessity.

This comprehensive guide has explored the key strategies and plugins that can significantly enhance your website's SEO, leading to higher rankings, increased organic traffic, and improved user engagement.

By focusing on on-page optimization, technical enhancements, user experience, link building, and utilizing essential SEO plugins, you're setting your website up for success in the digital realm.

Again, remember that SEO is not a one-time task but an ongoing process. The algorithms that search engines use to rank websites are continually evolving, and staying ahead requires dedication and adaptability.

This means you'll need to regularly monitor your website's performance, analyze user behavior, and stay informed about the latest SEO trends and updates. By consistently fine-tuning your strategies, you can ensure your WordPress website remains competitive and visible in search engine results.

Whether you're a seasoned webmaster or a novice WordPress user, the insights shared in this guide provide a solid foundation for optimizing your website and driving meaningful results.

By implementing the practices outlined here, you're not just enhancing your search engine visibility – you're creating a better online experience for your users, fostering trust, and ultimately achieving your goals in the digital landscape.

So, roll up your sleeves, implement these strategies, and watch as your WordPress website climbs the ranks, attracting more organic traffic and achieving the success it deserves.

As a travel company specializing in dreamy honeymoon destinations, it was crucial for us to showcase our hotels and destinations in a user-friendly and visually appealing way.

ACF and CPTs proved to be the perfect solution for achieving our goal of providing an immersive and personalized experience for our users.

Creating a custom post type for both Destinations and Hotels allowed us to easily categorize these specific types of content. Advanced Custom Fields allowed us to enrich the Custom Post Types with specific metadata that can be dynamically displayed throughout the website.

Example of Honeymoons.com using a Custom Post Type, Custom Template, and ACF to display hotel information.

What Are Custom Post Types?

WordPress Custom Post Types are a powerful feature that allows you to extend the default functionality of WordPress beyond the standard posts and pages. They enable you to create and manage different types of content, each with its own set of attributes and functionalities.

Custom Post Types are essential for organizing and presenting specific content types, such as products, portfolio items, testimonials, events, recipes, and more in a structured and efficient manner.

By default, WordPress comes with two main post types:

Posts

These are standard blog posts that are typically displayed in reverse chronological order on the blog page.

Pages

These are static pages that are typically used for static content like About Us, Contact Us, or a Privacy Policy page.

However, when you need to create content that doesn't fit into the default post or page structure, Custom Post Types come into play.

You can register your custom post types with their own set of attributes, taxonomies, and template files. This allows you to manage and present diverse content in a more organized and user-friendly manner.

For instance, on honeymoons.com, we created a Custom Post Type called "Destinations" to showcase honeymoon destinations.

To create Custom Post Types, you can either write custom code using the register_post_type() function or use plugins that make the process more user-friendly, like "Custom Post Type UI" or "Toolset Types."

WordPress comes with functionality to easily configure the post types to your specific needs by updating the functions.php file within your theme.

The specific code we used to create the Destinations post type is here:

//Destinations register_post_type('destination', // Register Custom Post Type array( 'labels' => array( 'name' => ('Destinations', 'destination'), // Rename these to suit 'singular_name' => ('Destination', 'html5blank'), ), 'public' => true, 'hierarchical' => true, // Allows your posts to behave like Hierarchy Pages 'has_archive' => false, 'menu_icon' => 'dashicons-palmtree', 'show_in_nav_menus' => true, 'supports' => array( 'title', 'editor', 'excerpt', 'revisions', 'page-attributes', 'thumbnail' ), // Go to Dashboard Custom HTML5 Blank post for supports 'rewrite' => array ( 'slug' => '/destinations', 'with_front' => false, 'hierarchical' => true ), 'can_export' => true, // Allows export in Tools > Export 'taxonomies' => array( 'experiences', 'regions' ) // Add Category and Post Tags support */ ));

These Custom Post Types will appear in the wp-admin sidebar with your Posts and Pages:

Custom Post Types have become an essential tool for developers and content creators, as they offer the flexibility to tailor WordPress websites to specific needs, making it a versatile and robust content management system.

What are Advanced Custom Fields for WordPress?

Advanced Custom Fields (ACF) is a popular WordPress plugin that enhances the content creation and management experience by providing a user-friendly interface for adding custom fields to posts, pages, and custom post types. It allows website developers and content creators to easily extend the default WordPress post editor with additional input fields, enabling the creation of more structured and dynamic content.

With ACF, you can define various types of custom fields, such as text fields, image upload fields, select dropdowns, date pickers, repeater fields, and more. These custom fields can be used to add extra information to your content, making it more versatile and tailored to specific requirements.

Key features and benefits of Advanced Custom Fields (ACF) include:

1. Custom Field Creation: ACF allows you to create custom fields through an intuitive graphical interface within the WordPress admin area. You can choose from various field types and configure their settings to suit your needs.
2. Field Groups: You can group related fields together into sets called "Field Groups." These groups can then be assigned to specific post types or pages, providing a modular and organized approach to content management.
3. Conditionals and Logic: A powerful feature of ACF is the ability to set conditional logic for fields. You can show or hide specific fields based on the values of other fields, making content creation more efficient and user-friendly.
4. Repeater Fields: ACF's repeater field allows you to create sets of sub-fields that can be repeated as needed. This is especially useful for managing dynamic content like lists, galleries, and flexible content sections.
5. Frontend Integration: ACF makes it easy to display the custom field data on the frontend of your website. You can use simple template tags or ACF functions to retrieve and display the custom field values within your theme files.
6. Extensibility: ACF can be extended through third-party add-ons and custom code, allowing developers to create even more advanced and specialized custom fields and functionalities.
7. User-Friendly Experience: ACF simplifies the content creation process for non-technical users. It reduces the need for custom coding and makes it easier for content editors to add and manage content with structured fields.

ACF has gained popularity among WordPress developers and designers for its flexibility and ease of use. It enables the creation of dynamic and customized websites without the need for complex custom development, making it a valuable tool for both small-scale websites and large, complex projects.

How to Create Custom Templates to Display ACF Content

To dynamically show data using Advanced Custom Fields (ACF) and custom templates in WordPress, we'll walk through the steps with an example from Honeymoons.com using a Custom Post Type of Hotels.

We'll create custom fields for metadata such as the number of rooms, average price, and the hotel URL, and then display this data dynamically on the frontend using a custom template.

Step 1: Install and Activate Advanced Custom Fields Plugin.

First, ensure that the Advanced Custom Fields plugin is installed and activated on your WordPress website. You can find the plugin in the WordPress Plugin Repository and install it from the admin dashboard.

Step 2: Create Custom Fields for Hotel Post Type.

Next, we'll create custom fields for the Hotel post type using ACF.

1. Go to "Custom Fields" in the WordPress admin sidebar and click on "Add New."

2. Create a new field group for Hotels and add the following custom fields:

3. Hero Image (Image)

4. TripAdvisor.com Link (URL)
5. Number of Rooms (Number)
6. Number of Rooms (Number)
7. Price - Low (Number)
8. Price - High (Number)
9. Price - Average (Number)
10. Guest Rating (Number with a maximum value of 10)
11. Star Rating
12. Website (URL)
13. Display URL (Text)

3. Assign Field Group to Hotel Post Type

After creating the custom fields, we need to assign the field group to the Hotel post type.

Step 3: Displaying the Custom Fields in the Custom Template

Now, we'll create a custom template for the Hotel post type, where we can dynamically retrieve and display the metadata.

Create a new PHP file in your theme folder and name it "single-hotel.php" (assuming you have a custom post type template hierarchy in your theme). Replace "hotel" with whatever your custom post type is named.

In "single-hotel.php," start with the regular template code for the header, footer, and post loop. You can start with a copy of single.php.

Use ACF functions to retrieve the custom field values and display them in the template. Use PHP, HTML and CSS to display the content.

You can retrieve the Advanced Custom Fields like this:

$number_of_rooms = get_field('number_of_rooms'); $average_price = get_field('average_price'); $hotel_url = get_field('hotel_url');

And display the content like this:

echo '

Number of Rooms: ' . $number_of_rooms . '

Average Price: $' . $average_price . '

Hotel Website

By capturing metadata with Advanced Custom Fields and displaying that content with Custom Templates and Custom Post Types, you can organize and display data on your WordPress website in a much more dynamic and user-friendly way.

Your WordPress site will not look "out-of-the-box" and your site will provide much more helpful and organized information to the user.

Conclusion

Thanks to ACF and Custom Post Types, Honeymoons.com now boasts a dynamic website that offers personalized experiences to our users.

Our collaboration with ACF and CPTs has empowered us to create stunning hotel and destination pages that captivate visitors and help them plan their dream honeymoon effortlessly.

I hope our case study has inspired you to explore the vast potential of ACF and CPTs for building dynamic WordPress websites tailored to your specific needs. Happy coding!

When selecting a hosting provider, several factors need to be taken into consideration. From the size of your website to the type of server you require to the security measures in place – these all play an important role in determining which host is best suited for you.

In this article, we will discuss seven tips to help you choose a WordPress host that suits your needs. We'll explore topics such as cost-effectiveness, scalability, customer support, and more.

By following these guidelines, you’ll be able to make an informed decision when selecting a web hosting service for your WordPress site.

1. Understand Your Needs

WordPress is a versatile and user-friendly content management system (CMS) that can be used for any business. It's the most popular CMS in the world, powering over 34% of all websites on the internet.

WordPress is used by beginners and certified WordPress pros alike. Because it is so versatile, many options exist for a hosting provider, which can make it tricky when selecting the best hosting provider.

Consider the size and scope of your website. Will you need a lot of storage space? Will it include large files such as images or videos? Do you expect to have high traffic volumes or need additional security measures in place?

Knowing what your website needs and having a clear idea of the features you require from your WordPress host will help ensure that you select the most suitable one.

2. Research Different Hosting Providers

Once you know what your website needs, take some time to research different hosting providers. Look at their features, support, and pricing. Ask them questions regarding any concerns you have with their services.

Also, read user reviews to get an idea of the experiences others have had using that particular host.

Some of the most popular WordPress hosts are:

• SiteGround
• Bluehost
• IONOS
• WP Engine
• DreamHost
• Flywheel
• Kinsta
• InMotion
• Hostinger
• HostGator

Read the full list and reviews at G2 here.

There are a lot of WordPress hosting providers, and there are some key things to consider when selecting yours:

3. Look for Reliability & Security Features

Ensure your host is reliable and secure. Your WordPress host should have a robust server infrastructure with good uptime and reasonable response times. They should also offer security features such as firewalls and daily backups to help protect your site from hackers and other malicious attacks.

Reliability and security are paramount when choosing a WordPress host. Having reliable service means that your website will be accessible to visitors more often, which is crucial to running a successful online business.

With secure hosting, you can rest assured that your website and its data will be safe from malicious attacks.

This is especially important if you're going be hosting sensitive data about your users. For example, if you need to store medical information you need a HIPAA compliant host, and if you need to store financial data you need to be especially careful.

Reliable hosting provides an experience for your visitors and customers that is fast, secure, and hassle-free.

4. Check Support Options

Make sure you have access to technical support when needed. The best WordPress hosts will provide you with live chat, email support and telephone assistance. Additionally, they should have a knowledge base where you can find answers to frequently asked questions.

It’s important to check the support options before selecting a host, as having access to help in case something goes wrong is invaluable. Good customer service can make or break your online business, so it's worth doing your research and finding a provider that will be there when you need them.

5. Think About Scalability & Performance

Choose a host that can grow with you as your website expands. Look for a host that offers unlimited data storage, bandwidth, and email accounts. Additionally, the hosting package should include performance-enhancing features like caching and content delivery networks (CDNs).

These features can help your website load faster, which is essential for keeping visitors on your site and improving search engine rankings. Faster loading times can also lead to higher conversion rates, as customers are more likely to stay on the page if they don’t have to wait too long.

6. Consider Maintenance & Updates

Make sure your host provides automatic software updates and security patches. You should also check if they offer managed WordPress hosting services to take care of maintenance and security tasks for you.

Having a host that takes care of these tasks for you can be very useful, as it ensures your website is running smoothly and helps to protect it from potential threats.

7. Review Pricing & Payment Options

You should be aware of the various cost factors associated with hosting a WordPress site, including renewal fees and add-on services such as domain registration or website optimization. It’s also helpful to have multiple payment options available so that you can choose the one that best suits your budget.

Watch out for hidden fees. Some hosts may advertise low prices or seemingly generous free trials, but then charge extra for certain features or services.

Wrapping Up

By keeping these tips in mind, you can find a WordPress host that meets all of your needs and provides the performance and reliability you need to ensure success for your website.

There are plenty of other tips to become a WordPress hosting guru, so be sure to continue to do your research. With the right hosting provider, you can ensure your site runs smoothly with minimal downtime and maximum security.

People can make all kinds of websites with WordPress. Some popular types include business websites, eCommerce sites, portfolios, and blogs.

We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to use WordPress to easily create responsive blogs and websites using a drag and drop interface.

I created this course. I've also created many other popular WordPress courses on the freeCodeCamp.org channel. This is the first one that focusses on creating a blog.

You don't need any prior experience to follow along and there is no coding involved.

There are many reasons to make a WordPress blog, but some of the most common reasons include: sharing ideas and thoughts with the world, building a personal brand, promoting a business, and making money through blogging.

The course demonstrates how to use Elementor and a template to make it super quick to make a blog.

Here are the sections in this course:

• Setting up Hosting and Domain
• Installing WordPress
• WordPress Dashboard and Initial Settings
• Installing WordPress Theme
• Overview of Website
• Customizing Title
• Using Elementor to Edit Page
• Adding Images
• Customizing Website Elements
• Updating Site Menu and Categories
• Customizing Blog / Archive
• Customizing Single Blog Post
• Adding New Blog Post
• Customizing About and Contact Page
• Setting Up Website Forms Using WPForms
• Making URLs Look Better
• Updating Site for Responsive Design
• Updating Footer
• Creating New Pages
• Improving SEO (Search Engine Optimization)

Watch the full course below or on the freeCodeCamp.org YouTube channel (1.5-hour watch).

I decided on Hugo, partly because I’m a huge fan of the Go programming language, but also because it just seemed like the best option from a dev-experience perspective.

Here’s why I decided to move away from WordPress:

• I wanted to write and store all my posts in Markdown.
• I wanted to version control all my posts in Git/Github.
• I wanted to be able to use ctrl+shift+f to find and edit the content on my blog.
• I wanted a less buggy way to do “global blocks”
• I didn’t want to spend hours fine-tuning performance. My posts are just text and images, so page speed scores should be 100 by default!
• I wanted to use straight CSS for styling, making it easier for my blog and app to have identical styling.
• I wanted to host the site for free

With all those goals in mind, Hugo was a perfect choice. I’ve been super happy since making the switch, but there were some hiccups along the way.

WordPress takes care of some of the nuances of SEO-tuning for you, and if you forget to redo them yourself, you’ll end up sacrificing rankings.

How to Export WordPress Posts as Markdown

Manually copying and pasting all of your posts out of the WordPress GUI into Markdown files could take a very long time. Especially if you have hundreds of posts like I do.

In order to speed up the process, I used this Markdown plugin to export all of my posts as markdown at once. It’s called “Gatsby Markdown Exporter”, but it works for Hugo just as well.

I’m not going to go over the basics of getting up and running with Hugo, as I’m going to assume you are already familiar with it. But if you’re not, you can read the quick start guide here.

How to Use Hugo’s Built-in SEO Templates

WordPress and its various SEO plugins take care of a lot of SEO-related hocus-pocus for you. So when you move to a static site generator you often have to do some of that stuff yourself.

As it turns out, Hugo has some turn-key solutions for most of this, so using the right internal templates can get you all the open-graph, schema, and Twitter meta tags out of the box.

For me, that meant simply adding these 3 lines to my layouts/partials/header.html file within the <head> tag:

{{ template "_internal/opengraph.html" . }}
{{ template "_internal/twitter_cards.html" . }}
{{ template "_internal/schema.html" . }}

Now we'll get into the scripts I wrote to help me with this process.

Script 1 — Checking for Broken Links

You can solve a lot of your WordPress woes by installing plugins for various tasks. Well, assuming those plugins don’t break your entire WP installation.

With Hugo, I just write little text-manipulation or HTTP scripts to do my bidding.

This first script is just a simple iterator that crawls the site and reports any broken links. You can see the full source code here. It's small edit of the script the Go team uses to check for broken links on the Go programming language's website.

Script 2 — Minifying Images

When working with WordPress, you would typically upload a blog post image, and some SEO plugin would optimize that image’s size for you.

In Hugo, no such optimizations are made for you. It simply serves the exact image you add to your “static” folder.

I wrote a little script to optimize my images. It does the following:

• Takes an input image of nearly any type (.png, .jpeg, .gif, etc).
• Converts it to the .webp format (a performant format).
• Shrinks the image to a max image size I've configured if it’s too large.

This script is written in Node.js and the source code can be found here.

Script 3 — Managing Global Shortcodes

WordPress had a feature called “global blocks”. They're super useful for things like newsletter signup boxes that show up in the middle of your articles, but that you want to be able to update in a single place.

In Hugo, you can use shortcodes to achieve a similar purpose.

Unfortunately, it’s the inserting and removing of the shortcodes themselves that actually becomes tedious at scale.

For example, let’s say I added my newsletter signup shortcode after the 5th paragraph in all my articles, but now I want it to come after the 7th paragraph. I have to go manually copy/paste the short code!

Well, not anymore. Again, this is the great thing about storing all your blog posts in a text format — we can script some simple solutions. I wrote two scripts, and their source code can be found here:

• rmshorts
• addshorts

These two scripts allow me move my global blocks with ease. For example, to remove all instances of myshortcode from the blog:

rmshorts myshortcode

Then to add myshortcode as its own paragraph after the 2nd section of every blog post across the site:

addshorts myshortcode 2

This has been a huge time saver.

Script 4 — Converting .docx to Markdown

Last but not least, I work with some non-technical writers. My writers aren’t used to writing Markdown. Google docs is their tool of choice.

I have no problem with that, as I want them to be effective. My solution was to write a little bash script that uses pandoc under the hood to convert the Google Docs to Markdown files.

Wrapping Up

I hope some of these scripts are valuable to you, and I really can’t recommend enough making the switch to a static site generator. If you’re willing to put in a few hours to get a great working environment up and running for your blog it will save you a lot of time and money in the long run.

Remember, always automate the boring stuff!