人材求人サイトのページ表示のスピードは大変重要です。
Googleはページの表示に速さを求めていて、ランキングの要因にもなっていますので、しっかりとした対策が必要です。
しかし、スマホのユーザーは随時Wi-Fiに接続されているわけではありませんし、３G回線を利用しているケースもあります。移動時間などの空き時間で求人を検索ということも良くあります。その場合モバイル回線を使用しての閲覧になるのでページの表示は遅くなります。
遅いページは閲覧をやめてしまいます。人材求人サイトは登録と並んで出来るだけ多くのページを閲覧してもらうことも重要ですのでページの表示スピードを上げるために行うべき施策を説明します。
目次
ファーストビューは１秒以内
Googleではファーストビューを１秒以内で表示するというのを推奨しています。（ファーストビュートはページを表示したときにスクロールせずに見える部分）
１秒以内というのは、ユーザーが検索結果などからサイトへのリンクをクリックした時点からファーストビューが表示されるまでの時間となり、その間にサーバとスマートフォンの間で様々な動作をしています。
ページが表示されるまでのスピードはいくつかの要因によって左右されます。
- サーバの機能
- プログラム言語の種類
- プログラムの書き方（処理の方法）
- データの量
- HTML・CSS・JavaScriptの記述方法
- 画像
- ユーザーの回線・端末の機能
１～３については、サイトのリニューアルや新規で制作時になりますが、５と６についてはWEB担当者でもできることが多いので特に詳しく説明していきます。残念ながら７については人材求人サイトの運営側では対応できないことです。
１、サーバの機能
サーバというのはわかりやすく言えばパソコンと同じようなものです。
サーバにもCPU、メモリ、HDDなど様々なハードウェアが搭載されていてその能力によりWEBサイトの表示スピードが変わります。
極端な言い方をすれば、低いスペックのサーバを使用した場合に処理が停止し最悪の場合サーバを再起動しないとWEBサイトが見れない状態になります。
ですので、複雑な処理をする場合や訪問するユーザーが多いことが予想される場合はより良いサーバを利用する必要があります。
既に運用している場合、サーバの移行は大変なことですが、新しく制作するサイトについてはよく検討して余裕を持ったサーバを選びましょう。
２、プログラム言語の種類
WEBの世界には300を超える言語が存在していて、そのプログラムによって特徴があり得意な処理、苦手な処理、書きやすい、書きにくいなど色々あります。
私はプログラマーではないので、細かいことまではお話しできませんが、プログラムによって同じことをしているのに処理にかかる時間が変わります。
特に日本でよく使用されているPHPの処理速度はあまり速くありません。
こちらも既に運用されている場合は、変更するとなると新規でサイトを制作するのに近い労力が必要になります。
３、プログラムの書き方（処理の方法）
プログラムの書き方はプログラマーによって千差万別です。
出かけるときに目的地に行くのにいくつもルートがあるのと同じです。早いルート、高速道路を使わないルート、運転しやすいけど遠回りなルートなど方法は様々です。
このプログラムの書き方もページの表示に関わってきます。例えば１＋１の答えを表示するぐらいでは何秒も変わることはありませんが、大量のデータの処理が必要な場合は大きく変わってきます。
特に人材求人サイトの場合は、1万件を超えるデータに対して複雑な絞り込みを行い検索結果や回遊など様々な処理を行う必要があるので高速で処理できるプログラムの書き方が必要です。
また、プログラムの書き方とは少し外れますが、リダイレクトの回数は出来るだけ減らし、最短距離で目的のページが表示できるようにしましょう。
ただし、このブログでもお話ししている通り、人材求人サイトは変わっていかなければいけません。変わらなければならないということは制作後のメンテナンス性も考えた書き方が必要です。
４、データの量
人材求人サイトはデータの量が多くなります。
１職種に特化した求人サイトでも全国の求人を掲載すれば10,000件以上の求人になることもあります。また、長年運営していけばさらに件数は増えていきます。
だからと言って、登録するデータ量を減らせというわけではなく（どちらかと言えば豊富なコンテンツを作るため登録できるものは出来るだけ多く登録しましょう）多くのデータ量にも耐えられるサーバの構成、サイトの構造が必要だということです。
弊社でも経験がありますが、他社のパッケージソフトを使ってみたところ、デモサイトではしっかり動いていましたが、多くのデータを登録したところ使い物にならなくなったことがあります。
サイト制作の際は、ある程度先を見据えて現状の問題だけではなく今後どのようにしたいか、どのようになっていくのかを想定して制作する必要があります。
５、HTML・CSS・JavaScriptの記述方法
これまでは、あまり目に見えない部分を説明してきましたが、ここからは表側の部分です。実際にWEB担当者が変更できるのはこの部分からという場合が多いと思います。
HTMLやCSSやJavaScript（今後はJSと表記）の記述方法でも表示のスピードが変わります。
ブラウザはHTMLを上から順に処理をしていき、外部から読み込むファイル（CSS、JS、画像など）の容量が大きかったり、処理が複雑な場合にその処理が終わるまで次の処理が行われません。
WEBサイトを見ているとブラウザの更新マーク（ ）がグルグルと回転したまま、真っ白なページが10秒以上表示されたあと、ようやくページが表示されるというページをよく見かけます。
これではユーザー待ちきれずに離れてしまいます。
そのようなことが起きないように対応していきましょう。
Googleが公開しているページの表示スピードの改善方法には様々な記載されていて参考になりますが、そこまでやるか？ということもあるので、標準的な場合と究極まで行う場合の両方をご紹介します。
①標準的な場合
（1）CSSやJavaScriptの外部ファイルは１つにまとめる。
ブラウザは同時にダウンロードができるファイル数が限られています。上限を超えた分はダウンロードが完了したら次のファイルがダウンロードされるようになりますので、できるだけダウンロードするファイル数を抑える為にできるだけ１つのファイルにまとめましょう。
やむを得ず複数のファイルになってしまう場合は、CSSを先にJSを後に記述し、読み込むCSSをすべて記述した後にJSを記述しましょう。
最近はブラウザの性能が上がり、CSSとJSが同時に読み込むことが出来てきましたが、古いブラウザや可読性の為にまとめて記述しましょう。
（2）CSSやJavaScriptの読み込みは</body>の直前
CSSやJSの読み込みの記述場所ですが、通常はheadタグ内に記述しますが、</body>の直前に記述するようにすると、HTMLや画像を読み込んでからCSSやJSの処理を行うためとりあえず情報は表示されますので、真っ白な状態でユーザーが待つことが無くなります。
ただし、JSについては、</body>の直前に移動したことにより思った動作が起きない場合がありますので十分に確認してください。
また、このままだとレイアウトが崩れた状態で表示され、その後にCSSが処理されデザインが組み立てられます。そうなるとユーザーにはページが崩れている状態で表示されてしまうので「あれ、このページおかしいな？」という不信感を抱いてしまいます。
（3）ファーストビューのCSSはインライン
不信感を抱かせないためには、ファーストビューで使用しているCSSのみ抜き出して、head内にインラインで記述します。
そうすることによってファーストビューはデザインがしっかりした状態で表示され、それ以下のすぐには見ない範囲については後からデザインが適応されますのでユーザーも安心してサイトを閲覧できます。
（4）CSSやJSを圧縮する
CSSやJSなどメンテナンスの都合上、改行やスペース、コメントなど実際にページの表示には関係ないことで、ファイルサイズが大きくなってしまっています。
当然のことながら、ファイルのサイズが小さければ小さいほどページの読み込みは早くなりますので、余計な部分を削除しましょう。
ひとつ前で説明したファーストビュー用のCSSも忘れずに圧縮を行いましょう。
しかし、ひとつひとつ手で行うのでは大変な労力になりますので、WEB上で公開されているツールを使用して行うのが良いでしょう。ただし、圧縮後のファイルは改行やメモ書きなどがなくなってしまいますので今後のメンテナンスの為に、圧縮されていない元のファイルは手元に必ず残しておきましょう。
②究極まで行う場合
（1）HTML全体を圧縮する
先程、CSSやJSを圧縮すると書きましたが、HTMLも圧縮すればサイズが小さくなります。
全ページではありませんが、Googleでも検索などユーザーがスピードを求めるであろうページはHTMLも圧縮をしています。Googleの検索トップや適当なキーワードで検索した後のページのソースを確認すると圧縮されています。
ただ、この後説明するgzipやdeflateで圧縮する場合は、サーバにかかる負荷などを考えると必ずしも行う必要はないと思います。
（2）JSは非同期で読み込む
既に</body>直前に記述している為、大きな効果はありませんが、非同期で読み込むことによりページ全体の表示が速くなります。
非同期で読み込むと、現在の処理と順番が変わる可能性があるため、サイト全体で影響が出ていないかよく確認しましょう。
（3）ブラウザのキャッシュを利用する
あまり変わることがない画像やJS、CSSなどのファイルはブラウザにキャッシュさせるようにしましょう。最初の訪問では意味がありませんが２回目以降の訪問ではキャッシュされたファイルが表示されるため、ページの表示が早くなります。
（4）gzipやdeflateで圧縮する
先程のCSSやJSの目に見える部分の圧縮とは異なり、サーバーからファイルを配信する際に一時的に圧縮を行うという処理になります。
プログラムなどをダウンロードするとファイル名.zipとなっていて、パソコンで解凍して利用するようなイメージです。
６、画像
（1）形式
WEB上で使用される画像には大きく分けてGIF、JPG（JPEG）、PNGの３種類あります。それぞれに特徴があり簡単に言うと
GIFは少ない色数で単純な形のアイコンやマークなどを表示するのに向きます。その分サイズも小さくなります。
JPGは写真などに使われることが多く、フルカラーが再現できます。
PNGもフルカラーも再現できますが、使用する色の数が多くなるほどファイルサイズが大きくなります。一般的なWEBサイトのボタンやバナーを作るには向いています。
となり、基本的には小さいマークやアイコンはGIF、写真はJPG、バナーやボタンはPNGと使い分けますが、使用している色の数などによりどの形式がサイズを抑えられるかは変わりますのでひとつひとつ確認が必要です。また、作成された画像は表示に不要な部分が含まれていますので以下の処理が必要になります。
（2）不要な部分の削除（圧縮）
画像には削除しても表示には影響のない・少ないものが含まれています。iLoveIMGやTinyPNGなどを利用すれば、自動で画像の不要な部分を取り除いてくれるのでファイルサイズが小さくなった画像を利用するようにしましょう。
（3）画像の縦横のサイズ
画像の使用するサイズ（ファイルサイズではなく実際の横×縦のサイズ）が決まっている場合は、そのサイズに合わせて作成しましょう。600×400pxで表示する画像を1800×1200pxで用意する必要はありません。
（4）CSSスプライト
小さな画像は（マークなど）は1ページ内で多く使われますが、数が多くなると1度にダウンロードできる個数の制限により表示が遅くなるのでCSSスプライトという手法を使用します。
マークなどを１つの画像にまとめ、背景として読み込むという方法で１ファイルのダウンロードとなるので表示が速くなります。
ただし、大きな画像をまとめてしまったり、使用頻度の低い画像をまとめるとファイルサイズが大きくなりますので、小さいマークや使用頻度の高い画像だけをまとめることが必要です。
７、ユーザーの回線・端末の機能
これについては、人材求人サイトを運営している私達ではどうしようもありません。スマホを製造しているメーカーや、携帯キャリアに頑張ってもらうしかありません。
ただ、サイトを利用するユーザー全員が４G回線を利用できないということや、最近では格安スマホなど、端末の機能が低いものや割引販売の規制などにより買い替えサイクルの長期化など端末の機能が最新のものに比べ落ちる機種を使用しているユーザーが増える傾向にあります。
まとめ
このように、人材求人サイトでは様々な工夫を行って、ページの表示スピードを速くする必要があります。
Googleのランキングを決める要素がページスピードだけではありませんが、Googleの様々な言動を見ていると重要な要素の一つです。せっかく制作するサイトですので上位に表示するためにもページスピードは欠かせない重要な施策の一つですのでしっかりと対策を行ってください。
ナレッジルーム採用WEBマーケコンサルタント 石井
求人サイト制作なら人材採用情報満載のナレッジルームのTOPへ戻る
