「WEBサイトのページスピードを上げたいけど具体的にどういうことをしたらいいんだろう？表示速度が遅いと見てる方もストレスだしなんとかして改善したいなあ」
今回は上記のような疑問、お悩みにお答えする記事となっております
それでは早速結論から見ていきましょう。
結論
ページスピードをアップさせるためには以下の施策を行うと改善します。
・画像ファイルの圧縮
・使っていないスクリプトの削除
・使っていないCSSの削除
・使っていない計測系のタグを削除
・オフスクリーン画像の遅延読み込み
・ファイルサイズをminifyした
それでは実際に上記の内容を深掘りしてきましょう。
記事の信頼性
WEBエンジニアとして勤務しながら、SEOに関しても日々研究しております。自身のWEBサイトを表示速度を「4」から91まで向上させた経験を活かし、今回の記事を執筆させていただきます。
画像ファイルの圧縮
まず最初に行った施策は画像サイズの圧縮です。WEBサイトで使用している画像のサイズはページスピードにダイレクトに関係してきます。
実際、私のサイトでもファイルサイズの重いPNGデータを多用していました。
PNGとは
PNGは画像データの一つで、画像の情報を捨てない「可逆圧縮」のため画像を細部まで精密に表現できますが、その分データが大きくなりファイルサイズが大きくなります。
これではサイトが重くなるのは当然ですよね。
なので画像ファイルを圧縮する事にしました。
画像ファイルを圧縮するにはJPEGminiのようなサイトもおすすめですが、Adobe Photoshopをお持ちであればPhotoshopでも圧縮できます。
圧縮せずとも画像のデータの種類を変えることでも画像の容量を減らすことが出来ます。
今回はPNGデータからサイズの軽いGIFデータに変更しました。
GIFとは
GIFは256色まで扱える可逆圧縮方式の画像データになります。扱える色数は少ないですが、その分画像のデータ量は少なくなり、データ自体は軽くなります。写真よりイラストの方が向いている傾向にあります。
GIFを使うことでこれで1Mbあった画像が50kbになるなど、10分の1以上ファイルサイズを小さくしました。
画像は何枚もあったので一つ一つのサイズが小さくなるとかなりページは軽くなりますのでバカにできないなと思います。
使っていないスクリプトの削除
次に使ってないスクリプトの削除です。
ブログのデザインを修正していく中で、初期の頃は使っていたものの現在は使ってないJavaScriptのファイルなどがheader.phpに散乱していたのでそちらを一気に削除しました。
とにもかくにもこれらを行った結果、まずは4から30まで上がりました。
WordPressを使っている場合、自動でjQueryなどのスクリプトが挿入されることがありますが、そういった場合は以下のPHPコードをfunctions.phpに記載すれば自動でスクリプトを挿入されなくなります。
<?php
function my_delete_local_jquery() {
wp_deregister_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'my_delete_local_jquery' );
?>
ただ、functions.phpのコードを修正する際は必ずバックアップを取ってから作業を行うようにしましょう。
少しの記述ミスなどで、ブログが真っ白になって何も表示されない、管理画面にもログインできないなどの状況になることがあるためです。
functions.phpはサイトの中枢と言ってもいいファイルなので、取り扱いは慎重に行いましょう。
使っていないCSSの削除
使っていないCSSの削除も行いましょう。
CSSの記述一つ一つの影響は小さくても、不要なCSSを放置しておくと積もり積もってページスピードの低下に繋がります。
私のサイトでも、JSと同じく知らず知らずのうちに使ってない CSSが溜まりに溜まっておりました。
CSSを読み込むにもコンピューターは労力がかかってきます。
一行でもCSSが少ない方が早くページを読み込めるのは言うまでもありませんね。
使っていない計測系のタグの削除
HotjarやGoogle AnalyticsのタグはGoogleタグマネージャーで一括管理できますが、稀にGoogleタグマネージャーで一括管理しているにも関わらず他の計測系のタグを削除できていなかったりする場合があります。
Hotjarとは
by wikipedia
これらのタグを削除すると、ここまでの施策も含めて以下のように61までスピードアップしました。
ここまで来ると目に見えてだいぶスピードも早くなったように感じました。
ただ、まだまだ上がる余地はあるのでさらに改善する必要があります。
オフスクリーン画像の遅延読み込み
次に行ったのはオフスクリーンの画像を一気に読み込むのではなくページが見えている範囲から順次読み込んでいく仕様に出来るlazyloadというプラグインの使用です。
Lazy Loadは以下のリンクから取得できます。
いきなり全ての画像を読み込む必要が無いため、コンピューターにも負荷が低く、ページスピードが上がりやすくなります。
これはかなり効果が大きく、20前後ページスピードが上がりました。
ファイルサイズをminifyした
最後に行ったことはcss,JavaScriptのファイルサイズのminify化です。
minify化とは、ファイルサイズを小さくする事です。
ファイル名などで「◯◯.min.js」などと書いてあるURLがたまにあると思いますが、あれはminify化処理されているファイルの事を指します。
具体的にどういうものかと言うとCSSやJavaScriptは人が見やすいようにインデントされていたり、改行が入っていたりしますね。
しかし実はその改行やインデントもファイルサイズを重くする要因の一つなのです。
なのでつまりminifyしているファイルというのは改行やインデントがされていないファイルという事ですね。
以下のようなファイルの事です。
これではかなり人間的にはかなり見にくいのですが、こうすることによって不要な改行やインデントを省略することが出来、ファイルサイズを軽くすることができます。
といってもminifyを手動で行うのはかなり手間ですよね。
そのため、自動で出来る便利なminifyツールを使う事をオススメします。
Minifyを一番簡単に出来るツールはこちらです。
ページ自体も見やすいですし、コードをコピペするだけでminify化してくれるという優れものです。
他にも有料のCodeKitなどがありますが、自身は上記のラッコツールで事足りています。
他にも有料のcode kitなどもありますが、自身は上記のラッコツールで事足りています。
Page Speed Insightsとは
Google PageSpeedは、ウェブサイトのパフォーマンス最適化を支援するために設計された、Google Incのツールファミリーです。
by wikipedia
ページスピードの調べ方
ここまでページスピードの上げ方について見てきましたが、肝心のページスピードはどこで確認出来るのでしょうか。
ページスピードはGoogleが提供するPage Speed Insightsにて確認することが出来ます。
Googleのアカウントでログインし、自身のサイトのURLを入れればすぐに数値を測ることが出来る優れものです。
数値は1〜100までの範囲で、数値が高いほどページスピードが早いということになります。
なぜページスピードを上げるか
・UXの観点から見てもページスピードが早い方が良いため
・SEOの観点から見てもページスピードが遅いと上位に上がりづらいため
先にも書きましたが、Googleの掲げる理念には「遅いより早い方がいい」というものがあり、ページスピードが検索順位にも関係してくるため、日々ページスピードの改善は行っていった方がよいでしょう。
ページスピード改善に関する書籍
ウェブサイトのページスピードを改善するためには書籍で学ぶのも有効な手段です。
こちらの書籍はページスピード向上に関する知識はもちろん、SEOに関する内部対策、外部対策を網羅的に解説してくれる１冊です。
ページスピードを上げたいエンジニアはもちろん、平易な言葉を使って開設されているため、非エンジニアの方でも読みやすい１冊なので手元に置いておいてもよいかもしれません。
WEBサイトの表示スピードの上げ方についてのまとめ
本日の記事ではWEBサイトの表示スピードの上げ方についてまとめてみました。
・画像ファイルの圧縮
・使っていないスクリプトの削除
・使っていないCSSの削除
・使っていない計測系のタグを削除
・オフスクリーン画像の遅延読み込み
・ファイルサイズをminifyした
ざっと上記のような内容で施策を行いましたが、有効ではないものは一つもなく、全てページスピードの改善につながったと思います。
これからページスピードを改善してみたい、という方にとって少しでも有益な情報になれば幸いです。
ではまた次の記事でお会いしましょう。
おしまい♪