Speed up your Ghost Blog and Reduce Load Time from 2.1s to 593ms

The last weeks I focused more on creating content for my blog. I checked the Google PageSpeed Insights to give me some hints on what I could do better. The result shocked me. The mobile version had a horrible red rating of 49 and the desktop version a yellow rating of 55 out of 100 possible points.

Optimize Images

The first issue I got was still using the JPG and PNG format, instead of the more lightweight and modern WebP format. Since Ghost release 4.9.0 WebP is officially supported. All I got to do is to download the existent images and save them in WebP. I used Pixelmator Pro to convert my images and set the quality to 99 percent. This action reduced the download size, only on the start page, by almost 1.8 Megabyte and speeded up the site by 700ms.

Remove Unnecessary Plugins

I configured the Stripe integration in the Ghost admin out of curiosity, but never set up a paid tier. All I've configured is the free tier, and I want to keep it like that. Turns out, configuring it was enough to have all the JavaScript bloatware being loaded every time – over 400kb of data. On top, the browser needs to access another domain, which reduces the load time even more. I disconnected stripe and voilà, another performance gain of almost 300ms.

Nginx's configuration and reduce TTFB

Out of the box, Nginx is fast, doesn't consume many resources and probably could run on any Walmart toaster. While this is good in many situations, it has a configuration which isn't optimized at all. Reducing the TTFB (Time To First Byte) was my top priority, and doing so is actually easy.

Enable HTTP/2

The first step in tuning Nginx for faster TTFB with HTTPS is to ensure that at least HTTP/2 is enabled. All you need to do is to add the word http2 in the server block of our Nginx config file (e.g., /etc/nginx/sites-enabled/example.com).

Search for this line:

listen 443 ssl;

and change it to:

listen 443 ssl http2;

Check your SSL Params

With HTTPS connections, instead of end-users connecting via one round trip (request sent, then the server responds), the connection needs an extra handshake. However, using HTTP/2 and enabling Nginx ssl_session_cache will ensure faster HTTPS performance for initial connections and faster page loads.

All SSL parameters are by default configured in one file, /etc/nginx/snippets/ssl-params.conf. Disable the legacy and outdated TLSv1, 1.1 and 1.2 and only enable TLSv1.3.

Search for this line:

ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

and replace it with

ssl_protocols TLSv1.3;

Next, we want to reduce the SSL buffer size. The Nginx ssl_buffer_size sets the size of the buffer used for sending data via HTTPS. By default, the buffer is set to 16k and far too big for 99% of the use cases. Therefore, you mostly need to add the following line:

ssl_buffer_size 4k;

This option alone reduced my TTFB by almost 55ms, which is a lot.

Finally, you need to enable OCSP (Online Certificate Status Protocol) stapling. Enabling this allows Nginx to move the resource cost involved in providing OCSP responses by appending a time-stamped OCSP response to the initial TLS handshake, which eliminates the need for the client to contact the CA. Check these parameters:

ssl_stapling on;
ssl_stapling_verify on;
ssl_trusted_certificate /your/path/to/the/full_chain.pem;
resolver 8.8.8.8 8.8.4.4 valid=300s;
resolver_timeout 5s;

After you've changed all parameters, you have to test your config and reload Nginx. To do so, simply hit:

nginx -t
nginx reload

That's it. You should now have a way faster Ghost blog and top results. Please let me know in the comments if it worked for you or if you require help.