WordPress Core Web Vitals Lab

Core Web Vitals is a reality. These new metrics created to measure the user page experience will be part of the Google ranking algorithm in May 2021. The objective of this project is to be a laboratory of testing how the WordPress ecosystem bahaves with these metrics.

The objective of this project is to discuss how to improve the Lighthouse metrics on the WordPress ecosystem.

This configuration comes with Varnish to cache requests and reduce the server response time. For tests purpose, it is possible use or bypass it. See How to serve section to check how do that.

Docker Compose is the base to the configuration to serve the WordPress application. So, to run the project it is necessary to have Docker installed.

How to install

$ docker-compose build --pull && docker-compose pull
$ docker-compose up -d db
$ docker-compose run --rm wordpress wp-install

How to serve

$ docker-compose up -d server

The WordPress application will be served on 4 ports:

443: Varnish over SSL and HTTP/2
80: Varnish over HTTP/1.1
44380: Without Varnish over SSL and HTTP/2
8080: Without Varnish over HTTP/1.1

Plugin

We have a plugin called Core Web Vitals Performance Optimize inner the project. This plugin has proof of concept to add page performance improvements to WordPress Core and the entire ecosystem.

This plugin is symlinked to the directory plugin and it is automatically activated by installation script.

Services

WordPress

A PHP image with the WordPress modules dependencies.

The image is built with WP-CLI to help manage the application. See How to run WP-CLI commands section to get more information how to use it.

It was added Xdebug extension to help debug the application. See How to debug section to see how to enable and config the integration with the IDE.

Nginx

Used to proxy the requests to Varnish and PHP-FPM.

Varnish

The cache system to delivery the requests faster than process them every time.

MariaDB

The database service to store application data.

Plugin test

Service to run Core Web Vitals Performance Optimize unit test. See How to run plugin unit tests section to see how run the tests.

Plugin coding standards

Service to check if the code standard of the plugin. See How to check plugin coding standards section to see how run the checker.

How To

How to run WP-CLI commands?

$ docker-compose run --rm wp [command]

How to debug?

It is necessary change the value of XDEBUG_MODE from off to debug on docker-compose.yml file and restart the WordPress service if it is already running.

$ docker-compose restart wordpress

For VS Code integration, the PHP Debug should be installed and active. The launch.json must have this configuration:

{
    "name": "Listen for XDebug",
    "type": "php",
    "request": "launch",
    "port": 9003,
    "pathMappings": {
        "/cwv-perf-optimize": "${workspaceRoot}/cwv-perf-optimize",
        "/var/www/html": "${workspaceRoot}/public",
    }
}

How to run plugin unit tests?

$ docker-compose run --rm plugin-tests

The unit tests images come with phpunit-watcher shipped to keep PHPUnit running and waiting changes to run the tests again.

$ docker-compose run --rm plugin-tests phpunit-watcher watch

How to check plugin coding standards?

$ docker-compose run --rm plugin-cs

To fix code alowed to be fixed using PHP Code Beautifier and Fixer.

$ docker-compose run --rm plugin-cs phpcbf

cjperes/wordpress-core-web-vitals-lab