仮想通貨から投資信託へ移行して「ほったらかし」で資産形成しよう

素人だけどPageSpeed Toolsの提案に対応してサイトを高速化してみた【WordPress】

ごきげんよう、バビです。

前回プラグインのみでサイトの高速化を行って、そこそこの数値までもってこれました。

そうなんです、足らんのです!やっぱりもうちょっと速くしたい!

そこで、「PageSpeed Tools」の「最適化についての提案」をもう少し実行してみたいと思います。

「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」

まだ残ってる最適化案

「Scripts To Footer」でJavaScriptについては解消されましたが、CSSのほうではまだ「次のCSS 配信を最適化してください」が3つ出ています。

一番上は、HTML、CSS、JavaScript を縮小してくれている「Autoptimize」というプラグインのものなので仕方ないです。

2つ目もgoogle関係なのでいいでしょう。

問題は3つ目のこいつです。

このCSSのアドレスをコピーして開いてみると分かりますが、管理画面の「CSS編集」で自分で色々書き込んでるCSSです。

そもそものこの最適化案の意味

そもそも「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」ってどういうことでしょう?

大体のことはPageSpeed Toolsの「CSS の配信を最適化する」に書いてあります。

ページを開いたときに、スクロールしないと見えない部分の読み込みは、スクロールしないで見えてる部分の後でいいですよね?

最初にやる必要がないのに、スクロールしないと見えない部分のJavaScriptやCSSを最初に全部読み込もうとするからページ上部の生成を遅く(レンダリングをブロック)してしまうんです。

なので、「Scripts To Footer」プラグインでJavaScriptの読み込みは後回しにしたのですが、自分で書いたCSSは全部最初に読み込まれるようになってしまっています。

じゃあどうしろと?

このCSSの中には、①「最初に読み込む必要がある部分」②「後で読み込めばいい部分」があるはずです。

なので、これを分けちゃいます。

どれが①でどれが②なのか判別つかないので、②は、関連記事とか記事の見出しとか、もう明らかに最初に読み込まなくてもよさそうなものとすればいいでしょう。

で、①は<head>の中に<style>でこんな感じで記述します。

CSS
<head>
<style>
.blue{color:blue;}
</style>
</head>
参考 「コンテンツのレンダリングをブロックしているJavaScript/CSSを排除する」の対策をしましたtakkaaaaaの日記

②は、後で読み込ませるよう「非同期」にします。

MEMO

普通JavaScriptにしろ何にしろプログラムは記述された順番に実行されていきます。

送信側が1つ目の実行データを送って、受信側がそれを受け取って終わったら「終わったから次ちょーだい」と返信して、2つ目のデータが送られます。これが「同期」です。

ですが、同期だと、2つ目の処理が遅いとき、3つ目4つ目を送るのが遅くなり、全体の処理が遅くなってしまいます。

なので、後回しにしていいものを受信側の準備ができてから送るように、タイミングをずらす通信を「非同期」といいます。

CSSを最適化する方法

CSSを分けてインライン化する

CSSなんかをHTMLドキュメント内に直接記入することを「インライン化」と言います。(私もはじめて知りました。)

まず、CSSの内容全部をコピペして保存しておきます

①「最初に読み込む必要がある部分」と②「後で読み込めばいい部分」にCSSを分けて、①だけをコピーします。

たぶん、CSSを分かりやすくこんな感じで書いている人は多いと思うのですが、このまま<head>内に貼り付けるとコードがぐちゃぐちゃになってしまいます。

なので、①のCSSをMinify(圧縮)します。(Minifyも今日覚えました。)

これには↓このサイトが便利です。
Minify your CSS

左の「Input CSS」にコピーした①のCSSを入れて「Minify」のボタンを押すと、右側に余計なものを削除して圧縮されたCSSができるのでこれをコピーします。

WordPressの管理画面に戻って、headタグ内に

CSS
<style>
コピペした①のコード
</style>

の形で挿入します。

(headタグは、SANGOだと「外観」→「カスタマイズ」→「詳細設定」の「headタグ内にコードを挿入」にあります。)

一応この時点でサイト表示に問題ないか確認してください。

問題がなければ元々のCSS内から①の記述を削除して、もう一度サイトがきちんと表示されるか確認しましょう。

追加CSSから子テーマのCSSへ移す

次の作業でCSSファイルの名称が必要だったので確認しようとしたのですが、サーバーのどこにもそれらしいファイルがありません。

例によってこの作業中に知ったのですが、追加CSSのファイルというのは存在しなくて、データベース上にあるんだそうです。

CSSを書き込むときはなるべくなら子テーマ内のstyle.cssファイルに直接書き込むのがいいみたいです。

というわけで、最初から子テーマにCSSを書いていた方はこの作業は不要です。

追加CSS内の②「後で読み込めばいい部分」をコピーして子テーマの「style.css」内に貼り付けます。

外観」→「テーマの編集」を開きます。

通常はそのまま子テーマの「スタイルシート(style.css)」が開くはずですが、違っていたら右側で子テーマのスタイルシートを選択してください。

ここにコピーしたCSSを貼り付けて「ファイルを更新」を押します。

貼り付け後、サイトがちゃんと表示されるか確認して、大丈夫なら追加CSSの中身をすべて削除してください。

CSS を非同期で読み込む

次に②を非同期で読み込むよう設定します。

今度はこちらのサイト様を参考にさせていただきました。

参考 全ブラウザ対応!preload で CSS を非同期で読み込み高速化FirstLayout

「loadCSS」というのを使って非同期にするらしいですね。

なんかそういう便利なのがあるんでしょう。

Googleの「CSS の配信を最適化する」の解説の中にも書いてありました。

なんとなくしか分かってなくてもやっちゃいます。バビはそういう子です。

FirstLayout様によると、 cssrelpreload.jsOnline JavaScript/CSS/HTML CompressorでMinifyしてから以下に貼り付けてから使用するとあります。

(FirstLayout様では例としてexmple.cssとしていたので、style.cssに直しています。)

CSS

<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>
<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
ここに縮小したcssrelpreload.jsを貼り付ける
</script>

こんな感じになりました。

CSS
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>
<script>
/*! loadCSS. [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(a){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>

これをheadタグ内に貼り付ければ完了です。

作業後の速度はいかに

  • モバイル:76→75
  • パソコン:77→76

遅くなってるーーー!!!

「次のCSS 配信を最適化してください」の中から例のCSSは消えましたが、時間帯の問題なんかもあるかもしれませんが、大して変化がありませんでした。
<

でもまあ、「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という目的は果たせましたから、ね、良しとしましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です