1. Home
  2. /
  3. Wealth
  4. /
  5. Career
  6. /
  7. Faster Home Page Speed
Translate this page

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

Download my free ebook

Subscribe to my mailing list and get a free email course

* indicates required

Interests
  1. Home
  2. /
  3. Wealth
  4. /
  5. Career
  6. /
  7. Faster Home Page Speed
Translate this page

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.