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
- Temporary Workflow
- What is PageSpeed Booster
- Configuring PageSpeed Booster on your Development Environment
- Modifying your Varnish VCL configuration
- Add PageSpeed Booster as Flush Target
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:
- Point the DNS of the test domain, psb.example.com, to your development Hypernode
- Create the vhost with SSL and Varnish:
hypernode-manage-vhosts psb.example.com --https --force-https --varnish
- Now point the DNS to the PageSpeed Booster instance with the records you got at the PageSpeed Booster page in your Control Panel
- 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' ] ],