Faster Home Page Speed

Summary

Local

Serving on local machine, with chrome developer tools open, network tab, disable cache, slow 3G, ctrl+shift+r for full refresh.

Overall Improvement

descriptionrequeststransferredfinishDOMContentLoadedLoad
before11139KB11.06s6.30s6.32s
after213.1KB2.29s2.29s2.29s
change-81%-90%-79%-63%-63%

Accomplished by minimizing favicon, css, js and html.

Iterations

descriptionrequeststransferredfinishDOMContentLoadedLoad
starting point11139KB11.06s6.3s6.32s
removed all css and all js336.3KB6.76s2.14s4.42s
# minimized favicon37.6KB6.2s2.14s4.16s
## minified index.html36.2KB6.2s2.14s4.14s
## minimized index.html (not minified)34KB6.2s2.14s4.14s
## minimized and minified index.html33.4KB6.2s2.14s4.14s
removed all js, minimized favicon527.6KB6.8s2.16s4.66s
# inline main.css427.4KB6.73s2.16s4.63s
# inline full expanded bootstrap.css3152KB9.11s5.12s7.07s
# inline used expanded bootstrap.css320.7KB6.47s2.45s4.43s
# inline used minified bootstrap.css319KB6.40s2.37s4.38s
# inline minimized minified bootstrap.css313.5KB6.33s2.29s4.28s
minimized favicon and css996.1KB10.26s5.71s5.73s
# implemented navbar click, removed all js314.6KB6.32s2.34s4.31s
# minimized navbar click313.4KB6.32s2.33s4.29s
# minimized index.html312.8KB6.32s2.31s4.29s
# base64 images213.1KB2.29s2.29s2.29s

Production

Chrome Dev Tools

Serving on production, with chrome developer tools open, network tab, disable cache, slow 3G, ctrl+shift+r for full refresh:

descriptionrequeststransferredfinishDOMContentLoadedLoad
before11112KB10.62s6.04s6.06s
after24.4KB2.12s2.12s2.12s

Pingdom

descriptionPerformance gradePage sizeLoad timeRequestsLink
before90113.4KB566ms11link
after1004.4KB234ms1link

Gtmetrix

descriptionPageSpeed ScoreYSlow ScoreFully Loaded TimeTotal Page SizeRequestsLink
before95%93%0.500s108KB10link
after100%100%0.240s4.46KB1link

Google Page Speed

descriptionScoreFirst Contentful PaintSpeed IndexTime to InteractiveFirst Meaningful PaintFirst CPU IdleEstimated Input LatencyLink
before971.7s1.7s3.1s1.7s3.1s10ms
after1000.8s0.8s0.8s0.8s0.8s10mslink

Web Page Test

descriptionLoad TimeFirst ByteStart RenderSpeed IndexLast Painted HeroDocument Complete (DC) TimeDC RequestsDC Bytes InFully Loaded (FL) TimeFL RequestsFL Bytes InLink
before0.653s0.247s0.600s0.600s0.600s0.653s889KB1.036s10106KBlink
after0.342s0.248s0.300s0.300s0.300s0.342s14KB0.342s14KBlink

Starting Point

requeststransferredfinishDOMContentLoadedLoad
11139KB11.06s6.3s6.32s

Many requests to css and js files.

Removing all css and all js

requeststransferredfinishDOMContentLoadedLoad
336.3KB6.76s2.14s4.42s

2 requests to favicon.ico (one for logo), image is too big.

Otimizing favicon.ico

Before:

$ identify client/assets/img/favicon.ico
client/assets/img/favicon.ico[0] ICO 16x16 16x16+0+0 8-bit sRGB 15406B 0.000u 0:00.010
client/assets/img/favicon.ico[1] ICO 32x32 32x32+0+0 8-bit sRGB 15406B 0.000u 0:00.010
client/assets/img/favicon.ico[2] ICO 48x48 48x48+0+0 8-bit sRGB 15406B 0.000u 0:00.010
$ ls -alt client/assets/img/favicon.ico
-rw-r--r-- 1 kaue eng 15406 Nov 25 15:03 client/assets/img/favicon.ico

Convert to png:

$ convert client/assets/img/favicon.{ico,png}
$ identify client/assets/img/favicon*.png
client/assets/img/favicon-0.png PNG 16x16 16x16+0+0 8-bit sRGB 748B 0.000u 0:00.000
client/assets/img/favicon-1.png PNG 32x32 32x32+0+0 8-bit sRGB 1529B 0.000u 0:00.010
client/assets/img/favicon-2.png PNG 48x48 48x48+0+0 8-bit sRGB 2900B 0.000u 0:00.000

Keep only the smallest:

$ identify client/assets/img/favicon.ico
client/assets/img/favicon.ico PNG 16x16 16x16+0+0 8-bit sRGB 748B 0.000u 0:00.009
$ ls -alt client/assets/img/favicon.ico
-rw-r----- 1 kaue eng 748 Apr 24 17:23 client/assets/img/favicon.ico

Measure again:

requeststransferredfinishDOMContentLoadedLoad
37.6KB6.2s2.14s4.16s

Now the html is too big.

Optimizing index.html

Before:

$ ls -alt server/_site/home/index.html
-rw-r----- 1 kaue eng 5669 Apr 24 17:51 server/_site/home/index.html

Minify:

minify server/_site/home/index.html > server/_site/home/index.min.html
$ ls -alt server/_site/home/*
-rw-r----- 1 kaue eng 4175 Apr 24 18:18 server/_site/home/index.min.html
-rw-r----- 1 kaue eng 5669 Apr 24 17:51 server/_site/home/index.html

(using https://github.com/tdewolff/minify/tree/master/cmd/minify)

Measure again:

requeststransferredfinishDOMContentLoadedLoad
36.2KB6.2s2.14s4.14s

Without most of the content:

$ ls -alt server/_site/home/*
-rw-r----- 1 kaue eng 1319 Apr 24 18:23 server/_site/home/index.min.html
-rw-r----- 1 kaue eng 1988 Apr 24 18:22 server/_site/home/index.html

Measure again (without minify):

requeststransferredfinishDOMContentLoadedLoad
34KB6.2s2.14s4.14s

Measure again (with minify):

requeststransferredfinishDOMContentLoadedLoad
33.4KB6.2s2.14s4.14s

Each request has 2 seconds of Waiting (TTFB), so not worth optimizing the other 0.2 seconds.

Remove all js, minimize favicon.ico (as before)

Measure again:

requeststransferredfinishDOMContentLoadedLoad
527.6KB6.8s2.16s4.66s

Small main.css and large bootstrap.min.css.

Inline main.css

-<link rel="stylesheet" href="/assets/css/main.css">
+<style>
+{% include main.css %}
+</style>

Measure again:

requeststransferredfinishDOMContentLoadedLoad
427.4KB6.73s2.16s4.63s

Inline full expanded bootstrap.css

Measure again:

requeststransferredfinishDOMContentLoadedLoad
3152KB9.11s5.12s7.07s

Inline used expanded bootstrap.css

Measure again:

requeststransferredfinishDOMContentLoadedLoad
320.7KB6.47s2.45s4.43s

Inline used minified bootstrap.css

Deleted unused css.

Measure again:

requeststransferredfinishDOMContentLoadedLoad
319KB6.40s2.37s4.38s

Inline minimized minified bootstrap.css

Deleted more unused css.

Measure again:

requeststransferredfinishDOMContentLoadedLoad
313.5KB6.33s2.29s4.28s

Minimized favicon.ico and css (as before)

Measure again:

requeststransferredfinishDOMContentLoadedLoad
996.1KB10.26s5.71s5.73s

Requests are jquery.min.js, google analytics (3 requests), bootstrap.min.js, main.js.

Implemented navbar click and removed all other js

Measure again:

requeststransferredfinishDOMContentLoadedLoad
314.6KB6.32s2.34s4.31s

Minimized navbar click implementation

function navbar_click(i){var t=document.getElementById(i),a='class',b=' in',c=t.getAttribute(a);t.setAttribute(a,c.indexOf(b)==-1?c+b:c.replace(b,''));}

Measure again:

requeststransferredfinishDOMContentLoadedLoad
313.4KB6.32s2.33s4.29s

Minimized index.html

Measure again:

requeststransferredfinishDOMContentLoadedLoad
312.8KB6.32s2.31s4.29s

Encoded images with base64

Example:

<link id="favicon" rel="shortcut icon" type="image/vnd.microsoft.icon" href="data:image/vnd.microsoft.icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABAlBMVEUAAAAfmesfm+4fm+0gnO4amescjuMfnO0fnO4fm+0gn/8fnO8fnO4gn98fnPAbne8fnO4fnO4fnO0gnO8gm+4gnO4fm+4cm+4gnO4enO4fm+4em+4gm+4fnO8em+4gnO4ine5UsvE/qvAypO8xo++HyfWEyPVNsPGx3PhBqvC53/mr2fgqoO6GyfXB4/mv2/groO5JrvC/4vmZ0fad0/e03fhQsfF+xfSh1feAxvRctvI1pe+03fmNzPVbtvJ8xPSo2PeSzvZGrfCKyvVvv/Om1/dguPKj1fc4pu8inO6PzfaTzvZYtPFPsPE5p+9pvPN4w/RKrvAlnu5XtPFMr/H////ZuIRRAAAAH3RSTlMAMpbX+TIJnf2cCL+/CJYvldjY+Pj31y6YmMCXmdyZWOSTUwAAAAFiS0dEVZMEuDMAAAAHdElNRQfiCxkQAx2ZlKVHAAAAvElEQVQY0zVP5RrCQAwrt+Gy4U5xd3cY7v7+z0JvB/mRL5e21waAYGCSLEvMCAImswV1WKwm/rbZEZPCQYeTDBeJVJook0VkAArvz+URC8USTSmg8tZypVqrN5qkVHATt9rlTrfX5yUPeIkHw9G4M9G/9YGfG9PZ/LfHDwHiRXeprYQhASNeb7TKdqcbqr52fziezrULPzYIEEK83hDvj/wTMcyjRMT06/052kWY6D8cs/3yKrG4LMcTCtdfS6AdD3d03e8AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTgtMTEtMjVUMTU6MDQ6NDUrMDE6MDA43zsnAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE4LTExLTI1VDE1OjAzOjI5KzAxOjAwqpH7EQAAAABJRU5ErkJggg==">

Measure again:

requeststransferredfinishDOMContentLoadedLoad
213.1KB2.29s2.29s2.29s

Subscribe to my mailing list and get a free email course

* indicates required

Interests


Updated on 2019 Apr 24.
DISCLAIMER: This is not professional advice. The ideas and opinions presented here are my own, not necessarily those of my employer.