モバイルサイトの速度最適化の究極のガイド

公開: 2016-03-09

mobile-speed

私たちは皆、モバイルファーストの消費者市場に向かって押し進められており、SMBはモバイル向けに最適化されたWebサイトに関してまだ遅れを取っています。 電光石火のスピードテストでインターネット接続と4G標準がすでに導入されているため、モバイルオーディエンスの成長にとってこれまでにないほど良い時期です。 ComScoresによると最近のグローバルモバイルレポート、トラフィックの半分弱（49％）と、上位100のデジタルメディアプロパティへの訪問者はモバイルのみです。 これは、モバイルデバイスに適合していないWebサイトがオーディエンスの半分を失うリスクがあると主張する注目すべき統計です。

モバイルオーディエンスにとって最も重要なのは速度だけです（下の図は、デスクトップデバイスとモバイルデバイスのロード時間の中央値を示しています）。

ロードタイム

このモバイルサイトの速度最適化ガイドで説明されている手順と方法には、すべての種類のモバイルデバイスでサイトの速度を最適化するために必要なすべての修正がリストされています。

モバイルデバイスでサイトのパフォーマンスを確認する方法は？

ウェブサイトをモバイルフレンドリーにするために最初に行う必要があることの1つは、モバイルデバイスでのパフォーマンスを確認することです。 このタスクに使用できるツールがいくつかあります。

Googleモバイルフレンドリーテスト-このツールはURLを分析し、ページがモバイルフレンドリーなデザインであるかどうかを報告します。 Googlebotがモバイルデバイスでウェブページを正しく表示する方法のドキュメントを提供し、ページをモバイルフレンドリーにする方法について段階的な提案を提供します。

Googleページスピードインサイト-このツールはあなたのウェブページを分析し、それをより速くするための提案を提供します。 このツールは、以下のスクリーンショットに示すように、赤（修正が必要）、黄色（修正を検討）、緑（問題が検出されない）の3つの優先度インジケーターを提供します。

ページ速度インジケーター

GTMetrix -このツールは、Google PageSpeedInsightsとYahooSlowの両方からデータを取得することでパフォーマンスレポートを提供します。 また、404などの単純な問題や、ページのレンダリングをブロックする外部リソースなどのより複雑な問題を検出するために使用できるウォーターフォールチャートも提供します。

問題を特定し、最初の修正を行ったら、次の提案を実装してWebサイトをさらに高速化します。

モバイルデバイスでWebサイトを高速化する方法-読み込み時間を短縮してパフォーマンスを向上させる8つの方法

以下のヒントは、モバイルデバイスでのWebサイトの速度を上げるために試行され、テストされています。 これらを一つ一つ理解していきましょう。

1-適切に構成されたCDNを持っている

速度とアクセシビリティは、検索の最適化における最大の関心事の1つです。 コンテンツ配信ネットワーク（CDN）を介してグローバルコンテンツキャッシングを活用することは、SEOの取り組みを後押しするための優れた方法です。 基本的に、CDNは、世界中のさまざまな場所に分散しているサーバーのコレクションであり、Webサイトのコンテンツを動的にキャッシュします。 これは、既存のクラウドホスティングサービスに加えて使用できる追加のサービスです。 WordPressサイトを含む幅広いサービスと互換性があります。

CDNキャッシングクライアントに最も近いサーバーを介してキャッシュされたコンテンツを配信するのに役立ちます。 これらにより、待ち時間が最小限に抑えられるため、距離が短くなるという利点があります（ CDNを使用すると読み込み時間が大幅に短縮される方法については、下の図を参照してください）。 有能なCDNには、DDoS攻撃保護やWebアプリファイアウォールなどのインフラストラクチャ最適化も付属しています。

cdn-caching

CDNを設定する方法は？

  • ご希望のCDNプロバイダーにサインアップして、Webサイトを追加してください。
  • CDNネットワークを介してトラフィックをルーティングするには、DNS設定を変更します。 Aレコードを更新し、 CNAMEレコードを作成または更新します。 （ Incapsulaのスクリーンショットを以下に示します。任意のCDNプロバイダーを選択し、DNS設定で必要な変更を加えることができます）。

dns-命令

  • それでおしまい！ レコードの更新が完了すると、CDNはトラフィックをWebサイトにルーティングし始めます。

CDNを配置すると、サイトの読み込み時間を改善し、ユーザーエクスペリエンスの向上に取り組むことができます。

2- AcceleratedMobilePagesを利用する

10月、Googleはより高速でオープンなモバイルウェブ向けにAcceleratedMobilePagesを導入しました。 Accelerated Mobile Pagesは、特別にフォーマットされたWebページであり、検索エンジンがコンテンツを非常に高速に表示できるようにすると同時に、サイト運営者がコンテンツの外観と雰囲気を制御できるようにします。 モバイルウェブサイトは、オープンソースのAMP HTMLコードを使用するとはるかに高速に読み込まれ、検索エンジンの読み込み時間を効果的に短縮することでバウンス率を最小限に抑えることができると推定されています。

あなたのサイトにAMPを実装する方法は？

サイトにAMPを実装するには、次の手順に従ってください。

A- AMP HTML（メインページのAMPバージョンとも呼ばれます）を使用して、メインページの別のバージョンを作成します。 最初のAMPHTMLページを設計するための基本的なコードを以下に示します。

  • <！doctype html>
  • <html amp lang = "en" >
  • <頭>
  • <meta charset = "utf-8" >
  • <title> AMPページのタイトルはここに表示されます</title>
  • <link rel = "canonical" href="非AMPバージョンのURLはここに表示されます" />
  • <meta name = "viewport" content = "width = device-width、minimum-scale = 1、initial-scale = 1" >
  • <script type = "application / ld + json" >
  • {{
  • "@context"： "http://schema.org"、
  • "@type"： "NewsArticle"、
  • 「見出し」：「コンテンツを公開するためのオープンソースフレームワーク」、
  • "datePublished"： "2015-10-07T12：02：41Z"、
  • "画像"： [
  • 「logo.jpg」
  • ]
  • }
  • </ script>
  • <style amp-boilerplate > body {-webkit-animation：-amp-start 8s Steps（1、end）0s 1 normal both; -moz-animation：-amp-start 8s Steps（1、end）0s 1 normal both; -ms-animation：-amp-start 8s Steps（1、end）0s 1 normal both;アニメーション：-amp-start 8s Steps（1、end）0s 1 normal both} @-webkit-keyframes -amp-start { from {visibility：hidden}から{visibility：visible}} @-moz-keyframes -amp-start { from {visibility：hidden}から{visibility：visible}} @-ms-keyframes -amp-start { from {visibility：hidden }から{visibility：visible}} @-o-keyframes -amp-start { from {visibility：hidden}から{visibility：visible}} @ keyframes -amp-start { from {visibility：hidden}から{visibility：visible} } </ style > < noscript > < style amp-boilerplate > body {-webkit-animation：none; -moz-animation：none; -ms-animation：none; animation：none} </ style> </ noscript>
  • <script async src = "https://cdn.ampproject.org/v0.js" > </ script>
  • </ head>
  • <本体>
  • <h1> AMPへようこそ</h1>
  • </ body>
  • </ html>

B-画像を挿入するには、次のコードを使用します。

<amp-img src = "welcome.jpg" alt="ようこそ"height= "400" width = "800" > </ amp-img>

C-一般的なCSSプロパティを使用して、ページの表示とレイアウトを変更します。 スタイリングコードの例を以下に示します。

<style amp-custom > /*任意のカスタムスタイルがここに表示されます*/ body {background-color：white; } amp-img {背景色：灰色; ボーダー：1px黒一色; } </ style>

D- AMPページをプレビュー、検証、公開します。

E-検索エンジンボットがウェブページのAMPバージョンを識別できるように、AMP以外のバージョンのページにamphtmltagを追加します。

<link rel = "amphtml" href ="AMPバージョンのウェブページはここに表示されます"/>

AMPページの実例

AMPページの実際の例を次に示しますこれが通常のページです。 各ページのソースコードを表示するだけで、速度とコーディングの違いに気付くことができます。

AMPラーニングリソース

AMP HTMLを学習するためのコードを見つけるには、以下のリソースを参照して詳細を確認してください。

  • AMPProject.org
  • GithubAMPプロジェクト

3-サイトの構造、コンテンツを改善し、ユーザーエクスペリエンスを向上させる

サイトの設計に関しては、サイトのアーキテクチャは見過ごされがちですが、そうすべきではありません。 Googleのアルゴリズムは検索者からの情報を使用するため、優れたユーザーエクスペリエンスは、より高いランキングを意味します。 サイトの構造が適切でない場合、ページの読み込みに時間がかかり、ユーザーはサイトを離れます。 これは悪いユーザーエクスペリエンスを提供します。

サイト構造を改善する方法は？

優れた検索エクスペリエンスの最も重要な側面の1つは、クロールを改善するためにサイトを最適化するのに役立つため、優れたサイト構造を持つことです。

サイト構造を強化するために従わなければならない8つのステップは次のとおりです。

  • サイト階層を計画し、論理的に保ちます。 また、カテゴリとサブカテゴリの数のバランスを取ります。 洗練されたサイト構造の例を以下に示します。

洗練された図2-1

  • カテゴリとサブカテゴリに名前を付けるときは、検索可能なキーワードを使用してください。 適切な名前を選ぶことはあなたのサイトを最適化するのに大いに役立ちます。
  • ユーザーフレンドリーなURL構造を持ち、ユーザーがすべてのページに到達するのに3回以下のクリックで済むようにします。
  • できるだけ多くのサイトリンクを追加します。 サイトのナビゲート性を高めるだけでなく、サイトリンクはブランドの評判を高め、クリック率を高め、コンバージョンファネルを短縮するのに役立ちます。
  • できるだけ多くの内部リンクを追加しますが、それらがすべて関連していることを確認してください。 堅実な内部リンクを作成する方法の優れた例を探している場合は、ウィキペディアをフォローしてください。 強化されたSEOに適した内部リンク構造により、リンクジュースがすべての内部ページに均等に渡され、すべてのページがGoogleで上位にランク付けされるため、トラフィックとコンバージョンが増加します。
  • 冗長なカテゴリとタグの問題を回避します。 Yoastタグの最適化ツールは、WordPressサイトの冗長タグの問題を修正するための優れた方法です。
  • あなたの最も重要なページにもっと頻繁にそして折り目の上にリンクしてください。 利益を増やすために、最大のリンクジュースをメインの収益を生み出すページに渡すことが非常に重要です。
  • ホームページから収益を生み出すページに到達するのに2回クリックするだけでよいという2クリックルールに従ってください。

サイトコンテンツを改善する方法は？

Googleのランキングアルゴリズムは、コンテンツの品質に大きな重点を置いています。 パンダのアップデートは、特に、ウェブサイトのコンテンツが少ない、またはユーザーフレンドリーでないサイトのランキングを下げることを目的としています。 サイトにコンテンツを表示する方法は、サイトの速度と大きく関係しています。

サイトコンテンツの品質と表示を改善することでサイトの速度を上げる5つの方法を次に示します。

  • ブログを持っています。 検索エンジンはユニークで新鮮なコンテンツが大好きで、ブログを持つことはまさにその目的を果たします。 全体的な読み込み時間を短縮することを目的としたいくつかの本当に便利なプラグインを提供するので、WordPressにブログを掲載することをお勧めします。 WordPressでブログを作成するのはとても簡単です。 ステップバイステップの説明については、ブログを開始する方法に関する無料の初心者ガイドをダウンロードできます。 画像とキャッシュを最適化するために使用できるプラグインは次のとおりです。EWWW画像オプティマイザー、Googleライブラリ、WPオプティマイズandWP SuperCache 。
  • CSSスプライトを使用して画像を最適化すると、画像を1つの大きな画像に結合して一度に読み込むことができます。

CSS-スプライト

  • レスポンシブテーマは速度を考慮し、読み込みが速くなるため、レスポンシブテーマを利用してください。
  • GooglePageSpeedをインストールするおよびMemeCached サーバー上で。 これにより、Webページのリソースを変更して、Webパフォーマンスのベストプラクティスを実装することにより、Webページの遅延と帯域幅の使用率が向上します。
  • ユーザーが自分のレビューをサイトに残すことを許可します。 本物の肯定的なレビューとコメントは、サイトの信頼性を高めるための大きな要因です。 Getreviwed.org は、あなたの製品やサービスについての正直な洞察を共有しようとしている何百人もの潜在的なブロガーと手を組むための素晴らしいプラットフォームです。 DisqussおよびFacebookコメントプラグインは高速に読み込まれ、コメントはインデックスに登録できるため、ユーザーが本物のレビューやコメントを追加して、サイトの全体的なコンテンツ品質を最適化するのに役立ちます。 したがって、速度を犠牲にすることなく、サイトにいくつかの価値のあるコンテンツを追加できます。
  • ブラウザのキャッシュを使用して、HTML5WebストレージAPIを実装します。

4-レスポンシブデザインを活用する

GoogleのモバイルSEOガイドによると、レスポンシブデザインはGoogleが推奨するデザインパターンです。 グーグルはまた、モバイル検索でモバイル向けに最適化されたサイトを上位にランク付けすると述べています。 さらに、レスポンシブデザインを使用すると、次の主な利点があります。

  • リンクは単一のドメインに向けられ、検索エンジンのランキングが向上します。
  • 高いバウンス率を制御します。これは、Googleがランキングを下げるためによく使用します。
  • ユーザーエクスペリエンスの面での強化。これは、ボットだけでなく実際のオーディエンスにとって特にプラスです。

レスポンシブデザイン

レスポンシブサイトをスピードアップする方法

レスポンシブサイトを高速化するには、次の戦略を使用します。

  • ソーシャルウィジェット、画像、地図など、あらゆる種類のコンテンツの読み込みを停止し、特定の条件に一致するコンテンツのみを読み込むために使用される条件付き読み込みを使用します。
  • Bootstrapなどのフレームワークを使用すると財団迅速なモバイル機能と速度を提供します。
  • 利用可能な画面サイズに応じて自動的にサイズ変更されるアダプティブ画像を使用します。 これにより、完全な画像ファイルをロードする必要が少なくなります。 代わりに、縮小および埋め込まれたHTML画像は、マークアップを変更せずにロードできます。
  • m-dotリダイレクトを減らし、Webページに単一のURLを優先します。
  • FitTextのようなプラグインを使用するこれにより、親要素によって提供される幅に収まるようにフォントサイズが柔軟になります。

5-クロール性を向上させるためにサイトマップとGWTを使用する

多くの場合、サイトのランキングは、継続的に動作し、サイトをクロールし、検索エンジン最適化要因に基づいてコンテンツをランク付けおよび分析する小さなボットに依存しています。 次の手順は、クローラーがサイトを効果的にクロールし、ダウンタイムを最小限に抑えることができるようにすることで、Webサイトの速度を上げるのに役立ちます。

  • サイトマップを作成し、コンテンツの重複を避けてください。 サイトマップは、動画、画像、モバイルコンテンツなど、ページ上の特定の種類のコンテンツに関するメタデータをGoogleに提供するため非常に便利です。 たとえば、サイトマップビデオエントリでは、ビデオの実行時間、カテゴリ、および年齢の適切性の評価を指定できますが、サイトマップ画像エントリには、画像の主題、タイプ、およびライセンスを含めることができます。
  • Googleウェブマスターツールを使用してGoogleのクロール速度を最適化します。 詳細については、以下を参照してください：クロール速度を変更する方法に関するGoogleガイド。
  • Googleボットは新鮮な新しいコンテンツに魅了されているため、コンテンツを更新し続けてください。
  • 信頼性の高いサーバーを使用し、必要に応じて常にHTTPSで保護されたサイトを提供します。

6-クリックイベントの代わりにAjaxとタッチイベントを使用する

モバイルユーザーは、リソースをクリックしてから別のリソースが読み込まれるのを待つことを嫌います。 代わりに、より簡単な解決策は、タッチサーフェスのさまざまな場所での同時タッチをサポートするTouchEventsを利用することです。 このようなタッチイベントをボタンに適用すると、読み込み時間が大幅に短縮され、ユーザーエクスペリエンスが向上します。

次の図は、ユーザーがモバイルデバイスを操作しているときに生成される可能性のある一連のタッチイベントを示しています。

touch_events

また、コードが実行されているページを更新しなくてもWebサーバーからデータをフェッチできるため、AJAXを使用することをお勧めします。

7-クライアント側の処理を最適化する

モバイルデバイスの場合、CPUの速度が遅く、メモリが少ないため、クライアント側の処理が大幅に削減されます。 ページ処理の効率を上げるために、画像やスクリプトなどのスクロールしなければ見えないコンテンツの読み込みを延期することをお勧めします。 これらのスクリプトのダウンロードと解析は、 onloadイベントが終了するまで安全に延期できます。 一部のスクリプトは、ユーザーがドラッグアンドドロップなどのアクションを開始した後にのみ呼び出す必要があるため、ユーザーがアクションを実行する準備ができるように画面に到達しない限り、そのようなスクリプトをロードしないでください。

これらのガイドラインとWebサイトのインフラストラクチャの変更により、Webサイトを高速化し、より高いランキングを達成できます。 Webサイトの読み込み時間を大幅に短縮するのに役立つ他の手法を実装しましたか？ 以下のコメントで教えてください。

厳選された関連記事：

  • あなたのウェブサイトが本当にモバイルフレンドリーかどうかをテストするための5つのツール
  • Webページの速度を上げる：JavaScriptを最適化する
  • Q：モバイルWebサイトにはどのURLを使用する必要がありますか？ A：レスポンシブデザイン

*Eoleから採用されたリード画像。 一部の権利は留保されています。