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.

$ docker-compose build --pull && docker-compose pull
$ docker-compose run --rm composer install --ignore-platform-req php
$ docker-compose up -d db
$ docker-compose run --rm wordpress wp-install

$ 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

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.

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.

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

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

The database service to store application data.

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

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

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

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",
    }
}

$ 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 phpunit phpunit-watcher watch

$ docker-compose run --rm cs

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

$ docker-compose run --rm cs phpcbf