GoogleのPageSpeed Insightの速度改善をしてみました。
私はさくらのレンタルサーバーを使っています。
サーバー評価としては、悪くないのですが格段早いという評価でもありません。
サーバー変更が真っ先にスピード改善で思い浮かぶこととはいえ、他を試してからしようかなと。
理由として、費用対効果が出るレベルを目指して少ない手でできるだけ改善ということを目指してみようと考えるからです。
見た目よりコンテンツ、見た目より中身みたいな発想で最近ページが評価されるという理解。
ただ、早いだけのブログでももちろん意味はないです。
でも、速度はそこそこ大切です。
改善方法をまとめてみます。
*ブログ改善
スピードの測り方と現状
サイトのスピードの測り方
サイトのスピードの測り方はこちらにアクセスしてください。
自分のサイトのURLを入力して、「分析」をクリックしましょう。
ちょっと待ちますが、すぐに出てきます。
ちなみに、他の人のサイトのスピードを測ることもできます。
ライバルと思っている方のスピードに追いつくように努力することも一つです。
スピードだけでなく、どこが悪いかも分析結果で出てきます。
悪いところも今回必要最低限対処するつもりです。
現状のスピードはPC＝62、モバイル＝16
現状のスピードは、こちら。
パソコンは普通。モバイル用が特に激オソですね。
パソコン・モバイルともにまずは80点くらいにしたいです。
特にモバイルが課題ですね。
パソコンのスピード
モバイルのスピード
さんたんたる結果ですね。
変更その１：自分の紹介画像PNGをJPGEに変更｜次世代フォーマットでの画像の配信
悪いと指摘を受けた一つに、「次世代フォーマットでの画像の配信」があります。
簡単そうなのでここからしてみました。
プロフィール画像がPNG形式で次世代フォーマットでないという指摘。
(どの画像がだめかはちゃんとGoogleさんが教えてくれます)
具体的にはPNG形式の自己紹介画像がだめだそうです。
というわけでJPEGに変えて置き換えておきました。
90点以上はだいぶ遠いですね。
抜本的に変えるなら、テーマとサーバーが対象でしょうか。
ということで、次はテーマを変更してみます。
変更その２：読み込みスピードが速い2種類のテーマの検討
今までのテーマはSimplicityです。
ここからの代替で、読み込みスピードと使いやすさを考えてテーマを2つおすすめします。
1つ目：Cocoon(コクーン)
1つ目は、Cocoonです。
Simplicityと同じわいひらさんが作っています。
使いやすく無料のテーマです。
説明を読んでもらうと、カエレバの代替もできれば、吹き出し機能もあります。
Simplicityを使っていた方はそのまま移行してもそれほど大きな変化がなく使いやすいです。
ダウンロードはこちらから
後述するLuxeritasと比較して、アフィリエイトが簡単に作れる点が良いです。
カエレバやヨメレバが使いにくくなっているので、簡単に作れるのはとてもいい。
2つ目：Luxeritas(ルクセリタス)
もう一つ紹介するのはLuxeritas
Luxeritas(ルクセリタス)も、使いやすく速い無料のテーマです。
ダウンロードはこちらからできます。
親テーマに合わせて子テーマもインストールしておきましょう。
テーマのダウンロードとインストール
テーマのダウンロードインストール方法を念のため説明しておきます。
まずはテーマZIPファイルをダウンロードをしましょう。
ダウンロードしたら適当なところに保存します。
次にアップロード。
「外観」＞「テーマ」を選択します。
テーマの「新規追加」を選択。
「テーマのアップロード」をクリックします。
ダウンロードしたファイルを選んで、アップロードしましょう。
アップロード完了したら、「今すぐインストール」をクリックです。
最後に「有効化」しておきます。
これでテーマの更新が完了です。
今回はLuxeritasを選択
今回はスピード重視です。両方を入れてスピードを比較しました。
Cocoonの使用でのスピードはPC72点、モバイル35点
PCは結構あがったのですが、モバイルはそれほど上げられませんでした。
LuxeritasのスピードはPC71点、モバイル69点
人によって変更のスピードは違うので、試してみよう
人によって変更後のスピードは変わるでしょうから、試してみてから決めてください。
サーバー変更ではなくテーマ変更をしたのは、サーバー変更よりも手軽だからです。
特に契約もないですし、嫌になったらまた変えればいい。
強いこだわりがなければ、ちょっと変えてみても面白いです。
内容に行き詰まったときの脇道としてどうぞ。
Simplicityを使っていた人は、LuxeritasよりもCocoonの方が使いやすそう
私の場合はLuxeritasの方が単純にスピードがあがりました。
だから今回はLuxeritasを使います。
ただ、Simplicityの後継ということでCocoonの方が本当は慣れやすそうです。
Luxeritasだと設定していたフッターが空になりました。
また、アフィリエイトの作りやすさはCocoonの方がいいかもしれません。
周りにLuxeritasテーマ使いっぽい人がいないのでLuxeritas
今回は、まずスピードを上げることが目的なのでLuxeritasにしました。
もう一つの理由は、私の周りのブログされている方が使用していなさそうだったのも理由です。
勝手な道を進んでみようかなという考えです。
ちなみに、吹き出しもショートコードから設定できます。
Luxeritasのテーマにおける裏側設定
変更したら、ページは真っ白けっけ。
ここから設定と考えるとちょっと面倒な気はしますが、少しずつ進めてみます。
All in One SEO Packをやめる
All in One SEO PackをLuxeritasは推奨していません。
重いからというのが理由です。
今回の改修の目標はブログ読み込みのスピードアップ。
だからAll in One SEO Packをオフにします。
ちなみに、All in One SEO Packでしていたことは次の3つ。
ちゃんと対処もしておきます（後述）。
- XMLサイトマップの送信
- Twitterカードの設定
- アクセス解析
XMLサイトマップの送信｜Google XML Sitemaps
All in One SEO Packで行っていXMLサイトマップを変更します。
今回使うのは、Google XML Sitemapsです。
「Google XML Sitemaps」でプラグイン検索しましょう。
こちらが出てくるのでインストールです。
インストールが終わったら有効化しておきましょう。
インストールすると「XML Sitemaps」と出てきますので、そちらで設定していきましょう。
デフォルトから設定変更した箇所として、「投稿の優先順位」を「優先順位を自動的に計算しない」にしてます。
また、Sitemapコンテンツは、デフォルとから「固定ページを含める」のチェックを外し、「カテゴリーページを含める」にチェックを入れています。
細かく設定を考えない場合は、これくらいで十分です。
合わせてSearch Consoleも設定します。
まずはログインしましょう。
ログインしたら「サイトマップ」をクリックします。
XML-Sitemapの上部にサイトマップのURLが載っています。
「XX/sitemap.xml」の形でしょう。
チェックしたサイトマップURLをSearch Consoleの新しいサイトマップの追加に入力して、送信しましょう。
↓
これで設定完了です。
Twitterカードの設定
facebookやTwitterカードの基本機能でできています。
これらは、OGP(Open Graph Protcol)設定が必要で、OGPを設定しておくとカード形式でよく見る形式になります。
「Luxeritas」＞「カスタマイズ」をクリック。
項目タグが出てきますので、「OGP」を選択します。
「Twitterカードの設定」がありますので、「Tiwtterカードを追加」にチェックを入れておきましょう。
「サマリー(summary)」か「サマリー(summary_large_image)」があります。
投稿した写真を大きくしたい場合は後者です。
今回は、単なるサマリー(summary)にしてあります。
そして、Twitter IDも入れておきます。
最後にJetpackと競合しないようにJetpackのOGPを無効化しておきます。
ちなみに無効化し忘れても、上部にアラートが出ますので、気づけます。
それとOGP設定がない場合のデフォルトがネコの絵になっています。
ここは適当な画像に差し替えておきましょう。
私の場合、設定がないことはあまりないのですが、とりあえずプロフィール画像にしておきました。
その他
- Luxeritasの設定で「タイトル」で｜区切りを-に変更しました。
All in One SEO Packをオフにして計測
All in One SEO Packをこれでオフにして、計測してみます。
計測後のスピードはPC71点→79点、モバイル69点→78点
ようやく80点台が見えてきました。
ちなみに、Luxeritas「高速化一括設定」＞「推奨設定」にした場合、パソコンが71・モバイルが73に下がったのでやめました。
Luxeritasのテーマにおける表側設定
フッターの設定
Simplicity→Cocoonはほとんど設定崩れずに設定が不要でした。
ただ、今回はLuxeritasを使うので、ここも初期から設定。
といっても、同じような設定ですね。
「外観」＞「ウィジェット」から、必要なものを追加していきましょう。
気になったら色とか変えましょう
色は好みのものに。
白を基調すると読みやすいです。
気が向いたらテーマカラーを少々追加してみましょう。
色を参考にしたい人はこちらを使ってみてください。
WEBカラーデータ取得
今後の課題は「サーバー応答時間の短縮（TTFB）」
ここはサーバーを変えないといけないのかなと迷い中です。
さくらのレンタルサーバーで始めたので、なんとなくの愛着があるので、その他の対策でなにかいけるなら、サーバーはこのままいきたいなと。
打てる施策を調べて試してみるつもりです。
サーバー変更は施策がうまくいかなかったときの手段にしてみます。
【編集後記】
AdsenseやAnalyticsの追加まで書けませんでした。
復習がてらですが、次にまとめてみます。
【運動記録】
ジョギングO ストレッチO 筋トレO サプリO
【昨日のはじめて】
Luxeritas
【昨日の子育日記】
気候が変わってきて、寝やすいみたいです。
いつも起きる時間もす～す～寝てました。
朝、まったり起こしてみました。
まどろみつつ起きられるように工夫してみてます。