画像を表示する拡張子を.jpgから.webpにする
Googleのアルゴリズムに対応をする為には、ページの表示速度を出来る限りに早くする必要があります。
以前Googleのお偉いさんが「ユーザーがページの読み込みにストレスを感じ出すのは2秒が限界だ」というとても難しいお話をしていました。
その為に、画像が一番WEBサイトに利用するデータとして重い可能性があるので、まずは画像データを別のデータに書き直して表示させてしまおう。という大作戦です。
今では画像のWebp化はSEO対策の必須条件でもある位対策が必要ですので、説明とあわせてやり方を記載していきますね。
上手なWEBサイト制作の場合にはこれ位の点数が取れます
試しに自分で今制作途中のサイトを計測してみましたが、とにかくページの表示速度を軽くする為の工夫が必要です。デザインばかりにこだわるホームページ制作代行会社等はこういったユーザーにとって優しくない、時代遅れな構成をする事が多いため注意して下さい。
先に流れを簡単に説明しちゃいます
EWWWww Image Optimizerというプラグインを使用すれば、既にサイト内で使用している画像を自動でWebPへ変換してくれます。管理画面内のプラグイン→新規追加→名称をコピーして検索→インストール→有効化。でOKです。
FTPソフト等でサーバーに入り、.htaccessファイルをダウンロードし、メモ帳ではなくTerapad等で開きます。そして以下のコードを最下部に追加で張り付け保存、そしてまた同じルートディレクトリにアップロードして上書きします。
#EWWW Image Optimizer|WebP変換コード
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
#/EWWW Image Optimizer|WebP変換コード
この作業で何をしているかと説明をすると、WebPに対応していないブラウザの場合にはJPGを表示する様に自動的に対応しろ！という指示を与えてあげています。
設定画面を開くとWebPというタブがあるのでそれをクリック→「ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。」という左側のチェックボックスにチェックを入れ変更を保存して下さい。
一括変換をする前にきちんとバックアップを取ってから画像の一括変換をボタンをぽちっと押して数分間まっているだけでハイ終了。これだけでJPGファイルからWebPファイルに自動的に切り替わり、EWWWの管理TOPにてどれくらいの容量が削減されたかの容量も確認出来ます。
ちなみにとんでもない数字で驚くと思いますが、次世代画像ファイルは本当に優秀ですね！
これで正常に表示されていたら完璧です。更に表示速度を上げる為のポイントとしては、画像の読み込みを遅延させるようなプラグインや設定をONにしてあげると、更に表示速度は改善されます。
画像ファイルを一括変換してページ速度を向上させよう
如何でしたか？作業自体はめーっちゃ簡単です。ホームページを制作した事がない方にとっては少し慣れない用語が並び、難しく感じるかもしれませんが、ステップに合わせて作業をするだけで慣れている人であれば「5分」で作業が終わります。
是非皆さんが楽しいWEBライフを送れる様に、また楽しい記事を更新していきますね！見て頂き有難うございました！
コメント