そんな悩みが解決できる記事を書きました。

本記事では、WordPressブログにおけるWebP対応手順を中心に解説します。

意外と簡単にできますので、サイト速度を改善したい方はこの記事を参考にやってみて下さいね。

WebPの対応手順だけ知りたい方は、2章からご覧くださいね。
さっそく解説していきます。

Webとは？

WebP（ウェッピー）とは、Googleが開発した次世代の画像フォーマットのこと。

ファイルの拡張子は、「.webp」となります。

WebPの特徴：ファイルサイズの軽量化が図れること

WebPの最大の特徴は、ファイルサイズの軽量化が図れること。

軽量化によりサイトの表示速度を改善できれば、もちろんSEO対策にも繋がります。

ファイルサイズはどれくらい圧縮されるの？

JPEGファイルと比較して25~34%、PNGと比較して28%小さくなると言われています。

▼実際にJPEGとWebPの比較をしてみましたのでご覧ください。

画像の劣化はまったく分からないにも関わらず、ファイルサイズは80%程度も小さくなっています。

ウェッピーってすごいんだね！

WebPのデメリット：一部のブラウザで非対応

実はWebPには、IEなど一部非対応のブラウザがあります。

これがWebP導入を躊躇してしまう要因だったりします。

それじゃ導入はやめておこうかな…

いえいえ、これから紹介する方法であれば、WebP対応ブラウザならWebP、非対応ならこれまで同様JPGやPNGというような出し分けができますので、ぜひ参考にしてみてください。

さっそく次章より紹介していきます。

WordPressでのWebP対応手順３ステップ解説

WordPressブログであれば、「EWWW Image Optimizer」というプラグインを使えば、意外と簡単にWebP変換を導入できます。

さっそく手順を紹介していきます。

1. EWWW Image OptimizerのWebP変換設定
2. .htaccessを編集
3. 一括最適化

順に説明します。

EWWW Image OptimizerにてWebP変換設定

EWWW Image OptimizerにてWeb変換設定をしていきます。

まずは、EWWW Image Optimizerをインストールしましょう。

▼1.WordPress管理画面の「プラグイン」→「新規追加」より、EWWW Image Optimizerをインストール後、有効にします。

上図はすでにインストール＆有効にしていますが、はじめは「今すぐインストール」になっているはずです。

▼2.EWWW Image Optimizerの設定画面を開いたら、「WebP」というタブを開きます。
そこの「WebP変換」という項目にチェックを入れます。

最後に、変更を保存をクリックして保存ください。

▼3.すると、下図のような怪しげなコードが表示されると思います。それを丸ごとコピーしましょう！

これは、次の.htaccessファイルの編集の際に使用します。怪しいものではないのでご安心を。

【補足】EWWW Image Optimizerそのほかの設定

EWWW Image Optimizerは優秀な画像最適化プラグイン。せっかくなので、そのほかの設定も確認しておきましょう。

と言っても基本的に確認するのは以下の2点くらいです。

①▼基本タブの「メタデータを削除」にチェックを入れる。

②▼変換タブの「変換リンクを非表示」にチェックを入れる。

2つともデフォルトでチェックが入っていたかもしれませんが念のため。

他の項目はデフォルトのままで大丈夫です。

画像遅延読み込みの設定もありますが、そちらは後で紹介します。

.htaccessを編集

次に、サーバーの設定を変更する「.htaccess」ファイルを編集します。

▼1.まずはConoHa WINGにログイン後、「サイト管理」→「サイト設定」→「.htaccess設定」をクリック。

▼エックスサーバーであれば、サーバーパネルにログイン後、「.htaccess」をクリック。

▼.htaccess設定の右側の鉛筆マークを押せば編集できますので、先ほどコピーしたものを貼り付けましょう。
先頭に貼り付けておけばOKかと（元々コードがある場合は、間に追加したりしないように！）。

これで、WebP対応ブラウザならWebP、非対応ならこれまで同様jpgやpngというような出し分けができるようになります。

▼この時点でEWWW Image Optimizerの画面で「PNG」と表示されていたのが、緑色で「WebP」に変わっているはずなので確認してみてください（下図の右下）。

確認できたら、次に進みましょう。
（確認できなければ、設定を間違えた可能性がありますので見直してみてください。）

一括最適化

EWWW Image Optimizerの一括最適化機能を使って、既にサイト内にある画像ファイルをWebP化していきましょう。

▼1.WordPressの管理画面より、「メディア」→「一括最適化」をクリック。

▼2.「最適化されていない画像をスキャンする」を押せば最適化できますが、圧縮は他のプラグインなどで実施済みだよって方は、「WebPのみ」にチェックをいれてから実行してもいいでしょう。

僕はチェックを入れて実行しました。

▼3.最後に、下図の最適化のボタンをクリックします。

▼4.最適化が始まります。完了するまでしばらく待ちましょう。

僕は1時間くらいかかりましたね。

完了すれば以上で終了です。

WebP変換確認

実際にWebP化できているか確認してみましょう。

自分のサイトに行って、F12を押して検証ツールを開きます。

▼Networkタブに行って、「Img」を選択。「Disable cache」にもチェックを入れておくと、キャッシュの読み込みを無効化してくれるので、こちらにもチェックを入れておきましょう。

Typeの欄に「webp」と表示されていればWebPに変換できています！

また、IEで開くとJPGやPNGのままちゃんと表示されているので確認してみてくださいね。

EWWW Image Optimizerなら画像遅延読み込みにも対応可能

▼EWWW Image Optimizerの設定で下図の赤枠にチェックを入れれば、画像遅延読み込みも対応可能です。

上記の設定を行えば、

• A3 Lazy Load
• Autoptimizeの画像遅延設定

などは不要になります。

僕はチェックを入れて、Autoptimizeの画像遅延設定を解除しましたが、このあたりのプラグインの良し悪しは検証しておりませんので、お好みでお願いします。

Compress JPEG & PNG imagesプラグインを導入している方へ

同じ画像圧縮プラグインとして有名な「Compress JPEG & PNG images」を使用している方も多いのではないでしょうか。

しかし、WebPにしたほうが圧縮率が高いですよね～。

なので今後はEWWW Image Optimizerを使っていこうと思います。（パンダ君ごめんなさいね。）

WebP対応手順３ステップ解説 まとめ

いかがでしたでしょうか。意外と簡単にできたのではないでしょうか。

僕のサイトはPageSpeedInsightsのスコア自体はあまり変わりませんでしたが、人によっては大きく改善されるかもしれませんね。

WebP対応でスコアが大きく改善されたよって方は、Twitter（@KoaraCom）までご連絡いただけると助かります。

当サイトではPageSpeedInsightsの項目を基準に、あなたのサイト速度を改善できる施策を多数用意しております。

その他にも簡単に取り組める施策がありますので、サイトが重くて気になる方はトライしてみてください。
>>サイト速度を改善する施策一覧を見てみる。

あらら、いきなり落とし穴にはまるつもりですか？

アフィリエイトでしっかり稼ぎたいなら、サーバー選びはとっても重要ですよ。

そうなの？？

ではおすすめのレンタルサーバーを教えてください！

上記について、徹底解説していきます。

結論から言うと、その「おすすめレンタルサーバー」とは、

• ConoHa WING
• mixhost
• エックスサーバー

の3つでして、中でも僕のおすすめは、「ConoHa WING」ですね。

アフィリエイトを本格的に始めたい方は、この記事を読めば間違いのないレンタルサーバーを選ぶことができますのでぜひ参考にしてみてください。

執筆者情報

組込み、アプリ開発エンジニア（9年）のコアラ（@koaraCom）です。

開発にはサーバーを使うこともありますので、信頼性のある情報をお届けできます。

さっそく解説していきます。

レンタルサーバーの選び方5つのポイント

まずはレンタルサーバーの選び方から。
ポイントはこの5つ。

1. ディスク容量は十分か
2. 転送量は十分か
3. 表示速度は十分か
4. WordPress簡単インストールに対応しているか
5. サポート体制は整っているか

順に詳しく説明していきますね。

ディスク容量は十分か

サーバーも僕たちの持つPCと同じく、HDDやSSDなどのディスクにファイルを保存していきます。

このディスク容量が十分にないと、サイトが重くなったり、データが保存できなくなることも。

保存容量が十分にあるサーバーを選ぶことが大切。

ディスク容量の目安

目安としては、個人ブロガーだと最低10GB以上、余裕を持つなら100GB以上。

100GB以上もあれば、数千記事書いてもまず困ることはなくなります。

転送量は十分か

転送量とは、サーバーから送られるファイルのデータ量のこと。

この転送量が確保されていないと、たくさんの読者があなたのサイトに訪れた場合、ページを構成するファイルのデータ量も増加。

転送量の限界値を超えると…

サーバーはサービスを停止！

読者はあなたのサイトを閲覧できなくなるでしょう。

503エラーは多大な機会損失！

サービスを停止したサイトに訪れた際、「503 Service Unavailable」という画面が表示されることになります。

この瞬間、あなたは多大な機会損失を被ります。

なぜなら、このエラーが出ている時点で大量の訪問者を失っていることになるからですね。

転送量が十分に確保されたサーバーを選びましょう。

転送量の目安

目安としては、1日で表すと30GB/日以上（月換算で1.0TB/月）もあれば間違いないでしょう。

10,000PVとなると、アフィリエイト初心者が到達するにはかなりの期間を要しますからね。

表示速度は十分か

Webサイトの運営において、読者にあなたのコンテンツを素早く表示してあげることは重要です。

仮にWebサイトの表示速度が1秒遅れると、

• PV（ページビュー）が11%下がる
• CV（コンバージョン）が7%下がる
• 顧客満足度が16%下がる

と言われています。

読者にとってストレスを与えず、かつGoogleの検索エンジンにも高評価を受けたいなら、高速表示に優れたパフォーマンスの高いサーバーを選んでおくに越したことはないです。

表示速度は何によって決まるのか？

表示速度に影響するのは、下記のとおり様々な要因が考えられます。

• サーバーのスペック
  （CPU、メモリ、サーバーソフトなど）
• レンタルサーバー会社独自の施策
• 回線速度

などなど。

上記のように複雑に要因が絡み合うため、一概にこの指標を参照すればOKとはなかなか言いづらいですね。

今回は、公式HPでも表示速度が速いと謳っている3つのサーバーを選びました。

WordPress簡単インストールに対応

ワードプレスを簡単にインストールできて、ブログを書く準備をサッと整えることができるサーバーがおすすめ。

FTPで…ですか？

はい、これを聞いてよくわからない方は、わざわざやる必要はないかと。

ブログをはじめた当初は、プラグインの設定やデザインの設定も少しは整えたりする時間が欲しいですからね。

今回おすすめするサーバーはどれも、ワードプレスを簡単にインストールできる機能が備わっていますのでご安心を。

サポート体制は整っているか

サーバーは稀に予期せぬトラブルを起こすことも。

何かトラブルがあった際、メールやチャットだけでなく電話対応もあれば安心ですね。

そのほかサポート体制とは、

• メールやチャット対応のみ
• 電話対応可
• 自動バックアップ機能はあるか

上記のようなものですね。
トラブルに見舞われることを想定すると、手厚いサポートに越したことはないですよ。

ではここで一旦、レンタルサーバーの選び方を整理しておきます。

1. ディスク容量
   最低10GB以上、余裕を持つなら100GB以上。
2. 転送量
   目安は、30GB/日以上（1.0TB/月）
3. 表示速度
   （ここはひとつの指標で判断できない）
4. WordPress簡単インストールに対応しているか
5. サポート体制
   電話対応可能か。自動バックアップ機能はあるか。

いちいち覚えてらんない！という方は価格で選ぶべし！

はい、ここまでの内容についてていねいに説明してきましたが、正直よく分からなかったという方！

そんな方は「価格帯」で選んでしまってもOKです！

年間契約で月額1,000円前後のものを選べば、まず間違い無いレンタルサーバーが手に入ります。

結局、価格帯とサーバーのスペックやサービスは比例するということ。

アフィリエイトにおすすめのレンタルサーバー厳選3選

それでは、僕がアフィリエイト初心者におすすめのレンタルサーバーを3つに厳選しましたので紹介します！

1. ConoHa WING
2. mixhost
3. エックスサーバー（Xserver）

結論から言うと、この中でも僕のおすすめは、「ConoHa WING」ですね。

順に特徴を紹介していきます。

ConoHa WING

まずは僕がアフィリエイト初心者に最もおすすめしたいサーバーであるConoHa WINGを紹介します。

ConoHa WINGの特徴

ConoHa WINGは、2018年に販売開始とかなり新しいレンタルサーバー。

機能面は抜群で、後述しますが価格も今回紹介する3製品の中でも最安で提供しています。

圧倒的なスピード

こだわりが見て取れるのは、圧倒的なスピード。

ConoHa WINGはWebサーバーの処理速度において、自社計測ながら、2位と約2倍差をつけての1位という結果に。

高速化の要因としては、下記のとおり。

• ConoHa WING独自にチューニングされたキャッシュ機能
• PHPの実行環境において、従来より20%高速となる「LiteSpeed LSAPI」を採用。

上記については知らなくても大丈夫です。
新しいサーバーらしく、新しい技術を取り入れていると捉えていただければ。

実際、SNSやブログなどでもConoHa WINGに変えると、体感でも速さを感じているユーザーが大半でした。

使いやすさに配慮されたデザイン

ConoHa WINGの管理画面はシンプルで、初心者にとっても分かりやすいデザイン設計がされています。

公式サイトも何気にデザインの良さが目を惹きますね。

たとえば、トップページの雲が横切るデザインや、右上にこっそり用意されているこのはちゃんモードのデザインなどの凝りようも面白いです。

第三者機関による調査で満足度No.1

2020年2月期のおける第三者機関、日本マーケティングリサーチ機構による調査で下記の満足度No.1を獲得しています。

• アフィリエイター&ブロガーが使いたいレンタルサーバー
• WordPress利用者
• サポートデスク対応

スペック

選び方5つのポイントでお伝えした全項目を満足しています。

金額面も今回紹介するレンタルサーバーの中で年間契約で月額900円と最安。

サポート体制も抜群です。

ConoHa WINGのデメリット

高機能なのに今回提案の3つの中で最安ときたら、もはや何をケチつけようかというレベル…

僕の記憶が正しければ、ConoHa WINGの販売当初は、年間契約で1,200円くらいしていたんですよね。

それがいつの間にやら、こんな反則的な安さになっているとは驚きです。

【総評】これから始めるならConoHa WINGで

アフィリエイターだけでなく、これからブログを始めたという人にもConoHa WINGは断然おすすめ。

ConoHa WINGのレンタルサーバーは2018年9月に提供開始というかなり新しいサービス。

IT・Web業界の技術は日々進歩していくもの。

新技術を取り入れながら高機能かつ安いとくれば、ConoHa WING一択といってもいいくらい。

すでに別サーバーで運用している人も、ConoHa WINGに乗り換える価値は十分にありますね。

ConoHa WINGにはWordPressかんたん移行というサービス（6,980円）もあり、これを使うのも良いでしょう。

高機能かつ安いと驚愕のコストパフォーマンスを兼ね備えたConoHa WINGなら、読者の取りこぼしを防げますよ。

人気テーマ3つが使える！

さらに、ConoHa WINGは下記の人気テーマ3つを割引価格で提供！

• JIN
  13,455円➡12,955円
• Cocoon
  元々無料
• SANGO
  10,000円➡9,000円

上記のテーマは、管理画面からかんたんにインストールして利用できるようになっています。

これらの人気テーマで始めようとしている方なら、さらにお得に利用できますよ。

＼月額800円~の最強コスパ／

ConoHa WING公式サイトはこちら

mixhost

次に紹介するのは、mixhost です。

mixhostの特徴

mixhost も高機能サーバーを割安で提供しています。

2016年に販売開始とこちらもわりと新しいレンタルサーバーであり、新技術を次々に採用中。

そのひとつが、国内初のサーバーソフト「Litespeed」を採用していること。

主流のサーバーソフト

サーバーにはサーバー機能を構成するためのソフトウェアが必要でして、主流はこの3つ。

1. LiteSpeed
2. NGINX
3. Apache

となり、処理速度は番号の若い順に速いと言われています。

第三者機関による調査で満足度No.1

2019年7月期のおける第三者機関、日本マーケティングリサーチ機構による調査で下記の満足度No.1を獲得しています。

• アクセス処理速度
• 表示スピード
• アフィリエイター&ブロガーが使いたいレンタルサーバー

スペック

機能面は全く問題なし。

価格帯もConoHa WINGには若干劣る程度。

唯一、電話サポートがない点については注意したいポイントですね。

デメリット

mixhostも優秀なサーバーで強いてデメリットを挙げるならば、

• 電話サポートがない
• 管理画面の操作は慣れが必要

といったところですね。

電話サポートが受けられないのは少々不安ですが、メールやチャットによる対応はもちろんあります。

また、mixhostの管理画面は「cPanel」という海外製のものを使用していること。

【総評】レンタルサーバーの設定に慣れている人におすすめ

mixhostも驚くほど高機能かつ割安です。

新技術も続々と採用しており、まさに「攻めのサーバー」。

その代わり、デメリットに書いたとおりサポート面を犠牲にしている感は無きにしもあらず。

とはいえ、すでにブログを何度か開設していたり、レンタルサーバーの設定に慣れている人にとっては、スペック重視のmixhostを選ぶ価値は十分あります。

＼ハイスペックサーバーならこれ！／

mixhost公式サイトはこちら

エックスサーバー（Xserver）

最後に紹介するのは、エックスサーバーです。

「安定性」と言えば、エックスサーバーの右に出るものはないですね。

エックスサーバーの特徴

エックスサーバーは、今回の3製品の中では一番古くからレンタルサーバーを提供しており、シェア率No.1を誇るまさに老舗のレンタルサーバー。

これまでの稼働率も99.9%。

エックスサーバーなら、サーバーがダウンして悩むことはまずないでしょう。

スペック

こちらもアフィリエイト初心者にとっては十分なスペック。

ディスク容量が前述の2製品より50GB少ないですが、動画をガンガン保存しない限りは問題ないです。

エックスサーバーのデメリット

こちらも強いて言うならば、下記の通り。

• バックアップ復元は一部有料
• 運用コストでは後発組に劣る

どちらも金額面においてですね。

特にバックアップ復元費用。
2020年7月現在の復元費用はこちら。

• サーバー領域（Web・メールデータ）：5,000円（税抜）
• データベース：無料

※いずれも過去14日分まで復元可能

先ほどの2製品に引っ張られる形で当初より安くなりましたが、サーバー領域に関しては未だ5,000円かかります。

あとは、初期費用3,000円がかかることと、月額費用も先ほどの2製品と比べて割高。
といっても、100円程度ですね。

【総評】実績重視ならエックスサーバー

多少割高でも、とにかく実績重視ならエックスサーバーですね。

ConoHa WING、mixhostが台頭してきたとはいえ、エックスサーバーが特段劣っているわけでもありません。

サーバーの運用・保守とは？

僕からはエンジニアの目線でお伝えします。

サーバーの運用・保守というのは、本当に大変なことなんですね。

主にどんなことしてるかって言うと、次の通り。

• OSやアプリケーションのアップデート対応
• セキュリティ面の対策（ハッキングや新種のウィルス対策）
• 障害発生時の対応
• 電話・メール対応

前述の2製品ももちろん日々対応されていますよ。

ただ、長期に渡って運用を維持してきたのがエックスサーバーの凄いところ。

これは信頼に値すると捉えても良いと思いますよ。

10日間の無料お試し期間がある

あと、エックスサーバーは10日間の無料お試し期間を設けています。

上記の通り制限があるとはいえ、試すだけなら問題となるような機能でもないですね。

不満点を感じることは早々ないと思いますが、気が変わったらやめることもできますのでお気軽に申し込んでみてください。

＼アフターコロナ応援キャンペーン／
9/3まで初期費用0円！

エックスサーバー公式サイトはこちら

レンタルサーバーのスペック比較表

▼3製品を比較表にまとめました！
※赤文字：高評価、青文字：低評価

ざっくり表現するならこのようになります。

• 高機能＆最安
  ＝＞ ConoHa WING
• 高機能＆最新技術
  ＝＞ mixhost
• 高機能＆安定性
  ＝＞ エックスサーバー

どれを選んでも失敗はしないので、大丈夫です。

とはいえ、もし迷われると言うなら、アフィリエイト初心者には「ConoHa WING」をおすすめします。

高機能かつ最安でユーザーフレンドリーな設計がされている点で、アフィリエイト初心者には申し分ないサーバーですよ。

この記事でレンタルサーバー選びが完了し、アフィリエイトブログを始めることができますと幸いです。

ちょっと待った！

ファイルサイズが大きいままの画像をブログに載せ続けると、ページの読み込み速度がもろに悪化しますよ！

それに、画像を最適化しないと、Googleの検索エンジンにも評価されませんからね。

そうなの？？
では記事に画像を掲載するまでの手順を教えてください！

本記事では、WordPressのブログ記事に画像を掲載するまでの手順を３ステップで解説していきます。

この記事の内容を実践して頂ければ、SEO対策効果も期待できるので、検索順位も上がる可能性がありますよ。

ご存知のかたも、チェックリスト代わりに読んでみてくださいね。
さっそく解説していきます。

画像の最適化とは？

ブロガーさんにとっての画像の最適化とは、リサイズや圧縮などをおこなうことで、画像を適切なファイルサイズでブログに配置することです。

画像の最適化で得られる効果

画像の最適化により、以下の効果が得られます。

1. Webページの読み込み速度が改善される
2. Googleの検索エンジンにも評価される

Webページの読み込み速度が改善される

画像を最適化することで、画像のファイルサイズが縮小します。
その結果、Webページの読み込み速度が改善されます。

Webページを構成する要素のうち、画像のファイルサイズは大きなウェイトを占めますので、読み込み速度が改善される可能性はじゅうぶんありますよ。

Googleの検索エンジンにも評価される

画像を最適化することで、Googleの検索エンジンにも評価されます。

なので、画像の最適化によりSEO対策効果につながり、検索順位も上がる可能性がありますよ。

最適化を行わないとどうなるの？

それはまさに、ブログを始めた当初の僕ですね…

何も知識のなかった僕は、気にせずそのまま画像をブログにアップロード！

すると、サイト全体がみるみるうちに重くなってしまったんですよね…

あなたもこうなる前に、早めに最適化の手順をマスターしておきましょう。

【画像最適化】WordPressに画像を掲載するまでの手順【３ステップ】

画像の最適化を行い、WordPressに画像を掲載するまでの手順は以下の3ステップでできます。

1. リサイズしよう
2. 圧縮しよう
3. alt属性に画像の説明を記載しよう

ステップ１：リサイズしよう

リサイズツールは、今回は僕も使っているBulk Resize Photosを使います。

これを使って、あなたのブログ記事の横幅サイズに合わせてあげれば、一番無駄がないファイルサイズとなるでしょう。

▼僕の場合は、ブログ記事の横幅の最大が728pxなので、画像の横幅も大体それくらいになるようにリサイズします。

ところで、ブログ記事の横幅サイズなんて知らないんですけど？？

Chromeブラウザの検証ツールを使えばかんたんに分かりますよ。

▼Windowsなら、あなたのブログ記事を開いてから、右クリック→検証を選択後、下図の赤枠のアイコンをクリックします。

▼記事のタイトルにでも矢印キーを合わせれば横幅のサイズが分かります。

おお！これは使える！

調べるのが面倒でしたら、大体700～800pxくらいにしておけば、たいていのブログ記事に対応できるかと。

豆知識その１：アイキャッチ画像サイズについて

アイキャッチ画像だけは、少し大きめの1200×630pxがいいようです。

これは、SNSの中でも一番サイズの大きいFacebookに掲載するサイズに合わせるためです。

ちなみに、このサイズをTwitterに適用すると、上下が15pxずつ見切れる計算になります。
頭の片隅にでも覚えておくとよいかも。

豆知識その２：JPGとPNGについて

画像の拡張子でよく見かけるJPGとPNGの違いについて、ご存知ですか？

写真や風景画などは、JPG。

色数の少ないアイコンは、PNGで。

良く分からなければ、JPGにしておきましょう。

ステップ２：圧縮しよう

圧縮は、WordPressのプラグイン「Compress JPEG & PNG images」を使えばかんたんにできます。

一度設定しておくと、あとは自動で圧縮してくれますので導入しておきましょう。

これで圧縮の準備が整いました。

▼あとは、リサイズした画像をいつも通り、WordPressのメディアライブラリにドラッグ＆ドロップしてアップロードします。
※圧縮は、プラグインが自動で行ってくれますのでご安心を！

Gutenbergエディタをお使いなら、投稿編集画面に直接ドラッグ＆ドロップでもいけますね。

画像ファイルサイズの最適化に関しては、リサイズ→圧縮の2ステップで終了です！

元々の画像のファイルサイズと比べると、明らかに軽くなっているはずです。

ステップ３：alt属性に画像の説明を記載しよう

alt属性ってご存知ですか？

alt属性は、画像を掲載する際のコードに付加するもので、グーグルの巡回ロボット君があなたの記事を評価する際に利用します。

実際、意味のない装飾画像であれば記入不要です。

ただ、判断に困りそうなら基本的にalt属性には、画像の説明を必ず記入すると覚えておいても問題ないでしょう。

どこに記入すればいいの？

コードに直接記入する以外の方法だと、2パターンあります。

1つ目が、メディアライブラリから記入するパターン。

▼WordPressの管理画面より、メディアライブラリを開きます。

▼適当な画像を選択すると、下図の画面が出てきますので、そこの「代替テキスト」と言う欄に書き込めばOKです。

2つ目が、投稿編集画面から記入するパターン。

▼Gutenbergなら、挿入した画像をクリックして、画像設定のAltテキストという所に記入すればOK。

メディアライブラリに記入した内容より、こちらで記入した内容のほうが優先されます。

▼これも検証ツールで確認すると、ちゃんと反映されていることが分かります。
（毎回確認する必要はないですからね）

alt属性に記入する内容について

記入する内容は、記事のキーワードの羅列ではなく、画像を説明する自然な言葉や文章がいいでしょう。

【発展】画像を遅延読み込みさせよう

こちらは発展です。

Webページを開いたときに見えない画像を遅延読み込みさせることで、読み込み速度を改善することができます。

▼詳しくはこちらで解説しています。

オフスクリーン画像の遅延読み込みはAutoptimizeで速攻解決

2020年7月30日

【画像最適化】WordPressに画像を掲載するまでの手順を解説 まとめ

画像の取り扱いを身につけておくだけで、Webページの読み込み速度が改善されるだけでなく、Googleにも評価される記事になります。

リサイズなど面倒ではありますが、のちのち困らないように、この記事で覚えたことを実践してみてくださいね。

あなたのサイトは大丈夫？
▼画像を最適化して、自サイトの読み込み速度を改善しましょう。

【最新版】PageSpeedInsightsの使い方と計測結果の見方を解説

2020年8月1日

オフスクリーン画像の遅延読み込みはAutoptimizeで速攻解決

2020年7月30日

【超簡単】Chrome検証ツールでブログデザインを調べる方法

2020年8月1日

そんな要望に応える記事を書きました。

なるほど。
それなら「Bulk Resize Photos」というツールがおすすめですよ。

ブロガーの方なら記事に画像を載せるために、1枚だけじゃなく何枚もリサイズする必要がありますよね。

そんなときにこのツールはとっても便利なんです。

本記事では、「Bulk Resize Photos」の特徴と使い方について解説していきます。

リサイズツールをお探しの方は、本記事を読んでぜひ使ってみてください。

さっそく解説していきます。

画像リサイズツール「Bulk Resize Photos」の使い方

お先に使い方の説明をしてしまいましょう。

Bulk Resize Photosにアクセスします。

リサイズしたい画像をドラッグ＆ドロップ、または「画像を選択します」より、画像を追加します。
複数追加可能です。

以下の中から機能を選択して使用します。
僕がよく使うものには、★マークをつけています。

• 規模 ★
  画像サイズを%指定でリサイズできます。
• ファイルサイズ
  指定したファイルサイズ以下にリサイズできます。
• 正確な寸法 ★
  高さと幅を指定した寸法でリサイズできます。
• 幅
  幅を指定した寸法でリサイズ。高さは幅のリサイズ分に応じてリサイズしてくれます。
• 高さ
  高さを指定した寸法でリサイズ。幅は高さのリサイズ分に応じてリサイズしてくれます。
• 最長の辺
  最長の辺を指定した寸法でリサイズできます。

あとは、「スタートリサイズ」をクリックすれば、PCのダウンロードフォルダにリサイズした画像がダウンロードされます。

画像リサイズツール「Bulk Resize Photos」の特徴

1. まとめてリサイズできる
2. 設定が保存できる
3. 100%リサイズでファイルサイズの圧縮可能

順に解説します。

まとめてリサイズできる（150個まで）

画像をたくさん追加して、まとめてリサイズできるのが超絶に便利ですね。

ブログに掲載する画像って、たいていは1枚だけではないですし、記事中の画像サイズは同じで良かったりします。

なので、まとめてサッとリサイズしたいときにもBulk Resize Photosは重宝しますね。

設定が保存できる

リサイズの設定画面で設定した内容をお気に入りに保存すれば、次回からはいちいち設定しなくてもリサイズできます。

やり方は簡単でして、下図の①のボタンをクリックするか、Chromeなら②のお気に入りボタンより、この画面をお気に入りに登録すればOK。

よく使う設定をお気に入りに登録しておきましょう。

100%リサイズでファイルサイズの圧縮可能

リサイズツールと言いつつ、画像サイズの圧縮にも使えます。

圧縮とは、画質は若干悪くなりますが、ファイルサイズを小さくすることができます。

使用場面としては、アイキャッチに用いる画像ですね。

アイキャッチは、「Canva」というアプリをよく使っています。

Canvaでアイキャッチ画像を作成するとき、画像サイズは指定済みのため、リサイズする必要はないのですが、規模のサイズ指定を100%にすることで圧縮にも使用できるってわけです。

【番外編】他におすすめのツールは？

Google発のWebアプリ「Squoosh」もおすすめですね（これ、なんて読むんでしょう？）。

このアプリの最大の特徴は、リサイズ、圧縮中の画像の劣化具合を、元画像と比較しながら自由に調整できるところ。

普段は「Bulk Resize Photos」で。
しっかり調整したい画像に限っては、「Squoosh」を使うとよいでしょう。

セキュリティ面は問題ないか？

セキュリティ面は問題ないと言えます。

なので、外部のサーバーにアップロードされたりすることはありません。

確かに、インターネット接続をしない状態でも利用できました。

セキュリティ面についても安心ですね。

ブロガーにおすすめの画像リサイズツール「Bulk Resize Photos」まとめ

最後に、「Bulk Resize Photos」の特徴をもう一度。

しっかり画像の最適化調整したい場合は、「Squoosh」もおすすめです。

とっても簡単そうなので、さっそく使ってみます。

そのほか、WordPressユーザーがブログに画像を掲載するまでの全手順を解説する記事を書いています。

期待してお待ちくださいね。

あなたのサイトは大丈夫？
▼画像を最適化して、自サイトの読み込み速度を改善しましょう。

オフスクリーン画像の遅延読み込みはAutoptimizeで速攻解決

2020年7月30日

Autoptimizeプラグインの設定方法【注意点あり】

2020年7月30日

そんな疑問が解決できる記事を書きました。

たしかに、Twitterのツイートをたくさん埋め込むとページの読み込み遅延の要因となります。

でも、実はツイートの埋め込みコードの一部を削除するだけで、ちょっとした速度改善につながる方法があるんですよ。

かんたんなので、ひとつの記事内にたくさんツイートを埋め込まれている方はやってみてくださいね。

さっそく解説していきます。

【WordPress】Twitterの埋め込み方法

Twitterの埋め込み方法のおさらいです。

ご存知であれば、この章は飛ばしてくださいね。

▼埋め込みたいツイートの右上のアイコンをクリックします。

▼ツイートを埋め込むを選択。

▼コードが生成されますので、CopyCodeをクリックしてコードをコピーします。

あとは、これをブログに貼るだけ。

▼Gutenbergなら、カスタムHTML編集にして貼り付ければOK。

▼出来上がり。

あなたには逃げの選択肢はありますか？

僕も持ち合わせていません。
でも実は逃げのカードが欲しいのです。

逃げと言うとマイナスの印象を持ちますが、
自分にはこんな能力があるから大丈夫と思えるもの。それが欲しいですね。

でもそのためには、
今、攻めないといけないですね🐨🔥

— コアラ🐨サイト速度の解析屋 (@KoaraCom) June 12, 2020

無事埋め込みできましたね。

複数ツイートを埋め込む際の改善策

さて、ここからが複数ツイートを埋め込んでページが重くなった際の改善策になります。

▼記事内に埋め込んだツイートの最後に注目！scriptタグが含まれていますよね？

実は、このコードは記事内で1回だけ実行されればOKです。

これだけです。かんたんでしたね。

このscriptタグは何してるの？

ツイートを載せる際にデザインを整えてくれたりするスクリプトのようです。

すべて削除してしまうとTwitter風に表示されませんので、一つだけ残しておきましょう。

【効果の検証】読み込み速度を検証してみた

試しに、先ほどのスクリプト部分を100回くらい読み込んでみて、Chromeの検証ツールで読み込み速度を検証してみました。

改善前が100回読み込んだ場合。
改善後が1回だけ読み込んだ場合です。

改善前

改善後

すこーし見づらいですが、「Queueing（キューイング）」という欄に注目。

1回だけ読み込んだときのほうが速いですね！

このキューイングという時間は、「スクリプトが読み込まれるのを待っている時間」と考えて頂ければいいです。

なので、改善前に比べて、改善後はすぐに読み込まれているので、ページの表示速度も上がったというわけ。

なるほど～。良く分かりました！

自ブログのサイトスピードが気になる方へ

Googleはコンテンツの質を判断する際に、「サイト速度」も判断基準にしています。

まずはGoogle提供のPageSpeedInsightsでもサイト速度をチェックしてみましょう。

スコアはいかがでしたでしょうか？

Googleさん、わりと厳しめでして、あまり詳しくない方なら、スコア60もあれば上出来かと思います。

▼こんな感じで改善できる項目という欄にずらずらと警告が出てきていますか？

心配ご無用！速度改善できるチャンスです。

改善方法を記事にしておりますので、参考にしてみてくださいね。

＼当ブログですべて解決／

そんな悩みが解決できる記事を書きました。

このように英語で表示されているかもしれませんね。

本記事では、サーバーの初期応答時間を短縮（TTFB）の改善方法として３つ紹介します。

さっそく解説していきます。

サーバーの初期応答時間（TTFB）を短縮するとは？

サーバーの初期応答時間を短縮するとは、「サーバーの処理速度を向上させて、ページの読み込み時間を短縮してくださいね」と言っています。

いま、あなたが見ているWebページって、サーバーに保存されたページを読み込んで閲覧しているんですね。

なので、サーバーの性能があまりに低いと、当然ページの読み込みに時間がかかってしまうというわけ。

しょぼいサーバーは機会損失のもとですね。

サーバーの初期応答時間を短縮（TTFB）の3つの改善方法

サーバーの初期応答時間を短縮（TTFB）の改善方法はこの3つ。

1. PHPのバージョンアップ
2. 時間をおいてから計測しなおす
3. サーバーの引っ越し

順に解説していきます。

PHPのバージョンアップ

PHPをバージョンアップすることで、応答時間を短縮できる可能性があります。

使用しているレンタルサーバーのサイトにログインして、PHPをバージョンアップできるかどうか確認すると良いでしょう。

僕もやってみるとかんたんにできましたので、Xserverでのバージョンアップ方法を次に説明します。

【Xserver】PHPのバージョンアップ方法

Xserverの管理画面にアクセスします。

▼サーバーパネルログインより、ログインします。

▼PHP Ver.切り替えをクリック

▼PHPのバージョンを選択します。今回は、（推奨）となっているPHP7.3.16にバージョンアップしておきました。

かんたんでしたね。

時間をおいてから計測しなおす

つづいて2つめの改善方法。

時間をおいてからPageSpeedInsightsで再度計測してみましょう。警告が解消されることがよくあります。

もちろん、一番負荷がかかるときに遅延しているとよくはないですけどね。

Googleの推奨するサーバーの初期応答時間（TTFB）は、200ミリ秒以下だそうです。

ここからあまりにかけ離れている場合は、次に説明するサーバーの引っ越しを検討してみてもいいかも。

サーバーの引っ越し

やっぱり根本から解決したい！という場合は、サーバーの引っ越しですね。

僕は、国内最大手のレンタルサーバーであるXserver（エックスサーバー）を利用しています。

今のところ不自由なく使えていますが、実は今、Conoha Wing（コノハ ウィング）というレンタルサーバーに注目しています。

ConoHa WINGとは？

ConoHa WING とは、2018年から提供しているレンタルサーバーのひとつで、特出すべきは「圧倒的なサーバーの処理速度」。

金額面についての特徴

• 1年契約で810円（2021年2月調べ）
• バックアップ復元無料

Xserverの場合は、もしものときのバックアップ復元に5,000円かかりますからね。

国内最大手のXserverと比較しても、遜色ないどころかむしろ優れているかも。

料金プランはたいていの人はベーシックプランで十分でしょう。

公式サイトにヒトデさんを筆頭に有名ブロガーさんのインタビューがありますので、ぜひ覗いてみてください。

＼国内最速レンタルサーバー／

ConoHa WINGの公式サイトはこちら

僕も2020年10月でXserverのレンタル契約が切れますので、ConoHa WINGに乗り換えるのを楽しみにしております。

▼（2020年12月追記）実際に乗り換えてみました！僕の所感付きで移行手順を紹介しております。

【最新版】エックスサーバーからConoHa WINGへの移行手順を解説

2020年10月13日

サーバーの初期応答時間を短縮（TTFB）の改善方法【PageSpeedInsights】まとめ

僕も気になっているConoHa WINGサーバーに乗り換えられた方がいらっしゃいましたら、ぜひ感想をお聞かせください^^

この記事が参考になりますと幸いです。

レンダリングを妨げるリソースの除外の改善方法をていねいに解説

2020年8月30日

サイト速度改善に役立つプラグインならこの3つ【まるっと解決】

2020年6月27日

そんな悩みが解決できる記事を書きました。

上図は合格してますが、こちらの項目のことですね。

さっそく解説していきます。

JavaScriptの最小化とは？

JavaScriptの最小化とは、「JavaScriptファイル内のコードを可能な限リ縮小して、ページの読み込み速度を向上させましょう」と言っています。

縮小ってなにするの？

コード内にある無駄な空白やコメントを、コードの内容が変わらない範囲で削除します。

縮小するとなぜ速度改善につながるの？

縮小によってファイルサイズが小さくなり、読み込み時間の短縮につながります。

JavaScriptの最小化 2つの改善方法を紹介

JavaScriptの最小化を行う2つの改善方法を紹介します。

1. Autoptimizeプラグインを活用 ※おすすめ！
2. フリーツールを使って最小化

順にみていきます。

Autoptimizeプラグインを活用

Autoptimizeプラグインを使えば、JavaScriptコードをかんたんに最小化できます。

当ブログでは毎度おなじみとなってきましたね。

JavaScriptオプション欄でJavaScriptコードを最適化設定します。
そのほかも、下図のような形でチェックしておくとよいでしょう。

このプラグインを使えば、JavaScriptの最小化の改善だけでなく、

• CSSの最小化
• オフスクリーン画像の遅延読み込み
• レンダリングを妨げるリソースの除外

などなど、PageSpeedInsightsで出てくるそのほかの項目も改善できますよ。

▼そのほかAutoptimizeプラグインの設定方法はこちらの記事が参考になります。

Autoptimizeプラグインの設定方法【注意点あり】

2020年7月30日

フリーツールを使って最小化

こちらはフリーツールを使って最小化する方法。

「JavaScript minify」と検索すれば、いくつか縮小できるツールが見つかるので、それを利用しましょう。

やり方はCSSの最小化の改善方法に記載しておりますので、気になる方はチャレンジしてみてください。

CSSの最小化の改善方法【PageSpeedInsights】

2020年6月16日

JavaScriptの最小化の改善方法【PageSpeedInsights】まとめ

JavaScriptの最小化の改善効果はCSS同様にそこまで見込めないかも知れません。

警告が出た際には試してみて頂ければと思います。

最後に、ブログのデザインがおかしくなっていないか表示の確認を必ず行ってくださいね！

以上、JavaScriptの最小化の改善方法についてでした。

この記事が参考になりますと幸いです。

そんな悩みが解決できる記事を書きました。

こちらの項目のことですね。

さっそく解説していきます。

CSSの最小化とは？

CSSの最小化とは、「CSSファイル内のコードを可能な限リ縮小して、ページの読み込み速度を向上させましょう」と言っています。

縮小ってなにするの？

コード内にある無駄な空白やコメントを、コードの内容が変わらない範囲で削除します。

縮小するとなぜ速度改善につながるの？

縮小によってファイルサイズが小さくなり、読み込み時間の短縮につながります。

CSSの最小化 2つの改善方法を紹介

CSSの最小化を行う2つの改善方法を紹介します。

1. Autoptimizeプラグインを活用 ※おすすめ！
2. フリーツールを使って最小化

順にみていきます。

Autoptimizeプラグインを活用

Autoptimizeプラグインを使えば、CSSコードをかんたんに最小化できます。

当ブログでは毎度おなじみとなってきましたね。

CSSオプション欄でCSSコードを最適化設定します。
そのほかも、下図のような形でチェックしておくとよいでしょう。

このプラグインを使えば、CSSの最小化の改善だけでなく、

• JavaScriptの最小化
• オフスクリーン画像の遅延読み込み
• レンダリングを妨げるリソースの除外

などなど、PageSpeedInsightsで出てくるそのほかの項目も改善できますよ。

そのほかAutoptimizeプラグインの設定方法はこちらが参考になります。

Autoptimizeプラグインの設定方法【注意点あり】

2020年7月30日

フリーツールを使って最小化

こちらはフリーツールを使って最小化する方法。

「CSS minify」と検索すれば、いくつか縮小できるツールが見つかるので、それを利用しましょう。

試しに、Minify – JavaScript and CSS minifierというサイトのツールを使って、style.cssをminify化してみましょう。

使い方はかんたんで、minify化したいCSSコードを貼り付けてminifyボタンをクリックするだけ。

僕のテーマ「スワロー」なら、「外観」→「カスタマイズ」→「追加CSS」にstyle.cssがあります。

▼これを先ほどのツールに貼り付けてminifyすると、余計な余白やコメントが取り除かれました！

このあとは、minifyしたコードを追加CSSにコピペすれば出来上がり。

かんたんですが、面倒ですよね。

僕は、Autoptimizeでやってもらうことにします。

CSSの最小化の改善方法【PageSpeedInsights】まとめ

CSSの最小化の改善効果はそこまで見込めないかも知れませんが、わりとかんたんなので警告が出ていない方も試してみて頂ければと思います。

最後に、ブログのデザインがおかしくなっていないか表示の確認を必ず行ってくださいね！

以上、CSSの最小化の改善方法についてでした。

この記事が参考になりますと幸いです。

そんな悩みが解決できる記事を書きました。

こちらの警告のことですね。

さっそく解説していきます。

キーリクエストのプリロードとは？

キーリクエストのプリロードとは、「ページを表示させるために必要な内容は先に読み込みましょう」というアドバイスになります。

このとき、最後に呼び出されて実行されるファイルは、ページを表示させるために必要な内容が含まれているのにも関わらず、呼び出されるのが遅いと速度遅延の要因となるというわけです。

【方針】pleload属性を使用しよう

PageSpeedInsightsのアドバイスを再度確認してみましょう。

「pre、load」。

つまり「先に、読み込め」と言うことですね。

警告の出ているファイルに対して、preload属性を付加して優先的に処理をしてあげることで、速度改善につながります。

キーリクエストのプリロードの改善方法2ステップ

キーリクエストのプリロードの改善方法は2ステップでできます。

1. キーリクエストのプリロードの警告が出ているURLをコピー
2. preload属性を追加したlinkタグをheadタグに追加

順に解説していきます。

ステップ１：キーリクエストのプリロードの警告が出ているURLをコピー

PageSpeedInsightsの改善できる項目にて、キーリクエストのプリロード警告の詳細を確認してください。

▼すると、下図のようにURLが現れますので、右クリックしてリンクのアドレスをコピーを選択します。

FontAwesomeとicomoon。
今回はフォント関連の読み込み順が遅くて警告が出ていたようです。

ステップ２：preload属性を追加したlinkタグをheadタグに追加

preload属性を追加したコードのテンプレはこちら。
#の部分に先ほどコピーしたURLを貼り付けます。

<link rel="preload" href="#" as="font" type="font/〇" crossorigin>

• href=”#”
  #の部分に先ほどコピーしたURLを貼り付けます。
• type=”font/〇”
  〇の部分にはリソースの拡張子を記述します。
• crossorigin
  別のサイトからフォント情報を読み込んだりする際に必要ですので、必ず記述します。

参考までに、今回の警告から完成したコードはこちら。

<link rel="preload" href="https://koaramarch.com/wp-content/themes/yswallow/library/icon/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin>
 <link rel="preload" href="https://koaramarch.com/wp-content/themes/yswallow/library/icon/icomoon.ttf?ffmnq8" as="font" type="font/ttf" crossorigin>

このコードをheadタグ内に追加します。

これで完成です。

キーリクエストのプリロードの改善方法をていねいに解説 まとめ

改善できているか一緒に確認してみましょう。

見事合格！

Chromeの検証ツールを利用すると、改善されたのがよく分かります。

▼改善前

読み込まれる順にリソースを表示すると、あとのほうで読み込まれていた今回対象のリソースが・・・

▼改善後

優先的に呼ばれるようになりましたね！
（この上にあるリソースも優先的に呼ばれるように設定されています）

ページの表示もおかしくなっていないか確認してみてくださいね。

以上、キーリクエストのプリロードの改善方法についてでした。

この記事が参考になりますと幸いです。

そんな悩みが解決できる記事を書きました。

オフスクリーン画像の遅延読み込みは、プラグインでかんたんに解決してしまうのがよいでしょう。

さっそく解説していきます。

オフスクリーン画像の遅延読み込みとは？

オフスクリーン画像の遅延読み込みとは、「スクロールしないと見えない領域の画像は後で読み込みましょう」というアドバイスになります。

ファーストビューを速く表示させよう

Webページは1ページのうち、画面スクロールしなくても見える領域とスクロールしないと見えない領域がありますよね。

Webページにアクセスしたときに、スクロールしないと見えない画像なんて、べつに後で読み込んでもいいわけです。

ところが、今回の警告であるオフスクリーン画像、つまりスクロールしないと見えない領域の画像を読み込んでいるせいで、肝心のファーストビューの範囲内にある表示が遅くなってしまっています。

オフスクリーン画像を遅延させることで、Webページをぱっと見で速く感じさせることもできるでしょう。

オフスクリーン画像の遅延読み込み 改善方法

オフスクリーン画像の遅延読み込みの改善は、画像遅延読み込み系プラグインでかんたんに解決してしまうのがよいでしょう。

よく紹介されている画像遅延読み込み系プラグイン

よく紹介されている画像遅延読み込み系プラグインはこちら。

• A3 Lazy Load
• BJ Lazy Load

確かに上記が鉄板かと。

ただ、タイトルに書いちゃってますが、当ブログでもよく紹介している「Autoptimizeプラグイン」でも実現できますよ。

Autoptimizeプラグインでできること

• CSSやJavaScriptコードを圧縮してくれる
• 画像を遅延読み込みしてくれる

やり方はAutoptimizeの設定で、下図赤枠のチェックを入れるだけ。

簡単ですね。

Autoptimizeプラグインの難点

Autoptimizeの難点をあげるなら、画像遅延読み込みに関する細かい設定ができないということ。

例えば、400px手前で読み込み開始！

などの設定は、A3 lazy loadではできますが、Autoptimizeではできないです。

このあたりは実際に表示を必ず確認してみて、

• レイアウトが崩れていないか（プラグインとの相性の確認）
• 体感的な表示速度に問題ないか
• スクロールしたときに違和感はないか

などを考慮してお好きなほうを導入してみてください。

ユーザーにとってストレスを感じるほど遅延読み込みしていたら本末転倒ですからね。

あと、両方採用する場合は、Autoptimizeの画像遅延読み込み設定は解除しておいてくださいね。

▼そのほかAutoptimizeプラグインの設定に関してはこちらが参考になります。

Autoptimizeプラグインの設定方法【注意点あり】

2020年7月30日

オフスクリーン画像の遅延読み込み まとめ

導入後に、PageSpeedInsightsにて警告が消えているか確認してみましょう。

無事合格していますね。

以上、オフスクリーン画像の遅延読み込みの改善方法でした。

WordPressテーマ「スワロー」の紹介

僕の愛用中のテーマ「スワロー」は、駆け出しブロガーの方におすすめのテーマ。

初期設定がほとんど不要で、書くことに集中できます。

僕のブログでもカスタマイズ方法を紹介していますので、参考にしてもらえたら嬉しいですね。

＼当ブログで使用中のテーマ／

WordPressテーマ「スワロー」公式サイトはこちら

レンダリングを妨げるリソースの除外の改善方法をていねいに解説

2020年8月30日

サイト速度改善に役立つプラグインならこの3つ【まるっと解決】

2020年6月27日