7つの方法・Webサイト高速化計画

個人で配信と言ったらSNSか動画の時代です。個人サイトも廃れつつある今頃、何を言ってんだかという感じですが、今回は時代遅れにもめげずタイトル通りにサイトの高速化についてです。

ここは元々テストサーバーなのですが、最近は気になることがあり、高速化を達成するためにいくつか試してみました。おかげで割と速くなってるよね？と自画自賛したりして。

とは言っても速さ遅さの要因のひとつには外的要因――サーバー環境があるので、しかもここは格安の共有サーバーを借りてるので、たまに同居してる他サイトさんの巻き添え食ったりして一次的に重かったり、サーバー自体の障害とかで落ちる時はあるけども。

というわけで今回は、Webサイトの高速化のために気にするポイント。

1. サーバーを見直そう

できるだけ軽いサーバーを選ぶべし。

上でも書いたように、フツーに個人がWebサイトを運営する際には、そんな大金かけられないので共有サーバーを借りると思います。とすると1台のサーバーに複数サイトが乗るわけですが、速度に影響する二つの影響が発生します。

・サーバー自体が重い・遅い会社
・同居してる他サイトがやたら帯域食うサイト

サーバーが遅い会社はまあ事前にそこで運用してるサイトを見たり、口コミ見るしかないですが、個人サイト衰退の今の時代に生き残ってる業者でそういうひどいところはあまりないので気にしなくてもいいかも。ただ昔の個人サイト全盛の時はハードウェアをケチってたくさん客を詰め込んで儲けようとしてた業者さんとかいた記憶。

それ以外で今も問題になるのは、何かとメンテナンスが多い業者。その間、サーバー止まるので、誰かが見に来てくれてもエラーになる。実は今使ってるこのXREAサーバーも最近何かと重かったり落ちることが増えてきたので、ちょっとお引っ越しも考えてます。

　
同居してる他サイトの問題の方は、大量トラフィックが頻繁なサイトと同居する羽目になると、巻き添え食って自分のところも表示が重くなったり、最悪は落ちたりするって問題です。ただこれも昔ほど個人サイトが全盛じゃない＝アクセスしてくる人もいないってわけで、あまり気にする必要はないですが。

昔はpixivみたいな絵をアップするSNSみたいなサイトがなかったりしたので、有名な絵師さんとかはWebサイトを自前に持っていて、そういう人とサーバーが同じになると、新作アップされるたびに、見に来る人がたくさんいてトラフィックが増えて、同居しているサイトが巻き添え食う…なんてこともありました。

それ以外だと、スパムメールとか送ろうとする迷惑な人が同じサーバー使ってると、スパムツールで大量に何千何万もメールを送信してくれるわけで、その間のサーバー負荷が大きくなって同居してる人たちは巻き添え食ったりってことはあったりしましたが、最近はスパムには業者も厳しくなってるので、あまり巻き添えはないですな。

これに対する対策は、アクセスの多い・負荷のかかるサイトとサーバーが同じになったら、逃げる、の一択です。メンテの多さも気になったらもう少し少ないとこへ引っ越しだろうね。

2. 広告を剥がそう…ってコラ

広告を貼るためにサイト作ってんだよ！って人も多いでしょうから、「広告貼らないのが一番軽くなるよ」とか言ったら怒られそうだけど、広告って基本的に外部サイトの情報を自分のとこで表示させてるわけなので、『引っ張ってくる→表示』の流れで読み込みに時間がかかると表示してる器である自分のサイトも重く感じたりする。「知ってるわ！」って？

Adsenseだと昔からあるバナータイプの広告ユニットとか、最近は自動広告とか出てきてますが、昔は1ページに3個までしか広告貼れなかったのが今は上限なくなったので、そのせいかベタベタ貼りまくってるサイトもあるね。

一昔前はスマホ・携帯で見る人向けには画像バナーよりもテキスト広告のが効果的、なんて言われてた時代もありました。今より帯域が狭かったので重いバナーが嫌われてたのもある。今はスマホのアクセスのが増えて、バナーもスマホ対応のが出てきてるし、画像たくさんのお洒落サイトもありふれてるので、テキストは逆にリンクと気づかれにくくなって減ったけどね。

Adsense以外でも似たようなバナータイプのは多いですが、あれも呼び出す側のサーバーの事情かやたら重い広告あるし。アダルト系とか。動画化してたり巨大化してて読み込み時間かかるし見づらいやつとか、広告のスキップボタンを押さないと本文見られないやつとか、閲覧者からしたらひじょーにストレスたまるのも増えてます。たまにウイルスサイトに飛ばされるやつとかもあるし。
　
まあこの手の広告は『クリックさせることで収益になる』タイプなので無茶してもクリックさせようとするわけですが、こういうのをやっぱりたくさん貼るとそれぞれの呼び出しに時間かかって遅くなるのもあるね。

理由は主に二つ。画像や動画の読み込みに時間がかかるのと、外部広告を自分のサイトに表示するためにJavascriptが使われてたりすると、それの読み込みにも時間がかかるから。

広告内容はジャンルとかこの広告は拒否とか大雑把には貼る側も選択できたりはしますが、基本は配信されるだけなので、重い広告を避けるのもなかなか難しい。だから一律に貼らない方がすっきりなのですが、んなわけ行くか！ってとこでしょうよ。

　
対して、Amazonとか楽天とかA8ネットとかその他通販サイトの物販系広告もライブ広告とかだと重いのあったりしますが、バナーやテキストだけならそこまで重くない。けどたまに相手のサーバーが重いとやっぱり引っ張られる。

それと物販系はクリックされた上で物が売れないと収益にならないので、そのクリックをカウントするためにタグや透明画像が埋め込まれてたりしますが、それが重くなることある。Amazonの1pxの透明画像のタグが読み込み遅延の原因になったこともある。

https://ir-jp.amazon-adsystem.com/e/ir～

まあこちらも貼らなければ遅延しないという身も蓋もない解決法があったりして。

最近はさすがにSSL化してない広告はなくなったけど、過渡期は読み込む広告がSSL化されてなくてセキュリティエラー出たり、そのせいで読み込みに時間かかるみたいなトラブルもあった。

3. ブログパーツ・ガジェットを減らそう

外部サイトの情報を引っ張ってくるゆえにサイトが重くなるものには、ブログパーツもあります。今でも見かけるのでは、サイトのサイドバーにTwitterとかFacebookのフィードを読み込ませて最新情報を表示させるやつとか。

個人サイト、ブログが全盛の時代は、いろんなブログパーツってサイドバーに貼るやつがあってそれが読み込みの邪魔してたものよ。

アクセスカウンターとか、ウェブリングのバナーとか、月齢だの天気だのから、バーチャルペットやキャラクターを表示させるやつとか。今だとアメブロのアバターにそれの名残ちょっとあるけど、生き物系はブログペットとか呼ばれてました。ブログで飼ってる生き物よ。喋るやつとか魚が泳いでる水槽とか（ただ泳いでるだけで意味はない）ホントにわけわからんものもたくさんあったね。

私も若い頃は、いろんなブログツールをサイドバーにベタベタ貼って自サイト重くしてました。自分のサイトにそれ表示して何の意味があんの？って今だと思いますけど、当時は流行ってたのよ。金魚が泳いでるのとか表示させてかわいいなって思ってたし。

しかしこれも個人サイトが廃れて需要がなくなったことや、スマホが増えてサイドバー見なくなったこととかで、サービスが終了してだいぶ減って来てます。AdobeがFlash Playerのサポート終了して表示できなくなったのもたくさんある。

　
とは言いつつ、最近もコロナウイルスの地域別の発生数をお知らせするガジェットとか見たよ。真面目なサイトならまだしも、個人サイトにそれ表示する意味ないが。

まあ、今はスマホが主流になって、サイドバーって何よ？くらいの人も増えてそうだし、ここは懐かしコーナーみたいになってますが、まあ余計なものをサイトに貼らなければ軽くなりますって単純な話。そうやって減らしまくるとうちみたいに地味なサイトになるんだが。

4. 画像を見直そう

画像サイズを小さくしたり、拡張子を変えましょう。

ここまでは外部環境を書いてきましたが、ここからはブログ自体の環境です。と言ってもサイトで使う画像を外部写真サイトとかに保存してて呼び出す場合は、上と同じように外部からの読み込みに時間がかかる可能性はある。逆に自サイトが重い場合は画像を外部に置いた方がサクサク表示される。昔は割とこっちの理由で画像を別に持ってるサイトが多かった。

更に外部内部のどちらでも、画像自体の解像度とかサイズを見直すと高速化につながることもある。

どでかいサイズ・解像度の高い画像はスマホの人にも「ギガが減る」って嫌われますけども、サイトでも表示に時間がかかったりします。ファッションとかデザインとかのお洒落サイト以外の大体のサイトじゃそんなキレイで大きな画像はいらないのに、無駄に高画質で遅くなったりだと本末転倒です。むしろ今時はスマホが主流だからお洒落サイトでも高画質は迷惑だし。なので縮小したり拡張子を変えて表示色を絞ってサイズを小さくすることで高速化になります。

単色とかのは『GIF形式』にする。
『PNG形式』よりも『JPG形式』がお勧めです。『BMP』は論外です！WordPressもビットマップ画像はアップロードできなかったりするよね。

ちなみに最近のgoogleさんのお勧めは『WebP形式』です。ウェッピーって呼びますけど、なんかむかつく響きです。こらこら。

画像のWebP化は大手サイトとかはやってますが、デフォだと保存画像がWebブラウザで開かれちゃうとかでユーザーからは嫌われてますな。まあ画像保存するようなサイトじゃなければこれ使うのが今は一番なのかも。

今までJPGとかで保存してたのを今更変えるのメンドーよ！って人にはWordPressなら『Images to WebP』ってプラグインがあります。まあ私はウェッピーの響きが気に入らないのでJPGで頑張ってるけど。『Converter for Media』ってやつもあるね。他にもいろいろあるであろう。

他にも「うちのサイトはPNGの高画質で何百枚もアップしちゃってるよー」みたいな場合もあるでしょうが、これもPNGをJPG形式に変換して再アップロード…というかURLも書き換えてくれるプラグインがいくつかあります。そのままな名前の『PNG to JPG』ってプラグインとか。手動で画像再アップして、記事とかのURLも書き換えてたら日が暮れるからね。

高速化のプラグインで、機能のひとつして記事をアップする時に画像を勝手に変換してくれる『EWWW Image Optimizer』ってプラグインもあって、これ入れてるとPNGが勝手に変換されるーって慌てたりしますが。そういうのもあります。

　
WordPress以外のCMSやブログツールでも多分、似たようなプラグインはあるはず。なかったら画像を一気に変換してアップロードして、記事のURL部分を置換してって作業で何とかなるかな。それが面倒なんだってね。

5. コードをスッキリ整頓しよう

画像だけでなく、コードが無駄にでかいのも読み込みに時間がかかる原因になります。特にphpの記述がループになってたり、無駄な処理が混じってると、余計なものまで読み込もうとして時間がかかる。

JavascriptやCSSもやたらクドクドしてたり不要なコードがあると、その分読み込みに時間がかかるのもある。スッキリシンプルなコードは高速化にもつながります。

　
他には.hpaccsessの表示を間違えてループになるとかも地味にある。wwwがつくドメインをつかないものにリダイレクトする記述にしたけど、サーバーの方のドメイン設定間違えててループしたとか。←体験談。httpとhttpsの設定間違えてウロウロループするとか。←同じく体験談。

ブログのデザインテンプレートは自作する人もいるけど、多くのは人は大体誰かが作ったものを借りるかと思いますけど、作成者のサーバーに画像やCSSファイルが置いてあってサーバーに読みに行くなんてやつだと重くなる。WordPressは大体がダウンロード式だけど、たまにあるんだな。アップデートを確認に行く設定になってるやつとかも。

6. プラグインを見直そう

続いてはプラグイン。うちの場合はWordPressですが、CMSの場合は誰かが作ってくれた便利機能をダウンロードして使うことが多いです。これはサイトの利便性とかセキュリティとかいろいろと役立つツールですが、ものによってはサイトを遅くする。

よくあるのが、セキュリティの監視ツールとか。記事の一覧や関連記事を表示させるものも、データを読み込んで表示させるから重くなったり。表示させる系のプラグインは回避策としてキャッシュを利用するものはあるけども、セキュリティ関連は役割からしてそういうのあまりないね。

意外なとこだと画像の表示を整えるギャラリー系のプラグインがやっぱりJavascriptとか使ってて重くなったり。Lightbox系のやつはjQueryプラグインが必要だったりするけど、これもJavascriptです。こいつと広告のJavascriptが干渉してたりすることもある。てかあった。

　
更にはひとつだと問題ないのに、いくつかのプラグインを同時に使うと干渉して重くなる、なんてのもある。重い原因がプラグインにありそうな場合は一個ずつ止めて様子みたりして修正しますが、プラグインは何かと意図しない結果を引き起こしたりセキュリティの穴になったりするって、できるだけ使わないように避ける人もいますね。それも一理ある。

昔はWorpPressよりMovableTypeのがメジャーだったりしてましたが、MovableTypeは動的データなので表示が重いとか言われてたっけ。そういうCMSの問題も大体改善プラグインとかあるね。