Learn Docker With My Newest Course

Dive into Docker takes you from "What is Docker?" to confidently applying Docker to your own projects. It's packed with best practices and examples. Start Learning Docker →

Updated on May 12th, 2020 in #deployment, #elixir, #flask, #javascript, #jekyll, #ruby-on-rails

Improving Your Page Load Speeds on Any Site with Turbolinks

blog/cards/improving-your-page-load-speeds-on-any-site-with-turbolinks.jpg

In this video, we'll add 1 line of JavaScript to drastically improve the speed of clicking between links on your site.

Quick Jump: How Turbolinks Works and Adding It to Your Site

Turbolinks is a JavaScript library (9kb gzipped) that you can add to your site, and with very little effort it will drastically reduce the amount of time it takes for your pages to render when clicking between links. Such as transitioning from 1 page to another.

It doesn’t require using websockets or re-architecting your application.

It’s perfect for sites that use server rendered templates because it almost makes your site feel like a single page app without being one. It also works with search engines of the box and gracefully degrades for users without JavaScript by performing regular page loads.

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.

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
  • 3:50 – Purposely disabling JavaScript to see the same site without Turbolinks
  • 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.

Never Miss a Tip, Trick or Tutorial

Like you, I'm super protective of my inbox, so don't worry about getting spammed. You can expect a few emails per month (at most), and you can 1-click unsubscribe at any time. See what else you'll get too.

Comments