みなさん初めまして、広島市立大学　情報科学部　システム工学科　東谷有真です！

現在、クランチタイマー株式会社で長期インターンとして活動しています。

主にフロントエンド開発を担当しており、Wordpressの開発をすることがありますが、Wordpressサイトを運用していると、どうしてもコンテンツが増えるにつれて、記事で扱われる画像も増えていきますよね。

多くの画像を使用するWebサイトは、表示に時間がかかってしまうことも。

今回は、Webサイトの表示スピードの改善方法として、次世代フォーマット

(WebP)をWordpressサイトに対応させるための方法をご紹介していけたらと思います！

WebPとは

WebP（ウェッピー）とはGoogleがWebサイトの表示速度短縮を目的として開発した静止画像フォーマットで、画質を保ったまま軽量化した画像を書き出すことができます。

大きなメリットとしては、

• JPEGのように圧縮率が高く、ファイルサイズ（容量）を軽くしても画像が綺麗。
• ページスピードによるSEO評価や直帰率を改善できる可能性あり。
• PNGのように背景の透過も可能。
• GIF同様にアニメーションにも対応している。など

さまざまな用途に合わせて利用することができる上に、サイトへの読み込みにかかる時間を軽減でき、SEO評価が改善される可能性もある優れものです。

以前は対応しているブラウザが限定されていましたが、現在はIEを除くほぼすべての主要ブラウザが対応しています。

iPhone版のSafariも対応したことにより、ますます普及率が高まっていくのではないでしょうか。

WebPへの切り替え方法

では本題に入ります。

どのように切り替え作業したのか、流れを説明していきますね！

まず、今あるサイト内の画像をWebPに切り替える必要があります。

WebP変換を行ってくれるプラグインはいくつかあり、有名どころで言えば、WebPExpress、EWWW Image Optimizerと言ったところでしょうか。

今回の実装では、とにかくサイトの表示速度が遅いという課題があり、少しでもサイトスピードを早くすることが目的でした。

そのため、プラグインが色々な機能に対応していて、プラグイン自体が重たいものは逆効果になってしまいます。

よって今回は、画像圧縮や他のフォーマットへの変換などにも対応しておりプラグイン自体の容量が大きいEWWW Image Optimizerはやめ、WebP変換のみを対象としているWebPExpressを選びました。

他にも、WebPへの変換サービスやWebPに対応している画像編集ツールなどもありますので、状況に応じて最適なものを利用してみてくださいね。

その後、WebPExpressを有効化して、現在Wordpressにアップロードされている画像のWebP変換を行います。

その後、.htaccessファイルを編集して完了です。

文字にするととても短く簡単そうなのですが、この変換や.htaccessファイルの編集が意外と大変で、苦労した点がありました。

苦労した点① WebP変換に時間がかかりすぎる

WebPへの変換時間は、画像1枚あたり1秒かかるかかからないかです。

そのため、画像が多ければ多いほど長い時間がかかってしまいます。

Wordpressの画像が多すぎる場合は、まる1日（約15時間）ほどかかることもありました。

その間、PCをずっと動かし続けなければなりません。

自分は社長のPCを借りることができ、まる1日つけっぱなしにさせていただいて実装しました。

そのため、WebPへの変換を行う際に、Wordpressの写真が５万枚までは1日で変換できますが、それ以上は長期戦になるため、普段使っていないPCを用意する必要が出てきます。

苦労した点② どのディレクトリにある.htaccessファイルを編集すれば良いのかわからない。

IEなどの旧ブラウザへの対応をする場合は、WebP変換を行う際に<picture>タグを使ってWebP対応しているブラウザと、していないブラウザで表示する画像を区別しなければなりません。

htmlに全て書いていては非効率すぎるため、.htaccessファイルを編集してその設定を行う必要があります。

.htaccessファイルはwordpressファイル内に複数あるので該当のファイルを探したところ、独自のテーマディレクトリ直下にある.htaccessの編集では上手く切り替えが出来ず、wpディレクトリ直下にある.htaccessファイルで<picture>タグによる出しわけのコードを書くと、実装することができました。

WebPへ切り替えた結果は…？

計測の方法は、こちらの => https://pagespeed.web.dev/　という速度の計測をしてくれるサイトで行いました。

改善前、改善後、それぞれ3回計測しその平均を出しました。

改善速度は、改善前と改善後の平均速度の差をとったものです。

なんとサイト速度は2秒ほど改善され、クライアントにも喜んでいただくことができました！

最後に

今回は、サイトスピードの改善をするというタスクでしたが、このタスクは漠然としていて、実際に何をするかは人によって違うと思います。

自分はまだ入社して半年も経っていない駆け出しエンジニアですが、真剣に考えた自分の提案を受け入れていただける風通しの良い環境で働けることに感謝しています。

同時に、周りのエンジニアの「挑戦しよう」という意志をいつも感じており、それは自分から提案ができる環境があるからこそだと改めて感じました。

最近では、Jamstackと言うサイトスピードが爆速になるアーキテクチャを利用し、Typescriptでの開発をさせていただいています。

今後も、より良い提案ができないかを考えながら開発を行っていきたいと思います！