preload 周りをためしてみる
パフォーマンス改善あれこれ試してみる | mersy note
https://note.mersy418.com/article/blog-performance20180701
の続き。
preload を追加
Eliminate render-blocking resources
https://developers.google.com/web/tools/lighthouse/audits/blocking-resources?hl=ja
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=jaイマイチわかってない
こちらのはとりあえず、 preload を試してみる。
<!-- Bootstrap core CSS -->
<link rel="preload" as="style" href="/vendor/bootstrap/css/bootstrap.min.css?v1" onload="this.rel='stylesheet'">
<!-- Custom fonts for this template -->
<link rel="preload" as="style" href="/vendor/font-awesome/css/font-awesome.min.css?v1" type="text/css" onload="this.rel='stylesheet'">
<!-- Custom styles for this template -->
<link rel="preload" as="style" href="/css/clean-blog.css?v1" onload="this.rel='stylesheet'">
<link rel="preload" as="style" href="/css/custom.css?v1" onload="this.rel='stylesheet'" >
Can I use... Support tables for HTML5, CSS3, etc
https://caniuse.com/#feat=link-rel-preload
Chrome と Safari はOKっぽい。
なんかキャッシュのような気もするけど。。。
Firefox がだめなので以下を追加する
<noscript>
<link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css?v1" ">
<link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css?v1" type="text/css" ">
<link rel="stylesheet" href="/css/clean-blog.css?v1" ">
<link rel="stylesheet" href="/css/custom.css?v1" " >
</noscript>
<script>
/*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
!function(t){"use strict";t.loadCSS||(t.loadCSS=function(){});var e=loadCSS.relpreload={};if(e.support=function(){var e;try{e=t.document.createElement("link").relList.supports("preload")}catch(t){e=!1}return function(){return e}}(),e.bindMediaToggle=function(t){function e(){t.media=a}var a=t.media||"all";t.addEventListener?t.addEventListener("load",e):t.attachEvent&&t.attachEvent("onload",e),setTimeout(function(){t.rel="stylesheet",t.media="only x"}),setTimeout(e,3e3)},e.poly=function(){if(!e.support())for(var a=t.document.getElementsByTagName("link"),n=0;n<a.length;n++){var o=a[n];"preload"!==o.rel||"style"!==o.getAttribute("as")||o.getAttribute("data-loadcss")||(o.setAttribute("data-loadcss",!0),e.bindMediaToggle(o))}},!e.support()){e.poly();var a=t.setInterval(e.poly,500);t.addEventListener?t.addEventListener("load",function(){e.poly(),t.clearInterval(a)}):t.attachEvent&&t.attachEvent("onload",function(){e.poly(),t.clearInterval(a)})}"undefined"!=typeof exports?exports.loadCSS=loadCSS:t.loadCSS=loadCSS}("undefined"!=typeof global?global:this);
</script>
Windowsはいつか見てみる。
lighthouse
before
https://note.mersy418.com/reports/note.mersy418.com_2018-07-01_15-31-54.report.html
after
https://note.mersy418.com/reports/note.mersy418.com_2018-07-01_16-03-15.report.html
lighthouse的にはOKぽい。
とはいえCSS読み込まれてない一瞬の対応なんか考えないといけないのか。
何か対応抜けてそうだけど。
おとなしく ServiceWorker に任せたほうが良さそうな気もするし、なら SPA でやったほうがいいようなきも。。。
bootstrap周りはこちらにおかず、、とかもう少し調べる。
rel="preload" によるコンテンツの先読み - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content
Preload を用いたリソースプリローディングの最適化 | blog.jxck.io
https://blog.jxck.io/entries/2016-03-04/preload.html