Ghost Blog to 100% Speed
A few months ago I moved my blog across hardware and changed things up chasing that 100% PageSpeed Insights.
Now I was pretty excited to see the work paid off with a 98% overall. However, what does it take to push that 98% to 100%? Let's see what I'm missing.
PWA - Progressive Web App
Right now Ghost does not support PWAs out of the box. I could probably hack in support for them, but if I've learned anything in my WordPress era - hacking in features for something results in a nightmare of maintenance later on.
For Ghost though, you aren't recommended to cache full pages as those are usually dynamic. In the case of my blog - I could only cache 5 resource files, which could even drop down to just two which doesn't seem worth the effort at this time.
I think if Ghost built this into the product, they would leverage the content API in order to cache the blog posts themselves and the resources resulting in a very high hit count for the cache. I noticed a few other people interested on the forums, but time will tell if that becomes part of the official package. For now, I think it simply is too niche to belong in "core" Ghost.
Lazy loading is a technique that resources aren't loaded until you actually need them. This is common when reading a blog post that is a couple thousand lines long littered with images. It wouldn't make sense to load all 30 images at once in that post - just load them as you scroll those images into view.
However, that sounds easy but what about the layout of the site? Does it constantly repaint and redesign as images load in? Hopefully not, but that requires you to know the size of the image before the load so you can reserve that portion of the layout.
Not to mention, it is relatively new still so browser support isn't yet perfect. A few more cycles of browser releases may change this and I will re-approach this then.
Google is an interesting position here. Let me break it down into a bullet point list.
- Invent new image format that is superior in a few areas.
- Build support for that new image into their own browser.
- Add support into Google products for Google browsers.
- Convince people to use Google browsers as Google products are more efficient.
- Leverage new format into Google search placement forcing others to catch up.
- Dominate market with self created/invented options.
I think that is basically a good breakdown, but not everyone has the strength and power of Google. For me to get WebP support in PHP, I need to build GD with some special flag and install some dependency from some source. For the case of standard image types - it just works.
For blogs that are already written, neither are easy without manual labor or only supporting things "moving forward". Google does not like things that only a percentage of a site supports, because those legacy pages will show up in Google Webmaster console with warnings and errors.
For now, I won't move on WebP images until Ghost supports them. In the meantime, I can probably just optimize my existing image formats to cut down on unneeded data transfer.
This one is relatively easy to solve. If you were to inspect my site's resources a few days ago. You would see something like this.
Basically, human readable but then all the spaces and comments have to be transmitted over the wire. Now, they are compressed little files with all extra information removed.
DONE Compiled successfully in 1108ms Asset Size Chunks Chunk Names /assets/css/screen.min.css 79.7 KiB [emitted] /assets/js/global.min.js 14.1 KiB [emitted] /assets/js/index.min.js 78.5 KiB [emitted] /assets/js/ityped.min.js 1.79 KiB [emitted] /assets/js/post.min.js 21.1 KiB [emitted] Done in 14.61s.
This basically shows that I don't have to develop with unreadable files, I just "build" them and zip them up into the theme. Now these are deployed alongside the unminified files (just in case I missed a reference).
All in all, most of these changes are just not worth the development time for a few extra percentage points. As months go on it will become easier to do and then I'll revisit.