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

description requests transferred finish DOMContentLoaded Load
before 11 139KB 11.06s 6.30s 6.32s
after 2 13.1KB 2.29s 2.29s 2.29s
change -81% -90% -79% -63% -63%

Accomplished by minimizing favicon, css, js and html.

Iterations

description requests transferred finish DOMContentLoaded Load
starting point 11 139KB 11.06s 6.3s 6.32s
removed all css and all js 3 36.3KB 6.76s 2.14s 4.42s
# minimized favicon 3 7.6KB 6.2s 2.14s 4.16s
## minified index.html 3 6.2KB 6.2s 2.14s 4.14s
## minimized index.html (not minified) 3 4KB 6.2s 2.14s 4.14s
## minimized and minified index.html 3 3.4KB 6.2s 2.14s 4.14s
removed all js, minimized favicon 5 27.6KB 6.8s 2.16s 4.66s
# inline main.css 4 27.4KB 6.73s 2.16s 4.63s
# inline full expanded bootstrap.css 3 152KB 9.11s 5.12s 7.07s
# inline used expanded bootstrap.css 3 20.7KB 6.47s 2.45s 4.43s
# inline used minified bootstrap.css 3 19KB 6.40s 2.37s 4.38s
# inline minimized minified bootstrap.css 3 13.5KB 6.33s 2.29s 4.28s
minimized favicon and css 9 96.1KB 10.26s 5.71s 5.73s
# implemented navbar click, removed all js 3 14.6KB 6.32s 2.34s 4.31s
# minimized navbar click 3 13.4KB 6.32s 2.33s 4.29s
# minimized index.html 3 12.8KB 6.32s 2.31s 4.29s
# base64 images 2 13.1KB 2.29s 2.29s 2.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:

description requests transferred finish DOMContentLoaded Load
before 11 112KB 10.62s 6.04s 6.06s
after 2 4.4KB 2.12s 2.12s 2.12s

Pingdom

description Performance grade Page size Load time Requests Link
before 90 113.4KB 566ms 11 link
after 100 4.4KB 234ms 1 link

Gtmetrix

description PageSpeed Score YSlow Score Fully Loaded Time Total Page Size Requests Link
before 95% 93% 0.500s 108KB 10 link
after 100% 100% 0.240s 4.46KB 1 link

Google Page Speed

description Score First Contentful Paint Speed Index Time to Interactive First Meaningful Paint First CPU Idle Estimated Input Latency Link
before 97 1.7s 1.7s 3.1s 1.7s 3.1s 10ms  
after 100 0.8s 0.8s 0.8s 0.8s 0.8s 10ms link

Web Page Test

description Load Time First Byte Start Render Speed Index Last Painted Hero Document Complete (DC) Time DC Requests DC Bytes In Fully Loaded (FL) Time FL Requests FL Bytes In Link
before 0.653s 0.247s 0.600s 0.600s 0.600s 0.653s 8 89KB 1.036s 10 106KB link
after 0.342s 0.248s 0.300s 0.300s 0.300s 0.342s 1 4KB 0.342s 1 4KB link

Starting Point

requests transferred finish DOMContentLoaded Load
11 139KB 11.06s 6.3s 6.32s

Many requests to css and js files.

Removing all css and all js

requests transferred finish DOMContentLoaded Load
3 36.3KB 6.76s 2.14s 4.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:

requests transferred finish DOMContentLoaded Load
3 7.6KB 6.2s 2.14s 4.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:

requests transferred finish DOMContentLoaded Load
3 6.2KB 6.2s 2.14s 4.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):

requests transferred finish DOMContentLoaded Load
3 4KB 6.2s 2.14s 4.14s

Measure again (with minify):

requests transferred finish DOMContentLoaded Load
3 3.4KB 6.2s 2.14s 4.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:

requests transferred finish DOMContentLoaded Load
5 27.6KB 6.8s 2.16s 4.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:

requests transferred finish DOMContentLoaded Load
4 27.4KB 6.73s 2.16s 4.63s

Inline full expanded bootstrap.css

Measure again:

requests transferred finish DOMContentLoaded Load
3 152KB 9.11s 5.12s 7.07s

Inline used expanded bootstrap.css

Measure again:

requests transferred finish DOMContentLoaded Load
3 20.7KB 6.47s 2.45s 4.43s

Inline used minified bootstrap.css

Deleted unused css.

Measure again:

requests transferred finish DOMContentLoaded Load
3 19KB 6.40s 2.37s 4.38s

Inline minimized minified bootstrap.css

Deleted more unused css.

Measure again:

requests transferred finish DOMContentLoaded Load
3 13.5KB 6.33s 2.29s 4.28s

Minimized favicon.ico and css (as before)

Measure again:

requests transferred finish DOMContentLoaded Load
9 96.1KB 10.26s 5.71s 5.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:

requests transferred finish DOMContentLoaded Load
3 14.6KB 6.32s 2.34s 4.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:

requests transferred finish DOMContentLoaded Load
3 13.4KB 6.32s 2.33s 4.29s

Minimized index.html

Measure again:

requests transferred finish DOMContentLoaded Load
3 12.8KB 6.32s 2.31s 4.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:

requests transferred finish DOMContentLoaded Load
2 13.1KB 2.29s 2.29s 2.29s