How can we help you today?

Support Portal Categories

How to Implement PageSpeed Booster

Modified on: Tue, 21 Jun, 2022 at 10:40 AM


Requirements

To get started with the PageSpeed Booster (formerly known as Percolate), you must meet the following requirements:

  • Production environment that is hosted on Hypernode.
  • Dev environment that is a copy of live and hosted on Hypernode.
  • Varnish has to be enabled
  • Time to thoroughly test the environment with PageSpeed Booster enabled.


If you don't have a dev environment, then you can easily acquire one in your Control Panel

After you meet the requirements,  you can send us a support ticket that includes the domain name where we can activate PageSpeed Booster on. For example psb.<yourdomainname>.com


After this, we will create a shared Slack channel with you, so we have a central place for the communication.

In this channel, we can quickly communicatie during the test peroid.

Keep in mind that PageSpeed Booster is a complex tool that require a lot of testing before it can be pushed to the live site.

For example, it is possible that your site has errors in the HTML/CSS code. The PageSpeed Booster will find these errors, and they have to be fixed for the PageSpeed Booster to work correctly.


TABLE OF CONTENTS

What is PageSpeed Booster

PageSpeed Booster is a reverse proxy that sits in front of your website, just like Varnish. On pages that can be cached, it uses many static optimisation techniques to greatly increase the pagespeed score and performance of your website.

PageSpeed Booster is build on top of Kubernetes. For each application, a separate PageSpeed Booster instance is started on the cluster. None of the components, settings or version used are shared between applications. This ensures maximum stability and complete control over the update process.

Internals

PageSpeed Booster consists of a few components, you should not be bothered by most of them but for the purpose of understanding how PageSpeed Booster works, it is useful to keep these in mind.

  • Proxy - Proxy requests to the application backend, creates new optimize jobs and handles API requests.
  • Worker - Runs optimize jobs.
  • RabbitMQ - Jobqueue for optimize jobs.
  • Redis - Caches stored optimized responses.
  • MongoDB - Stores optimize state for optimize requests and handled optimize requests.
  • Chromium - Render engine.
  • Cypress - Test environment.
  • Test server - Test server to mock behavior of a real webserver during tests.
  • Imgproxy - Service for resizing and optimizing images.

Configuring PageSpeed Booster on your Development Environment

Configure SSL and DNS

To setup PageSpeed Booster on your development environment you'll need a unique domain. For example you can use, psb.example.com. So make sure to follow these steps:

  1. Point the DNS of the test domain, psb.example.com, to your development Hypernode
  2. Create the vhost with SSL and Varnish:
    hypernode-manage-vhosts psb.example.com --https --force-https --varnish
  3. Now point the DNS to the PageSpeed Booster instance with the records you got at the PageSpeed Booster page in your Control Panel
  4. Make sure Varnish is enabled on the server: hypernode-systemctl settings varnish_enabled

Configuring Varnish

By now you've a valid SSL for your test domain, and pointed it to the PageSpeed Booster instance which now works as a proxy. Whats left is that you make the required changes to your .vcl so that the PageSpeed Booster is able to optimize your pages.

Modifying your Varnish VCL configuration

Turn off ESI Block Parsing

Configure Varnish to turn off parsing Edge Side Includes. You can do this by editing the following configuration.

if (beresp.http.content-type ~ "text") {
set beresp.do_esi = true;
}


Change it to:

if (!beresp.http.X-Percolate && beresp.http.content-type ~ "text") {
set beresp.do_esi = true;
}

Edit the lines that are responsible for setting the Cache-Control header to "no-store, no-cache, must-revalidate, max-age=0";. How this looks exactly, depends on your Varnish configuration and could differ per project. >The most common configuration looks like:

# Not letting browser to cache non-static files.
if (resp.http.Cache-Control !~ "private" && req.url !~ "^/(pub/)?(media|static)/") {
set resp.http.Pragma = "no-cache";
set resp.http.Expires = "-1";
set resp.http.Cache-Control = "no-store, no-cache, must-revalidate, max-age=0";
}


We'll change the configuration fragment to check if the X-Percolate header is present, by using a condition.

# Not letting browser to cache non-static files.
if (!req.http.X-Percolate && resp.http.Cache-Control !~ "private" && req.url !~ "^/(pub/)?(media|static)/") {
set resp.http.Pragma = "no-cache";
set resp.http.Expires = "-1";
set resp.http.Cache-Control = "no-store, no-cache, must-revalidate, max-age=0";
}

Remove the following line:


unset resp.http.X-Magento-Tags


Now, we need to reload the varnish configuration. This can be done by loading it with a slightly different identifier followed by activating the new config:

varnishadm vcl.load psb /data/web/varnish.vcl

varnishadm vcl.use psb

Add PageSpeed Booster as Flush Target

With the addition of Pagespeed booster, you'll have to deal with an extra layer of cache that needs to be flushed when demanded.

Add your Pagespeed booster URL as entry to the http_cache_hosts section in your env.php:

app/etc/env.php

 'http_cache_hosts' => [
[
'host' => '127.0.0.1',
'port' => '6181'
],
// PSB
[
'host' => 'production-mydomain.fsn1.percolate-3.hipex.cloud',
'port' => '80'
]
],


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.