Skip to content
Gary Storey
TwitterGithub

PageSpeed Insights and Ghost - Part 1

Ghost, NGINX, JavaScript2 min read

I went to Google's PageSpeed Insights page the other day to check my score. I am currently using the default Casper theme for my Ghost blog. My baseline score for Mobile was 74/100 and on Desktop 82/100. These scores aren't bad but I know I could get it a lot higher. The goal, of course, is to end up with a perfect 100/100.

Later this month ( April 21, 2015 ), Google will be updating their search algorithm and promoting pages that have better performance especially on mobile devices. This is a good time to make the changes that we need to before they impact rankings.

What PageSpeed checks

Here are the items that are being tested:

  • Avoid landing page redirects
  • Enable compression
  • Minify HTML
  • Minify JavaScript
  • Minify CSS
  • Optimize images
  • Prioritize visible content
  • Reduce server response time
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content
  • Leverage browser caching

There is some good news (for me at least). A couple of these are already optimized: Avoid landing page redirects and Minify HTML. That still gives us plenty to do. In this article, I am going to concentrate on what I can do on my server to help the score. In a follow up article, go over how I modified the default theme.

Off we go!

Configuring Nginx

On my host, Nginx routes traffic to my Ghost blog. But, by default, the server configuration isn't as optimal as it could be. We are going to knock out two metrics: Leverage browser caching and Enable compression. To do this we will have to change Nginx's configuration files. For browser caching we need /etc/nginx/conf.d/default.conf and /etc/nginx/nginx.conf for gzip compression.

Enabling GZIP compression

By enabling GZIP compression on the server, web browsers can download the files faster. This kind of compression results in a file size reduction of 50% - 70%. And that will give us an overall increased page speed.

On the server in the /etc/nginx find the nginx.conf and add the following code into the http{ } area of the file. I put mine at the very top of this section and it looks like this:

1http {
2 gzip on;
3 gzip_comp_level 5;
4 gzip_min_length 256;
5 gzip_proxied any;
6 gzip_vary on;
7 gzip_types
8 application/atom+xml
9 application/javascript
10 application/json
11 application/ld+json
12 application/manifest+json
13 application/rdf+xml
14 application/rss+xml
15 application/schema+json
16 application/vnd.geo+json
17 application/vnd.ms-fontobject
18 application/x-font-ttf
19 application/x-javascript
20 application/x-web-app-manifest+json
21 application/xhtml+xml
22 application/xml
23 font/eot
24 font/opentype
25 image/bmp
26 image/svg+xml
27 image/vnd.microsoft.icon
28 image/x-icon
29 text/cache-manifest
30 text/css
31 text/javascript
32 text/plain
33 text/vcard
34 text/vnd.rim.location.xloc
35 text/vtt
36 text/x-component
37 text/x-cross-domain-policy
38 text/xml;
39
40# -- REST OF THE FILE HERE!!

That should give us a good setup for the compression. Now let's set up some expires headers by modifying the default.conf file. If you want you can restart Nginx ( see below for the command to execute on the server ). This will add these changes and verify that there are no typos, etc. Or you can just go ahead and move to the next section.

Configuring Cache-Control & Expires header

I'm not going to go into why this is a good thing here. Other smarter people can explain it much better than I can. Basically, the longer files are in cache the better the performance of the site. You can always bust the cache when you make a change. The default cache time is one hour which is terrible from a performance perspective. So I wanted to make mine last for a much longer time. For Ghost and Nginx, we change the default.conf file located in the etx/nginx/conf.d/ folder.

Here is that file:

1server {
2 listen 80;
3 server_name YOURDOMAINNAMEHERE; #replace with your domain
4
5 # Theme assets (CSS, Javascript)
6 # Cache these assets for 30 days
7
8 location /assets/ {
9 expires 30d;
10 add_header Pragma public;
11 add_header Cache-Control "public";
12 proxy_pass http://localhost:2368/assets/;
13 proxy_set_header Host $host; proxy_buffering off;
14 }
15
16
17 # jQuery (and other vendor files)
18 # Cache these assets for 365 days!!
19
20 location /public/ {
21 expires 365d;
22 add_header Pragma public;
23 add_header Cache-Control "public";
24 proxy_pass http://localhost:2368/public/;
25 proxy_set_header Host $host;
26 proxy_buffering off;
27 }
28
29
30 # Everything else
31
32 location / {
33 proxy_pass http://localhost:2368/;
34 proxy_set_header Host $host;
35 proxy_buffering off;
36 }
37 }

Now, everything in our theme assets folder will stay in cache for thirty days. For those in the public folder (for jquery ), it will stay for 365 days!

We need to restart Nginx for these changes to go into effect.

1[sudo] service restart nginx

Once I rerun the PageSpeed tests, four our of our ten tests passed! Our score has gotten higher as well.

Google PageSpeed Score

Now, we have taken care of the server configuration. We can start working on customizing the Casper theme. This will be where we will do the majority of our work.

I will do that in another post.

'Til next time!

-G

© 2021 by Gary Storey. All rights reserved.