htmlの描画を高速化！！Webサイトを高速化する方法

2020年7月8日 2020年7月8日

サイトがなかなか検索上位に上がらない！！
最近だんだんとサイトの検索順位が全体的に下がってきている、そのようなことでお悩み方！！

不用意にサイトのコンテンツを改善する前に、まずはサイトの表示速度について改善してみませんか？
今回はhtmlで作成されてサイトの描画を、高速化する方法について紹介していきます。wordpressでサイトを構築されている方も、大体は適用できる方法なので、参考にしていただければと思います。

・htmlの描画を高速化
----画像のデータ量を軽減する
----Javascriptを使いすぎない
----アドセンス広告などは設置しすぎない
----Webフォントの使用を停止
----ブラウザキャッシュの設定
----gzip圧縮で転送データを軽減
・htmlの描画を高速化！！Webサイトを高速化する方法まとめ

htmlの描画を高速化

近年のサイトの評価基準として、スマートフォンで快適にWebサイトを閲覧して使用できるかが重要な評価要素となっています。そのためにもWebサイトの表示速度を改善する、チューニングが必要となってくるのです。

今回は高度の知識がなくても誰でも改善できる、htmlで作成されたWebサイトの描画を高速化する方法をお伝えします。

画像のデータ量を軽減する

サイトを高速化する上でもっとも改善しやすい対処法として、ページに使われている画像サイズの最適化にあります。画像の最適化する上で、2つのポイントが重要となります。

最適化のポイント

・表示している画像サイズ以上に大きすぎる画像サイズを読み込んでいないか
・画像を圧縮しているか

まずサイトに表示している画像サイズ以上に、不必要に大き過ぎる画像を読み込んでいる場合には、最適な画像サイズに改善する必要があります。

画像サイズを改善しましたら、次に画像のデータサイズを圧縮する必要があります。
下記サイトを利用すると画像のデータ容量を、40～70%ほど軽減できるのでサイトの表示改善に大きく効果があるでしょう。

画像サイズの圧縮サービス-TinyJPG

Javascriptを使いすぎない

Webサイトに演出性を持たせるために、Javascriptを使い過ぎるとページの読み込み時、Javascriptが読み込まれるのでその分、表示速度の影響が出てきます。
特に気づかずにエラーなどが発生している場合には、そのエラーが原因になりページの表示に大きな影響を及ぼすことになるのです。

ですからJavascriptやJQueryの導入は最低限に抑えることが、サイトの高速化には良い結果となるので、サイトの仕様と合わせて減らしていきましょう。

アドセンス広告などは設置しすぎない

アドセンス広告などを設置されている方は、広告報酬の兼ね合いで過剰に広告を設置している方がいます。しかしながら、アドセンス広告などはJavascriptなどで生成されたスクリプトで、表示の際には、多少の処理能力が必要となります。

処理能力の低いスマートフォンなどでは、表示速度にも影響がでますので、やはり広告を設置するとしても減らす必要があります。

アドセンスや各ASPタグなどを含め、1ページ辺りに2～3つぐらいに抑える方が良いでしょう。

Webフォントの使用を停止

デザイン性のあるフォントを、Webサイトで表現するためにWebフォントを使われている方もいると思います。
残念ながらWebフォントは、サイトの描画を遅くしてしまうので、高速化を目的とした場合にはWebフォントを使用しない方向で改善していく必要があります。

標準的なテキストフォントで代用できるように、改善してください。
※高速化のためにも、できれば画像などは使わないほうがよいでしょう。

ブラウザキャッシュの設定

ブラウザキャッシュとは、一度アクセスしたサイトのデータ（画像やHTMLなど）をブラウザで一時的に保管しておく仕組みです。こうしてデータを保管しておくことで、混雑を避けページの表示を高速化することが可能となります。

設定するには.htaccessファイルに下記ソースコードを記述して、サーバーのドメイン直下に設置してください。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "access plus 1 months" 
ExpiresByType image/jpeg "access plus 1 months" 
ExpiresByType image/png "access plus 1 months" 
ExpiresByType image/x-icon "access plus 6 months" 
ExpiresByType text/css "access plus 1 months" 
ExpiresByType text/javascript "access plus 1 months" 
ExpiresByType application/javascript "access plus 1 months" 
ExpiresByType application/x-javascript "access plus 1 months"
</IfModule>

gzip圧縮で転送データを軽減

通常のデータサイズで送るよりも、圧縮されたデータで送る方が高速化に繋がります。
.htaccessファイルに下記コードを記述すればgzip圧縮をして、データを送ることが可能となります。

#gzip対策
<IfModule mod_deflate.c>
# mod_deflateを有効にする記述
SetOutputFilter DEFLATE

# 古いMozillaなどの古いブラウザでは無効にする。例外としてIEは有効にする
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
    
# 画像は2重圧縮になるので圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip

# 圧縮するファイル形式を列挙
AddOutputFilterByType DEFLATE text/plain #テキストファイル
AddOutputFilterByType DEFLATE text/html  #HTMLファイル
AddOutputFilterByType DEFLATE text/xml   #XMLファイル(1)
AddOutputFilterByType DEFLATE text/css   #CSSファイル
AddOutputFilterByType DEFLATE application/xhtml+xml #XHTMLファイル
AddOutputFilterByType DEFLATE application/xml           #XMLファイル(2)
AddOutputFilterByType DEFLATE application/rss+xml    #XMLファイル(3:rss形式)
AddOutputFilterByType DEFLATE application/atom_xml #XMLファイル(4:atom形式)
AddOutputFilterByType DEFLATE application/x-javascript #JavaScriptファイル
AddOutputFilterByType DEFLATE application/x-httpd-php #PHPファイル
</IfModule>

上記の方法はmod_deflateを使用しているので、レンタルサーバーによって使えなくされている場合もあります。そのため適用後に下記チェックサイトなどで動作しているか、チェックしてください。

・https://lab.syncer.jp/Tool/Gzip-Checker/
・https://sitechecker.pro/ja/gzip-test/