web page ◦ Data from DB ◦ Data from Network ↓ ◦ Embed to View Template ↓ ◦ Response completed HTML to the browser • Therefore ◦ We cannot store it to CDN General Rails Application
e.g. visit this site from New York, you will be served a static HTML page right from New York. • Control Fastly caches by “Surrogate-Control” header • Control browser caches by “Cache-Control” header • fastly-rails gem https://docs.fastly.com/guides/basic-concepts/how-caching-and-cdns-work
bust_cache if Rails.env.production? cache_buster = CacheBuster.new cache_buster.bust(path) cache_buster.bust(path + "?i=i") cache_buster.bust(path + "?preview=" + password) async_bust end end def async_bust CacheBuster.new.bust_article(self) HTTParty.get GeneratedImage.new(self).social_image if published end
function onFetch() {}); self.addEventListener('push', function onPush() {}); self.addEventListener('notificationclick', function onNotificationClick() {})
important is rendering it as quickly as possible • Eliminate all rendering-blocking latency In dev.to • No external CSS requests • No custom fonts • No synchronous JavaScript
The browser blocks rendering until it has both the DOM and the CSSOM • Need to deliver CSS as quickly as possible • ( Also avoid rendering-block CSS by media query ) <link href="style.css" rel="stylesheet"> <link href="style.css" rel="stylesheet" media="all"> <link href="print.css" rel="stylesheet" media="print"> <link href="other.css" rel="stylesheet" media="(min-width: 40em)"> <link href="portrait.css" rel="stylesheet" media="orientation:portrait">
tag in <head> tag • A partial for inline styles • CSS will be cached to CDN with Static HTML <%= render "layouts/styles" %> <link rel="stylesheet" type="text/css" href="mystyle.css">
No social widgets • Exc. ◦ https://dev.to/membership ◦ Stripe Action 4 : No synchronous JavaScript Image from https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async
page transition ◦ pjax = pushState + Ajax • On hover a link ◦ Asynchronous get page by XHRHttpRequest ◦ Store page body to JavaScript object • On Click a link ◦ Replace children of <body> tag ◦ Change URL by pushState
• Served from the most efficient format depending on the browser ◦ webp for Chrome ◦ jpeg for Safari ◦ etc... • Cloudinary fully leverages HTTP2 • In dev.to ◦ cloudinary_gem • Similar service to ImageFlux in Mercari ◦ https://case.sakura.ad.jp/case/mercari-imageflux ◦ https://tech.mercari.com/entry/2018/01/30/161001
general RoR application ◦ saied “Slow”, but you can make it “Insanely Fast” ◦ good OSS for studying about Ruby on Rails • All For One ◦ Performance on the web • Focus to ◦ CDN + Service Worker > Reducing network latency ◦ Preload / Lazy Load / No Load > Reducing rendering latency
Workers: an Introduction ◦ https://developers.google.com/web/fundamentals/primers/service-workers/ • The Service Worker Lifecycle ◦ https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle • Debugging Service Workers ◦ https://developers.google.com/web/fundamentals/codelabs/debugging-service-workers/
◦ https://dev.to/ben/making-devto-insanely-fast • How I Made this Website Hella Fast Without Overcomplicating Things ◦ https://dev.to/ben/how-i-made-this-website-hella-fast-without-overcomplicating-things • What it Takes to Render a Complex Web App in Milliseconds ◦ https://dev.to/ben/what-it-takes-to-render-a-complex-webapp-in-milliseconds • What the heck is a "Progressive Web App"? Seriously. ◦ https://dev.to/ben/what-the-heck-is-a-progressive-web-app-seriously-923