サイト公開前に確認したいことまとめ

こんにちは、ANDSPACEの後藤です。
皆さん、カタカタコーディングしてますか？ ニョキニョキ成長していますか？

最近のWEB事情もいろいろと変化しています。
ソーシャル系との連動やサイトパフォーマンスの向上、HTTPS化などなど…
昔に比べて、バックエンドの作業もかなり増えてきている印象です。

そういった中で、前回『サイト表示速度の改善とその方法』について触れましたが、
今回は、サイト公開を控え確認事項としてスポットを当てたまとめになっています。
前回の内容と重複する内容もありますが、
公開後のPageSpeed Insightsの評価にも役立つと思うので参考にしてみてください。

公開前にサイトパフォーマンスを上げる

1.ページサイズとサーバーリクエストを削減する

WEBサイトを表示するにあたって、ページサイズというのは非常に重要です。 ページのファイルサイズが小さければ小さいほど、読み込み時間が少なくて済みます。

• 静的ページやフォントや画像などのアセットは、CDNを使うことを検討する
• CSS・JSなどのリクエストは非同期にする。
• JSなどのスクリプトを制限する

CDNはContent Delivery Network（コンテンツ配信ネットワーク）の略。インターネット上にキャッシュサーバーを分散配置し、エンドユーザーに最も近い経路にあるキャッシュサーバーから画像や動画などのWebコンテンツを、オリジナルのWebサーバーに代わって配信する仕組みを意味する。この仕組みを利用した企業向けのサービスが、CDNサービス。

2.画像を最適化する

画像に適切なフォーマットを選び、圧縮することでデータサイズを大きく削減できます。

• mozjpeg
• JIC
• Optimizilla
• JPEG Optimizer

など、他にもオンラインツールは数多くあります。
専用ソフトがなくても簡単にできるので、自分の使いやすいサービスを使ってみてください。
もちろん、圧縮率をあげると画像が劣化するので、やりすぎにはご注意。

3.JavaScript、CSSの圧縮

JSファイルとCSSファイルを縮小し、それぞれ1つのファイルに圧縮する。
利用できるのであれば、GZIPで圧縮すると表示するリソースのダウンロード時間を削減できます。
※ただし、難易度高めです

また、圧縮されたファイルの可読性は激減するので、その後のメンテナンスに大きく影響します。
圧縮前のファイルのバックアップは必ずとりましょう。

4.HTTP/2を使う

サーバー側の設定なので、サーバー知識があること前提にはなりますが、 HTTP/2を導入するとプラウザ－サーバー間の通信が効率化され、ロードスピードを大幅に改善します。

5.レンダリング時間の短縮

ブラウザは、CSSファイルのダウンロードと処理が完了するまでレンダリングをブロックするので、
外部CSSファイルが多いと、コンテンツを表示するのに時間がかかります。
ブロックしているJSやCSSを遅延させるか、非同期に読み込むようにしましょう。

• JSの場合、Async属性やDefer属性を使用する。
• CSSの場合、JSを用いて動的にスタイルシートのlink要素を追加する

6.ブラウザのキャッシュを活用する

WEBサーバーからではなくローカルから、以前ダウンロードしたリソースを読み込むことで時間を節約できます。キャッシュできる静的なものには、JS・CSS・画像・PDFなどあります。
キャッシュを利用するには、サーバーでブラウザのキャッシュを有効する必要があります。

有効期間の目安としては、Googleは、静的なリソースの場合1週間以上と記載していて、
広告やウィジェットなどのサードパーティリソースの場合は、1日以上とあります。
ですが、リソースの変更時期が正確にわかっている場合は、短い有効期間を設定してもいいようです。

7.HTTPSに対応する

HTTPSは、セキュリティやパフォーマンスの面で優れていますし、
かなり前の話になりますが、3年前にはGoogleがHTTPSのサイトを優遇するといった発表もありました。
Chromeでアクセスした際は、アラートは出ますし、今後より非SSLサイトへの風当たりが強くなります。
そういった中で、ログイン画面やコンタクトフォームだけでなく、常時SSL化することは必須と思います。

最近では、HTTPSの導入も無料で出来るサーバーがあったりもするので、
サーバーを選定する上での重要ポイントになっています。

公開前にSEOで確認しておきたい項目

Google AnalyticsとSearch Consoleを準備する

CVアップの為にも情報収集は必要です。
Google AnalyticsとSearch Consoleを登録し、トラッキングコードの埋め込みましょう。

2.XMLサイトマップを作成する

XMLサイトマップは、サイト内のページURLや優先度、最終更新日、更新頻度などを記述したXML形式のファイルです。設置することで、クローラーにより正確なサイト情報を読み込ませ、ページをインデックスしてくれる可能性が高まります。

3.Robots.txtの作成

robots.txtは、クローラーの巡回を指示するファイルになります。
設置することで、クローラーは、robotst.txtを一番最初に読み込んで、巡回するページとしないページを確認し、効率的にサイトを巡回することができます。

4.リッチスニペットと構造化データを加える

リッチスニペットは検索順位に直接影響しませんが、検索結果を見る人にサイトの概要を的確に伝えられる上、
より興味を持ってもらえる可能性が高くなります。

構造化データのマークアップって？

5.OGP（Open Graph Protocol）の設定

サイトにあったSNSへの対応も忘れてはいけません。
FacebookやTwitter、Google+、mixiなどのSNSでシェアされた際、意図した通りにタイトル・URL・内容・サムネイルを表示することができ、拡散を通じて多くの人に記事をみてもらうためには必須の設定といえます。

6.固有のキーワードをセットする

しっかり対策できていないと、せっかくのサイトが台無しです。
Title, h1〜h6, URLにキーワードが含まれているか確認しましょう。

6.canonicalリンクの設定

Head要素の中で使うcanonicalですが、重複ページが存在している時に、
優先させるべきページを伝えることで、それ以外のページは重複ページであることを伝える事ができます。
インデックスさせたいページが除外されないよう、正しいURLを設定しましょう。

そのほか公開前に確認しておきたい項目

1.APIのアクセスに制限をかける

最近は、GoogleMapの有料化もありアクセス数の上限も設定されていたりしますので、
悪意のある人に不正利用されないように、しっかり制限をかけることを忘れてはいけません。

---

今日は、公開前の確認項目としてバックエンド側とデザイン側で分けて書きたかったんですが、
おもいのほか、少し長くなってしまったので、次回は、デザイン側についてお話します。