今回はGoogleのYoutube公式アカウントで公開された”Javascriptでサイト順位を上げる6つの方法”という英語の動画を日本語に翻訳しました。
公式アカウントの動画
クリックして動画へ
SEOの最新動向を理解する上では、とても参考になると思います。また、専門用語について、簡単な説明文もつけましたので、初心者にも優しい記事です。(星マークが付いた箇所は注釈です、動画内容ではありません。)
さて、本題に入りたいと思います。(動画にある、挨拶文などは割愛させていただきます。)
Javascriptはプログラミング言語の一つで、サイトとユーザーのインターラクションをより豊かにできます。たとえば、コンテンツを動かしたり、メニューバーにも応用したりなど。また、サイトのパフォーマンスに関するより深い分析情報も収集できます。
現在、ご利用できるJavascriptフレームワーク、ライブラリ、要素がたくさんあります。Javascriptはなぜここまで発展してきたかというと、全てのブラウザがJavascriptとCSSの使用を支持するわけではありません。従って、Sophisticated components (Javascript 関数)自身を大きく改善をし続けなければなりません。
1、Javascriptを一気にいっぱい入れないこと
Javascriptの数は知らず知らずの間に増えています。とくに、各UIコンポーネントが別々のファイルに保存された場合。各ダウンロードには手間がかかります。とくにHTTP1を使用しているサイト。
ここで、Javascript ファイルが大量存在する場合の無料の改善ツールを紹介します。
①まずはPage Speed InsightsのOpportunities セクションを確認しましょう。ここで皆さんのサイトに各種アドバイスを提供してくれます。
例えば、リクエスト数を低い水準にし、サイズを小さくします。拡大するときは、Javascript ファイル含めて、リクエストされたリソースタイプの数とサイズを要約します。
ダウンドーロしたファイルの数を減らす方法はいっぱいありますが、問題を解決できるかどうかを決めるのはあくまでもご利用になっているプラットフォームとツールの柔軟性です。
例えば、多数のコンテンツマネジメントシステムはJavascriptへのアクセスを規制し、コンテンツクリエーターの作業負担を減らすと同時に、誤作業比率を減らします。一方で、プラットフォームが解決できない問題をより着手しにくくさせます。
もし、小サイズのJavascript ファイルがいっぱいあれば、全部まとめて1つ大きいファイルとしてダウンロードすることをおすすめします。
実用的なやり方としては、まとめられたいくつかの大きいファイルを並行でダウンロードして、作業効率を高めます。
また、Javascript を束ねるツールもあります。例えば、プロセスをより簡略化するWebpackとか。
HTTP2がサイトに配備された場合、Javascriptを束ねなくても、多数ファイルの同時ダウンロードの効率が改善されます。
2、過度な逆引き(DNS lookups)を避けましょう
過度なJavaScript ファイル 参照の逆引きを避けましょう。
JavaScript ファイル が違うドメインからローディングされたら逆引きオーバーヘッドが発生します。過度の逆引きはページのサクセススピードを落としてしまいます。
Page Speed Insightsの Reduce JavaScript Executionセクションでは使われているドメイン名をリストアップしてくれます。
また、クロームデベロッパーツールはもっと使いやすいと思う人もいるかもしれません。
注意して欲しいのは、DNSのキャッシュはクッキーのように簡単に消せるものではありません。
逆引きを減らすために、外部の参照 Javascript ファイルをご自身のサイトでホスティングすることは良いかもしれません。でもこれはいつも100%満点の対応とは言えません。なぜかというと、もしかしたら、このJavaScript ライブラリはすでに他人に使われていて、ネット上でキャッシングされているかもしれません。
外部の参照 Javascript ファイルのコピーを保有することは逆引きを減らせますが、ファイルを2回ダウンロードするコストをかなり大きくしてしまいます。
3、効率悪いJavaScriptを削除
質の悪いJavaScript はサイトのスピードを遅くしてしまい、ユーザーエクスペリエンスにマイナスな影響を与えます。
Page Speed Insightsのレポートには質の悪いJavaScript関連の内容が記載されます。
Reduce Javascript Execution Timeセクション,Eliminate Render Blocking Resourcesセクションなどではページスピードを落とす関連JavaScriptの情報が提示されます。
Javascript function document.writeが正しく使用されなかったら他のオペレーションの動きをブロックし、ページパフォーマンスに大きく影響します。
例えば、スクリプトインクルージョンをdocument.writeに追加するとページのローディング時間が２倍になるという実験が報告されていました。
また、GoogleのPassive Listenersツールを使用しない場合はページの表示速度を落とすという報告がありました。
Passive Listenersはとても重要で、ブラウザにJavaScriptがスクロールを妨げないことを伝えます。
質の良い、他と違うJavascriptを書くのも１つの方法です。
ウェブ上には素敵なリソースがたくさんあります。例えば、既存コードの一覧と分類されているサイト、またオーダーメイドでご自身の簡潔で強いコード関数が形成できるサイトもあります。
4、使用していないJavascriptも効率悪化の要因
Javascriptの再利用は必要のないJavascriptを含めてしまうことを起こします。
例えば、ほとんどのサイトはライブラリ、フレームワークやコンポーネントのすべての機能を使いません。なのに、使用しない部分もダウンロードされたり、解析されたりします。
Page Speed InsightsにはReduced Unused JavaScript セクションがあります。ここにはローディングされていないJavascriptがリストアップされています。
Tree-Shakingといったツールでは実際に使用されていないJavaScriptが提示してもらえます。
5、圧縮してダウンロード
JavaScriptファイル、特にラージサイズのファイルが圧縮されてダウンロードしていることを確保しましょう。
Page Speed InsightsのExpand the Enabled Text Compression opportunityセクションには圧縮すべきJavaScriptファイルがリストアップされています。
6、キャッシュタグの設定
JavaScriptファイルのキャッシュヘッダが適切に設定されたかを確認しましょう。
ブラウザのキャッシュ期限の確認をする時間を節約でき、ページのパフォーマンスを向上できます。
クロームデベロッパーツールのNetworking Tabを使い、ダウンロードされたJavaScriptファイルのHTTP response headersを確認しましょう。
Cache Controlといったheadersもお勧めします。
Page Speed InsightsのServe Static Assets with an Efficient Cache Policy
Opportunityでキャッシュタグが適切に設定されているかどうかが確認できます。
JavaScriptファイルがサイト全体に修正や更新をかけたとき、忘れられずに同じく更新されるのを確保しましょう。
方法としてはJavaScriptファイルにバージョン番号やハッシュ関数を入れましょう。
もう1つの解決方法は一般公開されているパブリックロケーションのファイルを参照することです。
以上です。