WordPressの高速サーバー6選【高速化のコツも解説】
高速化
近頃、Googleのアルゴリズム変動により、SEOにおいてページ表示速度の重要性が増してきていることを感じるサイト運営者は多いのではないでしょうか。
特に、画像はページ表示速度が遅くなる原因となる可能性が高い要素の一つです。
Googleが提供している速度測定ツールであるPageSpeed Insightsにも項目として出てくる「WebP」。
本記事では、そんなWebPについて、メリットやデメリット、変換方法などを解説します。
株式会社アダムテクノロジーズ 執行役員。
ユーザーニーズと最も近いSEO対策で、あらゆるビジネスを加速させ、より良い社会の実現を目指す。
入社から5年間で100社以上のSEO対策に従事し、様々なジャンル・キーワードでの上位表示を実現。顧客目線での目標達成にコミットしたSEOコンサルティングが強み。
目次
表示
閉じる
WebP(ウェッピー)とは、Googleが開発した次世代の画像形式(画像フォーマットとも言う)です。拡張子の表記は「.webp」。
WebPは、従来のJPEG・PNG・GIFといった画像形式と比較して高画質かつ高圧縮率であるという特徴があります。
Webサイトの表示速度がユーザー体験(UX)や成約率に大きく関わっているという調査がGoogleやAmazonの調査が発表されたことから、サイズが大きくなりがちな画像ファイルの軽量化という観点から注目が集まっています。
参考:Google「モバイルサイトの読み込みに3秒以上かかる場合、訪問したユーザーの53%が閲覧を止めて離脱する」「Squoosh(スクーシュ)」は、Googleが公式で出している画像形式の変換・圧縮ができるツールです。インストールして使うこともできますし、Web上でそのまま画像をアップロードし、WebPに変換することもできます。また、SquooshはWebPのみならず、PNGやMozJPEGなど別の画像形式への変換も可能です。
Squoosh(スクーシュ)jpgをWebPに変換する場合は「WebP変換ツール」を活用するのが便利です。「WebP変換ツール」は、jpgをWebPに変換したり、WebPをjpgに変換できたりするツールです。ファイルを選択することで、簡単かつ無料でWebPに変換することができます。ただし、対応しているブラウザがGoogle Chrome(クローム)のみなので、必ずクロームから変換を行うようにしましょう。
WebP変換ツールpngをWebPに変換する場合は「Convertio」の活用がおすすめです。「Convertio」は、無料でpngからWebPに変換できるツールになります。Google Drive(ドライブ)から画像を選択したり、ドラッグ&ドロップでアップロードできたりします。pngを変換したい場合は、「Convertio」を使いましょう。
Convertio「サルワカ道具箱」は、png、jpeg、gifをWebPに変換できるツールです。また、変換したWebPファイルをZipファイルで一括ダウンロードできるので、他のツールのように都度ダウンロードする必要はありません。加えて、変換した内容はサーバーにも送信されないため、第三者に画像の内容を見られてしまう危険性がないこともメリットです。
サルワカ道具箱Googleが提供しているコマンドツール(Downloading and Installing WebP)を利用することでもWebPを変換することができます。Linux、Windows、macOS用で分かれており、コマンドツールをインストールすることでまとめてWebPをファイル変換できるようになります。インストールした後は、コマンドツール上で変換したいファイルを選択するだけです。
Photoshopはバージョン23.2以上の場合は、既にWebPのファイル形式が完全にサポートされるようになっています。
もし、それ以前のバージョンのPhotoshopを使用したい場合には、「WebShop」と呼ばれるプラグインを使う方法があります。こちらをPhotoshopにインストールすることでWebPに変換することが可能です。PhotoshopでWebShopをインストールした後に、PNGやJPEGなど変更したい形式の画像を選択し、WebPに変換します。
また、PhotoshopでWebPを書き出す際も、フォーマットを「WebShop」と選択すれば、WebPファイルをそのまま書き出すことが可能です。
Adobe公式:WebShop プラグインの使い方使用しているCMSがWordPressの場合、EWWWというプラグインを使用することで一括変換することができます。導入手順は以下になります。
従来の画像形式と比較して、WebPにさまざまなメリットがあります。ここからは、各画像形式とWebPとの比較をしながら、解説を行っていきます。各画像形式ごとの特徴や違いを一覧形式で表にまとめました。
画像形式 | 色数 | 圧縮方法 | アニメーション可否 | 透過 |
---|---|---|---|---|
WebP | 1670万色以上 | 非可逆圧縮・可逆圧縮 | 可 | ◯ |
JPEG | 1670万色以上 | 非可逆圧縮 | 否 | ✕ |
PNG | 256色〜1670万色以上 | 可逆圧縮 | 可 | ◯ |
GIF | 256色 | 可逆圧縮 | 可否 | △ |
PNGは、保存を繰り返しても画像の質(画質)が劣化しないことが特徴です。しかし、保存を繰り返すたびに容量が重くなる点には注意しましょう。また、アニメーションにも対応していないので、アニメーションを使いたい場合はWebPにすると良いでしょう。
JPEGは、表現できる色の数が多いことが特徴です。そのため、写真を保存する際に使うケースが多くなっています。また、JPEG自体も比較的軽い画像形式であるため、Webサイトに使っても問題はありません。しかし、やはりWebPのほうが軽いケースが多く、透過処理もできない点には注意が必要です。
GIF(ジフ)は、アニメーションを利用できることが特徴です。ただし、表現できる色の数が少ないため、使う色によっては画像が粗くなってしまいます。また、アニメーションを圧縮する際はGIFよりもWebPのほうが軽いことも特徴です。
WebPが注目されるようになったのは、前述のように、Webサイトの表示スピードが離脱率・CVRに影響することが知られるようになったことが背景にあります。
そこで、ファイルサイズが重くなりがちな画像ファイルについて、高い解像度を保ったまま、容量を下げる必要性からGoogleによって開発されたのが「WebP」という画像形式です。
WebPが注目される理由は、大きく以下の3つになります。
それぞれ順番に解説します。
WebPは、高画質を保ちつつ高圧縮率を実現できます。通常は圧縮率を高めてしまうと画質が落ちてしまうものですが、その点WebPは高画質を保てるため、ブランディングやユーザー体験(UX)を損なうことなく、Webマーケティング的な観点でも利用が広がっています。
WebPは、そもそもGoogleが開発した画像の拡張子です。ページスピードを計測したり改善できたりするツールの「Page Speed Insight」でも、表示速度が遅い場合は、次世代画像フォーマット(WebP)を使うことが推奨されています。ページの表示スピードは、Googleから正式に検索結果のランキングアルゴリズムに影響があると明言されているため、SEOに力を入れている企業や代理店、Webマーケターなどから注目されています。
2022年12月時点で、ほぼ全てのブラウザで対応が完了しています。
登場した当初こそ、Safariをはじめ、対応していない(表示されない)Webブラウザもいくつかありましたが、現在は対応が進み、ほぼ全てのブラウザで対応が完了されています。
現状、WebPを使用する上での環境的な障害はほぼないと言って良い状態なので、既存の画像をWebP化していくと良いでしょう。
ただし、サイト訪問者に「Internet Explorer」や「iOS13以前のSafari」などのレガシーブラウザのユーザーが多い場合には、WebPと従来の画像をブラウザで出し分けるといった対応をしておくことを推奨します。
2022年12月時点で、ほぼ全てのブラウザで対応が完了しています。
登場した当初こそ、Safariをはじめ、対応していない(表示されない)Webブラウザもいくつかありましたが、現在は対応が進み、ほぼ全てのブラウザで対応が完了されています。
現状、WebPを使用する上での環境的な障害はほぼないと言って良い状態なので、既存の画像をWebP化していくと良いでしょう。
ただし、サイト訪問者に「Internet Explorer」や「iOS13以前のSafari」などのレガシーブラウザのユーザーが多い場合には、WebPと従来の画像をブラウザで出し分けるといった対応をしておくことを推奨します。
WebPを使用することで、表示スピードを高速化できます。表示スピードはGoogleが重要視している項目の1つであり、表示スピードが速いほどGoogleからの評価も高まります。現状、WebP以上に表示速度と画質・対応ブラウザ数を兼ね備えているフォーマットはないため、表示スピードを上げたい場合はWebPがおすすめです。
WebPを使うことが、そのままSEOの検索順位が上がることに繋がるわけではありません。しかし、ページスピードが高速化したり、ユーザー体験が向上したりすることにより、副次的にSEOにメリットをもたらします。
コンテンツ内に画像を使うのであれば、SEOにメリットのあるWebPを使ったほうが良いのは言うまでもありません。現状のSEOの検索順位が伸び悩んでいる場合は、既存の画像もWebPに変更していきましょう。
Core Web Vitalsとは、UXを高めるために必要な指標のことで、Googleが重要視している項目の1つです。Core Web Vitalsは、下記3つの指標が基になります。
上記のCore Web Vitalsにおいて、WebPはプラスの影響をもたらします。なぜなら、WebPは他の画像フォーマットよりも軽量であるため、ページの読み込み時間が早くなるためです。
Core Web Vitalsを満たしているかはGoogleが重要視しているため、SEO評価を高めたい場合はWebPを使うようにしましょう。
コアウェブバイタル(Core Web Vitals)について、詳しく知りたい方はこちら2022年12月時点で、WebPに対応している画像編集ソフトは限られるというデメリットがあります。WebPに対応している代表的な画像編集ソフトとしてPhotoshopが挙げられますが、2022年2月にリリースされた「バージョン23.2」以降でないと対応していません。そのため、バージョンは23.2にアップデートする必要があります。また、同様のAdobe製品であるIllustrator(イラストレーター)はPhotoshopには対応していません。
WebPに対応している他のツールでは「Paint.net (ペイントドットネット)」というツールが挙げられ、こちらは無料の画像編集ソフトとなっています。今後はWebPに対応しているソフトが増えてくる可能性もありますが、現状でどのツールを使えば良いか分からない場合は、上記2つのどちらかのツールを使うと良いでしょう。
2つ目のデメリットとして、Web制作の現場的な視点で、WebP形式への変換が手間であることが挙げられます。通常、pngやjpgであれば、画像サイトからそのままの形式でダウンロードできます。しかし、2022年12月時点では、WebPを編集する際はPhotoshopやPaint.netなどのツールを活用する必要があります。
メジャーなツールに関しては、バージョンアップでWebP形式への対応が進んでいます。ただ、何らかの理由でWebPに対応していないツールを利用する場合、一度WebP以外の別の形式で画像を編集し、その上でWebPに変換する手間が生じる、というのはデメリットだと言えるでしょう。
2018年に、PCの主要ブラウザである「Microsoft Edge」と「Firefox」が、相次いでWebPに対応することを発表しました。さらに、2020年にAppleのiOS14も対応することになりました。
しかし、Internet ExplorerやiOS13以前のSafariIEは未だに非対応でありすので、その場合は条件分岐で出しわけをする必要があります。そのため、Webサイトの訪問者に古いブラウザを使っているユーザーが多い場合は注意が必要です。
ここまで、WebPの特徴などを解説してきましたが、WebPよりも圧縮率の高い「AVIF」はご存知でしょうか。AVIF(AV1 Image File Format)とは、動画圧縮形式の1つであるAV1と同様の方法で画像を圧縮し、HEIF形式にて保存できるファイル形式のことです。
圧縮率が高いことに加えて、透過処理ができたり、gif形式でアニメーションを作成したりできます。デメリットとしては、対応しているブラウザが少ないことです。
しかし、AVIFはMacやWindows、Androidなどのソフトウェアとの互換性に優れており、利用されるシーンは今後拡大される見込みです。加えて、HDRへの対応やアニメーション画像の作成ができるようになることも期待されています。
2022年12月時点ではWebPのほうが注目されているものの、AVIFは将来性が高く主流になる可能性もあるため、常にAVIFの動向も追っておくようにしましょう。
今回は、WebPについて解説しました。WebPは次世代の画像フォーマットであり、表示スピードが高速化したり、SEOに好影響を与えたりするメリットがあります。2022年12月時点では、ほぼすべてのブラウザも対応を完了しています。少しでも検索順位を上げたり、ユーザー満足度を高めたりしたい場合はWebPを使うようにしましょう。
弊社では、コアウェブバイタルをはじめとしたWebサイトの表示スピードの改善する「WEBサイト表示スピード高速化サービス」をご用意しています。まずは、下記のページから無料で資料をダウンロードしてみてはいかがでしょうか。
WEBサイト表示スピード高速化サービス資料 無料ダウンロードするWordPressは世界で40%以上のWEBサイトで導⼊されている無料CMSで、エンジニアでなくても簡単にWEBサイトの構築が可能です。
しかし、⾼度なカスタマイズや表⽰スピードの⾼速化においては、WEBだけでなくWordPressに関する専⾨的な知識が必要で、⼀般的なWEB制作会社やSEO対策会社では対応できない可能性もあります。
WordPressサイトの表⽰スピードに悩む企業の課題を解決するため、SEO技術者集団の「ADAMTECHNOLOGIES 」と、WordPress専⾨家チーム「株式会社e2e」と技術共同開発し、WordPressサイトに特化した表⽰スピード⾼速化サービス『HP爆速くん for WP』をご提供しています。
「HP爆速くん for WP」は、Page Speed Insightsのスコアが上がらなければ一切料金をいただかない、完全成果報酬型のWordPressサイトの表示スピードの高速化サービスです。
「HP爆速くん for WP」の詳細が知りたい方は、下記リンクからご確認ください。
成果報酬型WordPressサイトの高速化サービス 『HP爆速くん for WP』の詳細はコチラ