Improving Your Page Load Speeds on Any Site with Turbolinks
Quick Jump: How Turbolinks Works and Adding It to Your Site
It doesn’t require using websockets or re-architecting your application.
It works with all web frameworks, so if you’re using Flask, Phoenix, Rails, Node, Django, Laravel, Go or you have a static site it’ll work just fine. The project originated from Ruby on Rails and has been around for years so it’s battle tested in production.
How Turbolinks Works and Adding It to Your Site
Timestamped Table of Contents
- 0:54 – An example of my podcast site that uses Turbolinks
- 2:41 – How Turbolinks works and why it makes a big difference for the better
- 4:26 – SEO works out of the box with Turbolinks without you having to do anything
- 5:13 – When Turbolinks is working, in the background it makes XHR requests
- 5:21 – Turbolinks swaps the body of your page to avoid re-parsing your CSS / JS
- 6:02 – Turbolinks has you covered if your CSS / JS bundles change
- 7:28 – Pinning specific DOM elements on a page with the permanent data attribute
- 9:50 – As of May 2020, a new Turbolinks version is in the works
- 10:37 – Installing Turbolinks on your site
- 11:39 – Changing the jQuery DOM ready event to turbolinks:load and other events
- 13:21 – Getting things like Google Analytics to work with Turbolinks
- 14:36 – Handling POST requests + redirects with Turbolinks requires back-end changes
- 16:23 – Optionally using Turbolinks for form submissions when not using Ruby on Rails
- 17:35 – Turbolinks can show a progress bar when page loads aren’t nearly instant
- 18:09 – As far as I know, Turbolinks is an evolution of pjax which GitHub uses
Are you using Turbolinks on your site? Let me know below.