How I Improved the Loading Speed of My Blog PerformanceAugust 22, 2018
In this post I’m going to demonstrate the steps I took in order to improve the loading speed of my blog. First of all, this blog is generated by Jekyll, the static site generator. I only build my static files and deploy them to GitHub pages. I use Webpack to compile my assets and then I use Jekyll to build the whole blog.
Around a year ago, I started on a mission to optimize the loading speed of my blog after feeling that it was slow and had some rendering issues. The next two screenshots demonstrate the difference in terms of loading time before and after the optimization:
In the next few points, I will list the steps I took to make my blog load faster than it used to:
1. Zurb Foundation
The first thing I started with was completely removing Zurb Foundation, the
CSS framework. I was using Foundation mainly for its grid system but I never
really used most of its other components. In spite of that, I was,
unknowingly, importing all its components into my main SCSS file (which, of
course, was atrocious). I totally removed Foundation and replaced it with
vanilla CSS (compiled PostCSS, actually). My main
index.css file was 242KB
in size. Now, it’s a 6.3KB file.
2. Font Awesome & Font Icons
This was based on an advice from the great frontend guru Ahmad Alfy: replacing Font Awesome with SVGs. There are already many articles that discuss the case for using SVGs instead of font icons. For me, having a smaller file size to download by specifically adding only the icons I need to the sprite file, and not seeing empty squares when the file is yet to be downloaded are two great advantages of using SVGs.
3. Google Analytics
Although it might be useful to some, I didn’t really use analytics that much.
For me, the added download time did not justify using Google Analytics
specially that the uncached
analytics.js file alone loads from Google
servers in about 200ms.
4. Disqus Comments
I believe enabling comments in my blog is essential for opening a two-way channel of feedback. However, the biggest issue with disqus is that it loads too many files and makes API calls to different servers for tracking and analytics. I have recently worked on an implementation of blog comments backed by GitHub issues but I haven’t deployed it yet.
experience in my blog. That is, I wanted to have every functionality working
for loading fonts using Web Font Loader, and the other is for toggling
between the light and the dark theme (Yes, there’s a dark theme in this blog).
Previously, two JS files were downloaded with a total size of 222KB and
loaded in about 77ms. Now, it’s just a single 20KB file that loads in ~20ms.
async to load the main
index.js file also helped a lot in the total loading time of the blog.
Having fewer files for the browser to download, and fewer resources that access the network help greatly in speeding the page load specially for static websites such as blogs.