Wordpressの記事内の画像読み込みを遅延化したい。
少し調べてみたところ、以下の記事が参考になった。
方法はいくつかあるようなので…少し吟味が必要である。
wordpressにおけるレスポンシブイメージに対するlazyload対策 - Coding Memos
aFarkas/wp-lazysizes: Brings lazySizes.js to WordPress
Conoha VPS上のCentOS 7へWordPressを導入する機会があったのでメモ。
用意されているテンプレートを活用できれば手軽で早そうである。
最近、Subversionを採用しているプロジェクトに携わっている。
今までGit しか使ったことがないにわかなので、とりあえずGit との文化や考え方の違いを色々感じている。
今のところは、ちょっと難儀じゃのう…という印象である。
GithuPagesを作成する際に、Mozillaが開発しているoghlinerを利用してみた。
まずはモジュールをインストール。
1$ npm install oghliner -g
もしくはプロジェクトごとにインストールも可。
1$ oghliner bootstrap
実行するとconfigurationを聞かれる。
後からでも変更できるのでとりあえず初期値で実行。
これにより、さくっとオフライン対応のGithubPageを作成できる。
類似ツールと比較して、利点などを確認していきたい。
Firfox の開発版で css font-display がフラグ付きで有効になったようなので試してみた。
まずはフラグを有効にする。
FIrefox のアドレス欄へabout:configと入力し、設定画面を開く。
そこでlayout.css.font-display.enabledを検索し、値をtrueへ。これで機能が有効となる。
Chrome の開発版ではすでに導入されているらしく、下記記事が非常に参考になった。
やはりFOUTをネイティブの機能で解決することが期待されるよう。
今までは主に Web Font Loader を導入したり、 あと Adobe Blank なんてのもあった気が…。
とにかく涙ぐむしい努力をしてきたので人類にとって、これは待望の機能かなと。
現時点での実装はスペックの推奨通りでクロームと同様のよう。
設定値はfallbackがベストで、妥協してblockといった感じだろうか。パフォーマンスとユーザビリティの両方にバランスよく配慮できそうである。
1@font-face { 2 font-family: 'Waiting for the Sunrise'; font-style: normal; font-weight: 400; font-display: fallback; src: local('Waiting for the Sunrise'), local('WaitingfortheSunrise'), url('../fonts/waiting-for-the-sunrise-v7-latin-regular.woff2') format('woff2'), url('../fonts/waiting-for-the-sunrise-v7-latin-regular.woff') format('woff'), url('../fonts/waiting-for-the-sunrise-v7-latin-regular.ttf') format('truetype');}
その他の値も少しの違いながら明確に用途がわかれそうなので、なかなかよくできている感じ。
will-changeのように必要そうな部分へは先行導入しておき、ブラウザの対応を待ってもいいかと。