Optimising a ghost blog for speed

Are there simple things to do to optimise a ghost blog for speed? For example, I need to remove all fonts except the one I chose from Google (see screenshot, I need to keep fredoka). I don’t want to edit the theme’s file and would prefer some code to inject. I would really like to have a blog in 85+ on mobile (right now it’s around 70 on google).

Another optimisation I need to make is include Tailwind CSS but only things I need instead of the whole library. I have the chance to experience Ghost freely thanks to DigitalPress (DP). But I also need a simple solution to include the library from the CDN and purge the CSS. I don’t have access to my content; maybe I should ask DP to give me FTP creds.

By the way, Casper (the default theme) and Tailwind CSS don’t work correctly together. I wanted to use Casper because it’s really fast but now I’m switching back to Liebling.

If you want to remove things in order to reduce load time and general speed you’re going to have to edit your theme. Injecting code is just going to make things worse, not better. Whether you do it yourself or hire a developer to do it for you.

I don’t have any immediate suggestions for best first steps especially as I haven’t used the Liebling theme before, unfortunately.

Hi,
i’m not familiar with DigitalPress but are you able to up-/download your theme in ghost admin > design?
If so, you could customize the theme to your liking.
Ghost itself doesn’t really need optimization (besides loading the stripe api maybe :stuck_out_tongue: ) it’s really really fast out of the box.
So it’s down to the theme itself and all the scripts/fonts/css/media, that are loaded, that can slow down your ghost blog.

I would recommend to slim down your theme to your needs.
Regarding Tailwind: It surely would work with Casper, but you have to integrate it properly in your screen/global.css.

Simple steps to optimize a website particularly for performance:

  • fast response time from server/cdn
  • strip theme/server of any unnecessary feature that adds overhead to your server performance and loading time
  • keep filesize to minimum (minimize css and js ; compress images and video)
  • load scripts/fonts/css at the proper place (header vs body) with the proper attributes (async, defer, preload etc.)
2 Likes

Re. Tailwind CSS, are you using this via CDN or building it into your development?

Performance tuning is definitely a game of diminishing returns… it’s pretty easy to get ‘good’ performance. Ghost performance out of the box is good, but getting ‘very good’ is exponentially harder, then ‘excellent’ requires technical effort and (sometimes) money.

I’m getting >90 on PageSpeed Insights for desktop and mobile, but that’s with a lot of tweaking. These are some of the things I’ve done/tried:

  • Using an nginx cache in front of Ghost
  • Self-hosting static resources (fonts, js libraries etc) so I had full control over cache strategy (and marginally better privacy for users)
  • Re-compiling nginx with PCRE regex support, ngx_pagespeed and other goodies
  • Setting up a CDN on its own subdomain for my blog. I use BunnyCDN so it’s very cheap indeed for a low traffic site like mine, but that’s the bit that wasn’t completely free.

I think you’re on the right track using testing tools like PageSpeed Insights and your site is already using HTTP2 and lots of the other ‘quick wins’ for performance.
Webpagetest.org is also great for giving detailed reports on your site’s performance and where there’s room for improvement.

The trouble is, without at least tweaking the theme, you won’t be able to improve much more from where you’ve already reached (imho).

1 Like

@NicolasK here is a comprehensive, well-explained overview: