search

findingmarbles / Retromat

Retromat: Plans for (agile) retrospectives - Create, tweak, print, share
46 stars 25 forks source link

Adding link preconnect header for improved performance #58

Closed technopagan closed 6 years ago

technopagan commented 6 years ago

Retromat is making use of several assets from 3rd-party hosts. These assets can be requested faster if link preconnect is applied because it does the DNS resolution, TCP connection and TLS Handshake ahead of time so that when the assets get requested within the HTML, the HTTP connection is already fully established.

Here's more info on link preconnect: https://caniuse.com/#feat=link-rel-preconnect https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/ https://github.com/GoogleChrome/lighthouse/issues/3106

I've made use of the .htaccess file to implement this because this seems to be the easiest way to change Apache server config settings on Uberspace. See: https://wiki.uberspace.de/webserver:htaccess

fiddike commented 6 years ago

Thank you @technopagan , looking forward to trying this out, merging & deploying your changes (both PRs), most likely on Monday :-)

fiddike commented 6 years ago

Merged (and automatically deployed), at a first glance webpagetest.org output looks similar as before. At the very least, things are still working and I can go to sleep 8-) Can you observe the intended effects?

technopagan commented 6 years ago

@fiddike All looking good!

You can test that it's working by using Chrome's "net-internals" tool and viewing active sockets: chrome://net-internals/#events&q=type:SOCKET%20is:active Then use the DevTools to artificially reduce bandwidth so that the requests will come in super-slowly and open https://plans-for-retrospectives.com/. When you the connections to the listed hosts in the preconnect header be established instantly - even without anything being visible on the site or even the DevTools network waterfall, you'll know it's working as intended.

I've checked it exactly as described above and it's looking good! 👍 Here's a screenshot of the net-internals sockets listing ~1 second after requesting https://plans-for-retrospectives.com/ on a custom super-slow 2G connection.

screen shot 2018-03-07 at 8 33 43 pm
fiddike commented 6 years ago

@technopagan Thank you for explaining! Just learned something new 8-)