My Profile Photo

Notepad.ONGHU

Knowledge, without memory, is useless

• on | Jekyll | My Setup | Tech | Web | RubyOnWindows |

Journey to Jekyll: Part 8 - Speeding up the Site Part 2

In Part 1 of Speeding up the Site, we optimised some images and removed AddThis. In this post, we try to optimise all the images before we push the site.

Note: FAILED!

In this page, I had hoped to make progress on installing and using a plugin/ gem that would allow me to compress all the images in my site. However, that did not work out on Windows for me. So, I’m sorry that this page won’t help you directly. If you want to know what problems I faced, read on! If you want to know where to get tools that help you compress images on Windows, scroll on down.

Where we Stopped

At the end of the last step, we had this from Google PageSpeed Insights With that done, the first one for mobile and the second for desktop. Note that this score was for the main blog page, so it’s not representative of any one blog post, but is a good start.

That’s good! We have made some progress – more on mobile where we were really lagging, and a little bit more on desktop. Let’s take it from there.

The Plan

Most of the posts have some images which are usually stored as PNG or JPG. We don’t do anything special to compress them further but it is usually possible to compress them a bit more by removing unnecessary parts of the image, changing the colour depth (i.e., how many colours are supported) and so on – without actually impacting what the user sees. In the previous post, we had used a website called https://tinyjpg.com/ for doing just that. Different tools allow us to process JPGs, GIFs, PNGs, etc. and it would be great if we could integrate some tool that would process all these images before we publish the site so that the final sizes for the images are smaller, leading to an even better experience.

Getting Started

So, I went to Google to find how that could be done, and found a gem that claims to do exactly that: jekyll-compress-images

The installation looks simple according to the GithHub page:

  • Add it to Gemfile
  • Add this to the _config.yml:
    plugins:
  - jekyll-compress-images
  • Configure it!

I added it to the Gemfile and ran bundle install. Because I was using a very old Ruby, I had a certificate error which was resolved as I described here and then the installation proceeded as normal.

I added the plugins lines to the _config.yml. In my setup, the images are under ./images so I changed and added the configuration as recommended:

compress_images:
  images_path: "images/**/*.{gif,png,jpg,jpeg,svg}"

With that done, I started the site again with the usual $ bundle exec jekyll serve

Warnings and does it even work?

All is not good! I get a deprecation warning:

Configuration file: D:/projects/blog/jekyll/onghu-uno/_config.yml
       Deprecation: The 'plugins' configuration option has been renamed to 'plugins_dir'. Please update your config file accordingly.

OK, so, it’s a warning and the site still starts up. But nothing seems to be happening. So, I break out and change it to plugins_dir instead.

It now looks like:

plugins_dir:
  - jekyll-compress-images

I did $ bundle exec jekyll build and checked the sizes of the images directory. It’s exactly the same size when I compare the sizes of the files in images with the sizes of the files _site/images.

Hmmm… so, it seems it does not work yet.

Adding to Gems and Trying Again

There is a line for gems in the _config.yml and it makes sense to add this gem also to that line. So, now I have this:

gems: ['jekyll-paginate', 'jekyll-textile-converter','RedCloth', 'jekyll-compress-images']

Let’s restart!

Great… and not so great! There are messages indicating that things did not work! (But, it’s progress)

      Generating...
No pack for this OS and/or ARCH, check verbose output
pngcrush worker: `pngcrush` not found; please provide proper binary or disable this worker (--no-pngcrush argument or `:pngcrush => false` through options)
advpng worker: `advpng` not found; please provide proper binary or disable this worker (--no-advpng argument or `:advpng => false` through options)
optipng worker: `optipng` not found; please provide proper binary or disable this worker (--no-optipng argument or `:optipng => false` through options)
pngquant worker: `pngquant` not found; please provide proper binary or disable this worker (--no-pngquant argument or `:pngquant => false` through options)
jhead worker: `jhead` not found, `jpegtran` not found; please provide proper binary or disable this worker (--no-jhead argument or `:jhead => false` through options)
jpegoptim worker: `jpegoptim` not found; please provide proper binary or disable this worker (--no-jpegoptim argument or `:jpegoptim => false` through options)
jpegtran worker: `jpegtran` not found; please provide proper binary or disable this worker (--no-jpegtran argument or `:jpegtran => false` through options)
gifsicle worker: `gifsicle` not found; please provide proper binary or disable this worker (--no-gifsicle argument or `:gifsicle => false` through options)
svgo worker: `svgo` not found; please provide proper binary or disable this worker (--no-svgo argument or `:svgo => false` through options)
Optimizing images/posts/deleaker/deleaker.gif
Optimizing images/favicons/android-chrome-144x144.png
Optimizing images/favicons/android-chrome-192x192.png
Optimizing images/favicons/android-chrome-36x36.png
...

Hmmm! It gave me a number of warnings/ errors about not finding any tools but then gave me a long list of ‘Optimizing…’ statements. So, did it do anything? From the messages at the top, it needs tools that will do the actual compression and we don’t have any installed (I’m on Windows, so there is probably more to do).

Resolving the Errors

So, we need to find tools like pngcrush, advpng, optipng, pngquant, jhead, etc. Also, there are options that we can pass if something is not available. The first thing I tried to do was to find the binaries for Windows. Them, add them to a folder on my path (I have a directory called d:\Tools that has a lot of CMD files and EXE files, so I have that added to my path so that I call any of these from the command line.)

The list below shows where to get the binaries for Windows:

Running the compression again

To speed up subsequent runs, the plugin creates a file called _compress_images_cache.yml in which it stores the paths of all the files that it think it has processed. Even if it does nothing in the pass, once a file is listed here, it will not be re-processed after you install tools or change the configurations. The easiest thing to do is to $ del _compress_images_cache.yml so that the list is removed and run the build again to force it to process the files again.

Giving up (for now)

I tried a few things and I tried to run this again and again. I also made some changes to the code of the gem/ plugin based on the GitHub page (since the code on GitHub is newer than the last gem release). However, today, I was not able to get it to work. For reference, this was the last configuration I used from within the _config.yml

compress_images:
  images_path: "images/**/*.{gif,png,jpg,jpeg,svg}"

imageoptim:
  verbose: true
  jpegoptim:
    allow_lossy: false
    strip: ["all"]
    max_quality: 100
  optipng: true
  pngout: true
  svgo: false
  pngcrush: true
  advpng: true
  pngquant: true
  jhead: true
  jpegtran: true
  gifsicle: true
  pngcrush: true

From what I could tell, the files were being created in the TEMP folder and were being removed, but were not being copied either to my source images folder, or to the output images folder. I might need to debug more carefully to see if I can find what the issue might be.

Also, jekyll-compress-images uses image_optim which has an issue for making things work on Windows that describes the problem I faced. Since the issue is closed satisfactorily, I will go through it again at another time and see if I can make it work… in which case, we would be back on track!

New Plan – for now!

So, I am changing the plan for now:

  • I will first upgrade Ruby and Jekyll to move to newer better-maintained versions of both
  • Then, I will revisit this optimisation

For now, the status is: FAILED – try again!

I’m sorry that this page could not be of more help. If you have any ideas on what I could be doing wrong or what else should be added, just add to the comments below or message me.

comments powered by Disqus