From Wordpress through Jekyll to Hexo - Website optimization
First of all I would like to say that I wanted to write this post for a very long time but… as always there is a common time issue.
Every optimisation needs to have basic goals. You want to hit some target. It can be better Search Engine Optimization. It can be basically speed optimization. From my perspective it was: SPEED!!!. So basic list of my tasks was:
- Concantenate CSS and JS files (including minification of files)
- Minify requests
- Optimization of images
- Serve static HTML files
So firstly I tried to merge my CSS files into one request. It can be done with preprocessor (ie. SASS) but also you can use specific web tools like https://cssminifier.com/ or you can use NPM modules in your Grunt/Gulp starter.
Minification of reqests is rather easy to do because all you need to check is count of requests to server. In your browser you can check it in “Developer tools > Network”. It lists your request to the server.
In previous step all requests for CSS and JS files were minified to one but you can do one more thing.
Merge CSS and JS content into served HTML. Additionally you can defne common lines of code and serve it in both (all) templates.
Specific one you can deliver additionally in selected templates.
Of course it has pros and cons. It doesnt create additional request to the server but in case of big files (CSS / JS) it wont be cached. In my case I chosen scenario that somebody can read my article and doesnt go to any other page and SPEED is the KING. Reader wants to read content and do not loose time for time load.
This creates for us a todo list in case of minification of requests
- Minify CSS/JS
- Divide common and template specific CSS/JS code
- Merge code CSS/JS (common and specific) with HTML template
There is a lot of articles and tools which can describe it for you. I will stick mainly to the processes and possible scenarios:
- Optimization of images for web
- Merging images with HTML templates (changing image to base64 code)
- Remove images where it is possible to maximize page load
Same as in previous example we will need to decide if we want to stick to caching (images in this case) or not. If we decide that we wont cache them we should code them with base64 and include into code. If not we should create new request and add url in src attribute.
There is one more issue - size of file. In case of 5 images without base64 we have:
For the straight comparison lets check max time, min time, average time, size of assets
In all cases the lower value the better
|Min Load time||1.48s||1.39s||0.09s||Base64|
|Max Load time||1.97s||2.09s||0.12s||No Base64|
|Avg Load time||1.618s||1.856s||0.238s||No Base64|
|DOMContentLoaded time min||0.182s||1.05s||0.868s (5 times!!!)||No Base64|
|DOMContentLoaded time max||0.439s||1.41s||0.971s (3 times!!!)||No Base64|
|DOMContentLoaded time avg||0.3036s||1.236s||0.9324s (4 times!!!)||No Base64|
|Size||3.0MB||3.7MB||0.7MB (+~20%)||No Base64|