Hello guys, today I will write article about how to make hexo blog load faster. Everything is so simple, because we will use only two hexo plugins and your hexo blog will get A score from GTMetrix so easily. So how to do this?

What is Hexo

Hexo is a Static Html Generator which is based on NodeJS. You don’t need a database server like if you are using Wordpress or any cms out there. Everything is just html files so you can just upload to any web server and you can just put your website into GitHub, GitLab, BitBucket, etc.

The pros of using Hexo blog?

  • Static HTML website.
  • Source code is on your local computer.
  • You don’t need using database server.
  • You don’t need to be online to write article, internet is not required.
  • You can just upload to GitHub, Netlify, etc for free hosting, webserver is not required.
  • With the power of Git, you can have multiple user to contribute the website.
  • Strong to handle high traffic because no computation on server side as it is just static files.
  • No hacker could be hack your website if your source code is saved in private git repository.

The cons of using Hexo blog?

  • There is no WYSIWYG editor
  • To deploy is via command line
  • Your static website could be stolen if uploaded to public repository. *
  • Generate more than 10K files could get JavaScript Heap out of memory. **

Note:

  • ‘*’ Use your own webserver to prevent your content stolen.
  • ‘**’ There is trick to avoid this, you can search through Google.

Make Hexo Faster

The basic things who can make your website slower is html, css, js, and image files. So you have to make sure to handle it’s files as small as possible. But don’t do it manually, because you can just waste your time. Let’s make this everything do automatically with powered of Hexo blog.

Playing with a public CDN will also useful to cache your files so your website will get more faster because your files will be cached into multiple networks to all countries so your visitor will get the nearest server to load your files automatically.

Use Minifier

Hexo has all in one minifier plugin. This plugin will work to make minifier all your files html,css,js, and image.

Here is the tutorial to use hexo-all-minifier :

  1. Install hexo-all-minifier
    1
    $ npm install hexo-all-minifier

For mac user there is more required library to install

1
$ brew install libtool automake autoconf nasm
  1. Add this line into your _config.yml
    1
    all_minifier: true
  2. Done

Now your files will automatically minified when you are deploy to git. For advanced use, actually there is more configuration in their documentation. You can learn more at here.

Use CDN

Hexo has CDNify plugin which is you can rewrite your url assets to use your own CDN. If you are don’t have any CDN premium, you can make use CDN from github as free as powered by jsdelivr.

If you are not using GitHub pages, unfortunately you maybe will have to upload your assets manually into your premium CDN. But if you are using GitHub pages, once your website deployed to github, you already have CDN from jsdelivr, the benefit is everything is run automatically.

The benefit using jsdelivr CDN with hexo-cdnify :

  • Everything automatically
  • Realtime update, no need to add time parameter to avoid CDN caching

So here is the tutorial to use hexo-cdnify :

  1. Install hexo-cdnify

    1
    $ npm install hexo-cdnify
  2. Add this line into your _config.yml

    • If you are using premium CDN

      1
      2
      3
      cdn:
      enable: true
      base: //cdn.com/
    • if you are using GitHub pages

      1
      2
      3
      cdn:
      enable: true
      base: //cdn.jsdelivr.net/gh/<GITHUB_USERNAME>/<GITHUB_REPOSITORY_NAME>@<GITHUB_BRANCH_NAME>/

    Note:

    • Change <GITHUB_USERNAME> with your github username.
    • Change <GITHUB_REPOSITORY_NAME> with your github repository name.
    • Change <GITHUB_BRANCH_NAME> with your branch name, for example gh-pages.
    • Don’t forget to always use trailing slash at the end of url base.
  3. Done

Now after you deploy your hexo blog, all assets in your website will automatically use CDN. If you want to learn more features in using hexo-cdnify, you can read from their documentation at here.

Test with GTMetrix

If you want to test your website pagespeed, I recommend to use GTMetrix because the result of the pagespeed test is very detail. You will get PageSpeed, YSlow and Waterfall information of result test. They also give you recomendations how to fix your website to increase the speed.

How to test the website page speed with GTMetrix :

  1. Visit to https://gtmetrix.com.
  2. Input your url address of your website.
  3. Click Analyze.
  4. Wait for a second then you will get the result test.
  5. Done.

See in this picture below about Hexoder test in GTMetrix.

After you see that picture above, maybe you will ask why the hexoder website just getting B score in YSlow? It is because of additional 3rd party plugin of using Google Analytics, Adblocker, and ShareThis. Because they don’t use CDN for js script then it will hurt the performance speed. So be careful of using 3rd party library, if you think it not so important for your website, just avoid to use it.

Conclusion

Hexo is the fast and powerful to create static html website for blog or portfolio. With only these two plugins, you already increase the page load speed of your website. This article is only to optimize the source code of your hexo blog.

  • Why I don’t include AMP ?

AMP will increase your website more faster, but it will work for mobile only and your website features will be decreased because you can not use regular javascript in AMP page. Actualy it support but it is really hard to make the validation AMP checker status valid on your AMP page.

  • How about using Cache ?

With using Hexo, your website is static html files, so you don’t need cache anymore. Also with using CDN, you are already cache your assets files by CDN itself.

  • How about using DNS Cloudflare ?

I’m not include into the list about use DNS Cloudflare because if you are using GitHub pages, Netlify, etc. It has already DNS features and your website surely could be accessed in all countries. But if you want to have more feature like using 3rd application easily, you can go to use cloudflare service. Also to be able to use this custom DNS with cloudflare, you will need to buy a custom domain first so you are able to configure the CNAME.

  • Is there any way to make more faster ?

Actualy there is still a lot of other method to increase your website more faster. For example you have to know how to defer your css and js script and make sure you load your images with lazyload technique. There is a lot of tutorial about this defer out there, you can just search through Google. Or maybe I will write article about how to defer css and js script in the next time.

Thank you for your time to reading my article.