低スペックサーバーでもウェブサイトを劇的に高速化させる方法

2020-06-19, 2020-06-07

カノニカルAMP, PWAに対応し、Webp画像フォーマットに切り替え、さらにディスプレイ広告,トラッキングを排除すれば、ページの表示スピードは飛躍的に改善します。格安サーバーでも訪問者が快適に閲覧できるサイトを作りましょう。

格安レンタルサーバーでも高速化できる

この髭犬のサイトは、さくらインターネットのライトプランで運営されています。維持費用は最も安いですが、引き換えに最もスペックが低いです。しかし、ページの表示スピードはそれなりに速く、ページ表示速度が評価できるPageSpeed Insightsでも、高評価されています。つまり、格安レンタルサーバーを利用しても、サクサクページが表示されるサイトは実現できるのです。

当サイトでは、そのページ表示スピードの高速化のために、いくつかの仕組みを取り入れてウェブサイトを構築しています。当記事では、それらについて説明します。サーバーにお金をかけたくないけど、訪問者にはページをサクサク閲覧してほしい、といった髭犬のような方は是非ご覧ください。

ページ高速化への取り組み

カノニカルAMPにする

AMP(Accelerated Mobile Pages)というGoogleが中心となって策定した、モバイルでのウェブサイト閲覧の高速化を可能にする仕組みがあります。これは、ウェブページの機能に制限を設けてページ表示を高速化し、さらにページをキャッシュ化させて各地のクラウドサーバーに展開し、モバイルの検索エンジンに最も近いサーバーのページに誘導させる技術です。モバイルChromeなどの検索結果で、稲妻形状のAMPマーク(⚡)が表示されているものが、AMP対応ページです。体験した方は分かると思いますが、とても表示が速いです。

このAMPをモバイルだけでなくPC用ページでも利用するスタイルが、カノニカルAMP(Canonical AMP)またはネイティブAMP(Native AMP)です。AMPは、モバイルの表示速度向上のために開発されたものですが、PC用ページでも利用できます。PCの場合はキャッシュ化されたページに誘導されることはなく、検索エンジンでの検索結果にAMPのマークが表示されることもありません。ただ、キャッシュ化されないとはいえ、AMP対応ページは制約の多い設計指針からページ表示が高速化されます。

この髭犬のサイトもカノニカルAMPです。モバイルでもPCでも、AMPページが表示されます。モバイル検索結果でキャッシュ化されたページをご覧になっている方は、完全にストレスフリーだと思います。そうでなくても、比較的ページ表示は速いはずなので、快適に閲覧いただけているのではないでしょうか。

ところで、実はカノニカルAMPでの運営はとても楽です。カノニカルAMPと聞くとややこしそうだと思うかもしれません。しかし、モバイルページでもPCページでも同一のhtmlファイルで運用するだけなので、むしろとても運用しやすいです。

AMP対応については、AMP.devが参考になります。スタートガイドもあり、髭犬もAMPサイトがすぐに作れるようになりました。

PWAに対応する

PWA(Progressive Web Apps)という、Googleが提唱しているウェブサイトをアプリ化する仕組みがあります。モバイルでは、ブラウザでの動作より、アプリでの動作の方が速いですが、それがウェブサイトでも可能になります。ときどきモバイルブラウザでサイトを閲覧中に「ホーム画面に追加しますか?」と問われるときがありますが、そうなるのがPWA対応されたサイトです。

アプリ化されれば画像等がキャシュされますので、ページ表示が高速化されます。ただし、訪問者がサイトを気に入ってアプリ化を許可する、という前提が必要です。

髭犬のサイトは、PWAに対応しています。アプリとして追加されるかどうかは皆さんの判断にお任せします。

WEBPやSVG形式に切り替える

ラスター画像ならWEBP形式

ラスター(Raster)画像は、色や濃淡を設定したピクセルの集合体で画像を構成したものです。写真はもちろん、インターネット上のほとんどの画像データーがラスター画像です。

この、ラスター画像をインターネットで表示させる際には、圧縮されたデーター形式を用いる必要があります。従来はJPEG, GIF, PNG形式がよく使われていましたが、これからはより高圧縮のWEBP形式を採用した方がよいでしょう。

WEBP形式はGoogleが開発した高圧縮のラスター画像フォーマットで、ウェッピーと読み、拡張子は".webp"です。ウェブサイトのラスター画像データーをより軽いWEBPで置き換えれば、ページ表示がより速くなります。先に紹介したAMPのキャッシュにおける配信では、キャッシュ化される際にJPEG, GIF, PNG形式の画像は、WEBPに置き換えられます。

JPEGやPNGを使う場合は、写真はJPEG、イラストはPNGなど、その使い分けを考える必要があります。しかし、WEBPではそのような使い分けに悩まされることはありません。すべてWEBPにすればよいのです。運営側としては、画像が軽くなるだけでなく、画像形式が1つに集約できるというメリットがあります。

髭犬のサイトでも、ページ内で表示するラスター画像はWEBP形式のみにしています。

ベクター画像ならSVG

ベクター(Vector)画像は、方向と単位長さで定義されるパスの集合体で画像を構成したものです。ラスター形式とは異なり、ベクター形式は拡大縮小しても鮮明な画像を維持できます。ソフトウェアで作成されるようなシンプルなイラスト等はベクター画像にできます。ちなみに、フォントもベクター画像の一種です。インターネットですと、フォントを除けば、シンプルなデザインのアイコンやロゴ等はベクター画像が多いです。

この、ベクター画像をインターネットで表示させる際には、SVG形式を用いるのが一般的です。シンプルなデザインであれば、ラスター形式と異なり圧倒的にデーター容量が小さいので、積極的に採用しましょう。

SVG(Scalable vector graphics)形式は、代表的なベクター画像形式で、エスブイジーと読み、拡張子は".svg"です。ウェブサイトで扱うときは、画像ファイルとして読み込んでもよいですし、パスの情報を直接HTMLに入力することもできます。直接入力する場合は、ページ表示がとても速くなります。

例えば、髭犬のサイトには、メニュー等にアイコンが用いられていますが、それらは、SVG形式のパスデーターが直接HTMLに書き込まれています。気になる方は、ページのソースを確認ください。

ディスプレイ広告、トラッキングを排除する

広告はページ表示高速化の天敵です。重いスクリプト、最適化されていない画像などが足枷となり、サイトが遅くなります。広告ほどではありませんが、トラッキングもページが重くなる原因です。

髭犬は、広告やトラッキングを否定するわけではありません。それらが必要なサイト主も多いことを理解しています。ただ、趣味のレベルの小規模な個人サイトでは、ディスプレイ広告を表示させてもたいした収益にはならず、トラッキングデーターもそれほど意味を持たないのではと考えています。そして、そのような場合、訪問者のストレスが増すというデメリットだけがあるのではないでしょうか。

また、将来的にディスプレイ広告やトラッキングは、ブラウザ側で排除されると考えられます。これは、ページ高速化やプライバシー保護を目的として、ディスプレイ広告やトラッキングがブロックされるトレンドにあるからです。どうせブロックされるなら、最初からそれらを組み込まないほうが潔い、と髭犬は考えます。

当サイトでは、ディスプレイ広告とトラッキングが存在しないので、それほど不快感もなくサクサクページをご覧いただけるのではないでしょうか。

ウェブサイトはサーバー速度だけで決まらない

インターネット上には、維持費が高額の高スペックサーバーを勧めるアフィリエイト目的のサイトが多くあります。しかし、それらハイスペックサーバーで運営されているはずのアフィリエイトサイトより、このさくらインターネットの格安低スペックサーバーで運営されている髭犬のサイトの方が速いはずです。まあ、このカノニカルAMPの静的サイトに敵うわけがないですけどね。

現在サーバーの契約を考えている方は、ウェブサイトの速度がサーバーだけの性能で気まらないことをよく理解して十分にサーバーを検討してください。また、このページで紹介したページ表示高速化の方法は、最初からサイトの設計に組み込んでおく必要があります。採用される場合は、サイト公開前に十分なテストが必要だと思います。

以下リンクより、1つ前のまとめに戻れます。

ウェブサイト運営まとめ 流行りのWordPressを使わず原始的な手打ちで「髭犬のサイト」を管理している時代遅れの髭犬が、どのようにサイトを運営しているか、その運営方針や設定等をまとめます。