CSSのインライン化
Autoptimize 
これでやりたい事はズバリ「CSS を html 内に書き出す」事です😁
スタイルは全て読み終えるまでページの描写が始まりませんけど、html 内に書き出す事によって、描写しながら同時にスタイルを読めるようになります🙂💡
.css が直接 html 内に書き出されるのですけど、これの速度上昇効果は高いです😳
まずは一番上のスクリプトの設定から 
本題の CSS じゃないですが、現状はこれでいいと思います😊
次は CSS の設定です😄 
設定はこんな感じです😀説明します
- CSS コードを最適化
- スタイルシートのインデント(改行やスペース)を取り払います🙂チェック
- Aggregate CSS-files?
- チェックでいいと思います🙂
- インラインの CSS を連結
- 解りにくいんですけど、「最初から html に書いてあったスタイルは外部のファイルに纏めます」って設定です😅
チェックします💡 - データを生成 : 画像を URI 化
- 画像を文字コードで表す事で小さな画像はリクエストを増やさず読み込めますけど、大きな画像だと重さが3割増しになる特性上、向きません🙂
※読み込み速度はあまり変わらなくてもこれにチェックを入れると急激に評価が高くなる場合があります - CSS のインライン化と遅延
- 一部の CSS のみインライン化します💡
インライン化するものは、「クリティカル CSS」と呼ばれる部分で、ページにアクセスして最初に表示される部分だけの CSS です
Critical Path CSS Generator
このサイトに自サイトのアドレスと、CSS を丸々コピペして貼り付け、「Create Critical Path CSS」をタップするとクリティカル CSS を抽出してくれます😀
抽出されたクリティカル CSS をコピペして、プラグインのフォームに貼り付けます😊これで保存 - すべての CSS をインライン化
- 上の設定よりも、こちらにチェックを入れた方がいい気がします
こちらの方が確実にレンダリングをブロックしません - HTML コードを最適化
- チェックを入れてください🙂
その他オプションの設定です🙂 
- 連結されたスクリプト / CSS を静的ファイルとして保存
- チェックを入れます💡
- Minify excluded CSS and JS files?
- 同じくチェック💡
- ログイン中のユーザーも最適化しますか ?
- 一番下にある項目なのですけど、これのチェックは外します
最適化されるとキャッシュが効くので、サイトを弄った時すぐに変わってくれず困るのと、元のソースを見たりコピペしたいからです😉
最適化された状態を確認したければログアウトすればいいだけです😊
最後に、設定の「追加」タブへ 
- Google Fonts
- 使う方には、後ほどもっと効果的な方法を説明しますので、どちらにせよ「そのままにする」をチェックして下さい🙂
- 絵文字を削除
- 前ページでも触れましたが、私と同じ様に WP Fastest Cache の方でチェックしていない方は、ここでチェックして下さい(こちらがオススメ)😄
- 静的リソースからクエリー文字列を削除
- もともと量は多くなく、あまり効果はありませんが、チェック😊
置き換えは動的生成の時にやっているだけなので、実際に何かの静的なファイルが書き換えられるワケじゃありませんから、安心してゴチャゴチャと書き出して貰ってください😉
ゴチャゴチャだけどページの読み込みは速くなりますよっ✨
ログインしている時の、元のソースを見たい時は、
このアプリが断然おススメです😀
120円なんですけど、ソースを気軽に見る手段の無いモバイルの Safari に、ソースを見る機能を足してくれます😳❗
インストール後、Safari の右上の共有ボタン(ブックマーク追加とか出来る所)から、最右の「その他」を選択、アクティビティ一覧から「View Source」をオンにします
それからソースを見たいページで再び共有ボタンを押すと、View Source があるので、タップするとソースが出ます😀
アプリ本体に直接アドレスを打ち込んでも、そのサイトのソースは表示出来ますけど、その場合はクッキーの情報が無い＝ログインしていない状態でしか見れませんので、Safari で開いている扱いにするために、Safari の拡張機能にしておきます💡
Safari の履歴を削除でログアウト💡
尚、このアプリで見たソースは、省略可能な閉じタグが、実際は省略してあるのに追加されています💡
私も Google が省略して欲しいと言ってるタグを省略していますが、アプリでソースを見ると閉じタグがあります😅最初、実際に吐き出されているのかと思って悩みましたが、実際はちゃんと省略されています
JS の非同期、jQuery の CDN 化
JavaScript も CSS みたいに画面を描写しながらリアルタイムで処理して欲しいのですけど、jquery.js は何が何でも真っ先に読み込みを終えないとゴキゲンを損ねるウィジェットとかがあるので、これ以外を非同期で読み込み、さらに jquery.js は公開している Google から拝借してサーバー負担を減らします😚
jquery.js は様々な JavaScript の記述を「カンタンに書いてもウチで解釈してあげるよ」というライブラリです🙂
つまり、これは(バージョンの違いはあれど)みんな同じものを使ってて、自分のサイトで持つ必要は無いので、「このサーバーに置いてあるやつ使っていいよ」と公開してくれている Google から、リンクして自分のページに呼び出します😉
これが◯◯を CDN にするって事になります😳愛だね、愛、そんな感じ
参考にしたサイト ：
【PageSpeed Insights】レンダリングをブロックしている JavaScript/CSS を排除したら99点になったので方法をご紹介 – ウェブ企画ラボ
【2016秋】WordPress jQuery をCDN（外部Jquery）に入れ変える方法
参考にして以下の２つを function.php に追加しました💡
「asycの対象外」の列はいくらでも追加出来るので、動かないプラグインがあったらプラグインの js を追加してください😄
例として Easy FancyBox を使用している際に除外する js を追加してありますが、使っていない方は削除して下さい💡
3.4.1 という数字が二箇所ありますけど、今は WordPress で呼び出していた jquery.js のファイル名にバージョンがありませんし、その時の最新を呼び出せば問題無いかと思われます😊
jquery.js じゃなくて jquery.min.js ってなってるのは、同じ内容だけど min のほうが軽いからです😉
jquery.js は開発者が見やすいように、インデントに気を使って書かれたままのもので、jquery.min.js は先程の CSS のように、インデントを取っ払って、ギッシリ書かれたものです🙂
WordPress は min を呼び出してない❓ので、一旦 jquery.js を呼び出すのを止めさせてから、Google から jquery.min.js を呼び出しています😊
以上でページの表示速度に関してはほぼほぼベストを尽くしました😀💦
ここまでの全てをやったら、爆速レベルになってます😅
最後は googleフォントを、ページ速度を落とさずに読み込む方法です😄
それと、少しだけモバイルでも見やすいサイトの作り方について触れます😌
