少なくとも表面的には、ウェブサイトを立ち上げることはもはや難しくありません。 誰でもあなたのためにウェブサイトをセットアップすると主張することができます。 しかし、高性能Webサイトの秘密は、サーバーレベルのバックエンドで行われることであり、ほとんどのWeb設計者が興味も知識もない技術的な複雑さに浸っています。 より良いPageSpeedとYSlowスコア(より良いSEOのため)で、そして特にモバイルユーザーのためにあなたのウェブサイトを空に推進するこれらの秘密のいくつかを探求しましょう。

Webデザインの誤り

一部のクライアントにとって、彼らが気にしているのは「かなり」のWebサイトだけです。 彼らは全画面の画像、ヘビーデューティのビデオ、そしてあらゆる種類の派手なスクリプトを備えた派手な見せびらかしを望んでいます。 これらのクライアントにとって、彼らは顧客や訪問者にウェブサイトをこのように支払うという誤った考えを持っています。 残念ながら、これは誤解であり、よく知らないか、ウェブサイトが実際にどのように機能するかを説明するのに時間を費やすことができないほど恐れている一部の機関やウェブデザイナーによってまだサポートされています。

ご覧のとおり、優れたWebサイトは行動を促すフレーズ(CTA)で情報を提供することを目的としているため、訪問者をリードや顧客に導くことができます。 したがって、優れたWebサイトは2つの主要な目的を果たす必要があります。

  1. 見つけることができます 検索エンジンを介して訪問者によって(Googleを考えてください)。
  2. 速くなければならない 特に私たちが世界経済に住んでいるので、Amazonを第一例として、世界中のあらゆる訪問者に。

これらの主な目的はどちらも密接に結びついています。 Googleがインデックスに登録するのは、関連性があり(「スパム」が十分ではない)、安全(マルウェアやマルバタイジングなし)、高速(最適化されたコンテンツ)、モバイルフレンドリーである場合のみです。 これらの基準のいずれかに失敗すると、ウェブサイトにペナルティが科され、シンクはGoogleインデックスでますます遅れをとります。

そしてユーザーにとっては? ユーザーは焦っており、ますますそうです。

ウェブサイトのパブリックWifiまたはモバイルでの読み込みが非常に遅い場合は、次のように進みます(「直帰率「」。 ウェブサイトが重くて遅い場合、訪問者は数秒待って、他の場所をクリックします。 あなたは新しい見込み客と関わる唯一の機会を失ったところです。

一部のWebデザイナーは、プロトタイプのWebサイトをローカルディスクで実行しますが、これは明らかに速度ペナルティがなく、実際のWebサイトの速度が遅いことに気付かない場合があります。 プロトタイプのウェブサイトをローカルのファイバーバックボーンでホストしているサイトもあれば、ウェブサイトがかなり高速だと思う人もいます。 しかし、実際には、同じバックボーンを使用していて、ホップ数が多すぎない場合にのみ、Webサイトが高速に見えるようになります。

携帯電話向けのデザインも見た目ほど簡単ではありません。 ほとんどのWebデザイナーは、「レスポンシブ」なCMS(コンテンツ管理システム)テーマを使用します。通常の状況では、Webサイトを携帯電話で表示できます。

ただし、悪魔は詳細にあり、そのようなテーマの多くは非常に重いフレームワークを使用しているため、特にモバイルの場合はWebサイトの速度が低下し、モバイルテストではランクが低くなります。

次に、Googleと帯域幅があり、モバイルフレンドリーになるかどうかを確認するために、ウェブサイトをテストする方法を調べてみましょう。

教育バイアスが問題です

多くの学校はウェブデザインに重点を置いていますが、優れたウェブサイトを構築するには、デザインと同じかそれ以上に重要であることを忘れてください。

そして、多くの人々は技術的な複雑さよりも美学にのみ焦点を当てているので、開発コンポーネントはそこにある多くのウェブサイトワーカーから欠落しています。 私は無数の候補者に面接をしてきたので、ほとんどが私が成し遂げるために必要な種類の仕事を下回りました。 Webホスティングプロバイダーでさえも免除されていません。

私はWebホスティング会社の技術サポート分野で非常に友好的な同僚と話をしました、そして彼らは私が彼らと通信したことは「彼らの給与水準を上回っていた」(彼らの言葉を引用した)であることを認めるのに十分正直でした。 私は、1996年から現在まで(21年!)の長い困難な旅に沿って、多くの技術的な複雑さをトラブルシューティングして解決する必要がありました。

ウェブサイトは本当にモバイルフレンドリーですか?

モバイルフレンドリー(レスポンシブ)テーマを自動的に機能させるのは簡単です。 多くの人が気付いていないのは、ウェブサイトがスマートフォンと視覚的に互換性があるだけでなく、帯域幅にも対応している必要があることです。つまり、実際には3Gまたは4G接続のモバイルで十分高速にロードされます。

あなたのウェブサイトをテストする無料で簡単な方法は、検索エンジンの王が作成したまさにそのブラウザを使用することです– Google Chrome ブラウザ。

ブラウザの下で 開発者ツール オプション、選択 ネットワークおよび スロットル オプションを選択し、「良い3G」(先進国のこの地域の多くのスマートフォンユーザーにとっては良い見積もり)、そして「キャッシュを無効にする"。

画面の下部に、3つの読み取り値が表示されます。

  • リクエスト,
  • (データ) 転送されたおよび
  • 仕上げ (ページを完全にロードする時間)。

リクエストが少ないほど、転送されるデータは小さく、完了(ページを完全にロードする時間)が短いほど、モバイル帯域幅の点でWebサイトのモバイル対応度が高くなります。

たとえば、当社のWebサイトは23のリクエストを作成し、サイズは640kBで、モバイル6.6G接続で3秒で完全にロードされます。

20170423_chrome3g_mb1

Chromeネットワークスロットリングテスト–独自のウェブサイト

以下は、79件のリクエストを作成し、サイズがなんと1.5 MBで、モバイル9.81G接続で3秒でロードされるWebデザイン代理店のページの例です。

20170423_chrome3g_webdevcd1

Chromeネットワークスロットルテスト–ウェブデザイン代理店

これは、このページで50の製品選択をホストし、70のリクエストを行い、サイズが1.1 MB(50の製品のため)であり、ロードが9.76秒で完了するeコマースWebストアです。

20170423_chrome3g_ecommepshub1

Chromeネットワークスロットルテスト–私たちが開発したeコマースサイト

これは、244リクエスト、サイズが6.7 MBで、39.91秒でロードが完了する、別の会社のeコマースWebストアです。 モバイルユーザーにとっては非常に不親切であり、直帰率は高くなります。 よりスマートな設計で各ページのリクエスト数を減らし、それによって合計ページサイズとその読み込み時間を減らすほうが賢明だったでしょう。

20170423_chrome3g_ecommchallgr1

Chromeネットワークスロットリングテスト–大規模なローカルeコマースサイト

モバイルとそれに対応する帯域幅に対するWebサイトの親和性を測定できますが、これらのパフォーマンスを決定するものは何ですか? 少し調べてみましょう。

サーバー管理とセキュリティのスキルは不可欠です

一般的なCMS Webサイトの場合、一般的なWebデザイナーは、WordPress部分だけで、テーマ、プラグイン、コンテンツ(テキスト、画像、ビデオやその他のコンテンツへのリンク)をいじります。 それは実際にはロケット科学ではなく、それでも多くのWebデザイナーはWordPressサイトを適切に保護するという重要な要素で失敗しています。

私は1996年からセキュリティプラクティショナーの特権を持ち、セキュリティプログラミングを行っており、少なくとも何をする必要があるかを理解するために戦略的レベルでコンサルティングを行ってきました。 しかし、多くの若いデザイナーはこの在職期間や知識を持っていません。 WordPressセキュリティプラグインの場合、設定を誤るとWebサイトがダウンし(500禁止エラー)、正当なユーザーが完全にロックアウトされることもあります。 また、セキュリティの欠如は、頻繁なDDoS(分散型サービス拒否)とブルートフォース攻撃によって非常に簡単にWebサイトをダウンさせる可能性があります。 それは重要な要素であり、軽く扱われるべきではありません。

一部のWebデザイナーはサーバー管理に重点を置いていない(または専門知識がない)ため、 PageSpeedとYSlowのスコアこれらのパラメータの多くはサーバーでのみ構成できるため、モバイルパフォーマンスと同様です。

高品質のSEO(検索エンジン最適化)とコンテンツ最適化を備えた優れたWebサイトには、プログラミングとサーバー管理に関する知識が必要です。 アパッチ Webサーバーの構成/セキュリティ PHP スクリプト言語と SQL 微調整のためのデータベース管理 WordPress CMS。 これらの技術スキルは、プログラマーと開発者の領域です。

あなたのウェブサイトのパフォーマンスとセキュリティを助けるかもしれないが単なるデザイナーによって無視されるかもしれないいくつかの雑学はまたあなたのApacheウェブサーバーソフトウェア(または他の同等のウェブサーバーソフトウェア)、PHP、およびSQLのバージョンです。

たとえば、少なくともApache 2.4x、PHP 7、およびMariaDB 10を実行していますか? 繰り返しますが、これらはあなたのウェブサイトを正しく機能させるためにいくつかの微調整を必要とします。

GTmetrixが救いに

GTmetrix Webサイトの速度と最適化をチェックするための優れたテストプラットフォームです。 ウェブデザイナーまたは代理店を選択している場合は、GTmetrixをスキルのリトマステストとして使用してください。 優れた設計者または代理店は、少なくとも速度のためにWebサイトを最適化できなければなりません。

あなたが知る必要がある2つのスコアがあります、 ページスピードおよび YSlowのこれは、業界の専門家がWebサイトの速度と最適化を測定し、それに応じてWebサイトを改善する方法を見つけるための一般的な方法です。

より高いPageSpeedスコアを達成する方が簡単ですが、YSlowスコアははるかに厳格です。 PageSpeedの場合はB、YSlowの場合はDを獲得できます。 私の意見では、良いウェブサイトはPageSpeedの場合はA、YSlowの場合はB以上です。

あなたのウェブサイトのスコアは何ですか?

PageSpeedとYSlowのスコア以外に、GTmetrixから識別できるその他の重要な要素は次のとおりです。

1) 満載時間 – Webページの速度とサイズの真の目安です。遅延負荷」を使用して画像を非同期で読み込みますが、ユーザーはすべてを読み取るためにページ全体を読み込む必要があります。

2) 総ページサイズ –携帯電話には十分小さいですか? 遅いパブリックWifiまたは3GでWebページの帯域幅は使いやすいですか? これは、強迫観念ではなく正気が必要な場所です。 Webデザイナー(いくつかの大きな店を含む)の一般的な欠点の4,000つは、画像がWeb用に最適化されていないことです。 たとえば、印刷用のWebには、1,200ピクセル(幅)の画像は必要ありません。 最適な画像圧縮の1986ピクセル(幅)の画像で十分です。 また、「スケーリングされた画像」を提供します。これは、Webデザイナーからさらに要求されますが、PageSpeedとパフォーマンスに役立ちます。 私たちの人間の視覚はファジーロジックに基づいており、完全または高解像度を必要とせずに詳細を作成するために非常に洗練されていることに注意してください。 XNUMX年以来、インタラクティブメディアデザインのパイオニアとして、画像サイズを劇的に小さくし、Webサイトを軽量化するために使用できる驚くべきトリックがたくさんあると確信しています。

3) リクエスト –ページ全体のサービスを提供するための、さまざまなサイトおよびサーバーへのHTTPリクエストの数。 一部のサイトでは、何百ものサーバー要求を行っていますが、これは多すぎます。 CSS(カスケードスタイルシート)やJS(Javascript)などの正当なリクエストについては、可能であればそれらを組み合わせて縮小してください。 できる限り小さなCSSファイルとJSファイルをインライン化します。 不要なHTTP呼び出しは、Webサイトの使いやすさを低下させ、エラー率を高め、速度を低下させ、セキュリティとプライバシーの問題を引き起こす可能性があります。 このようなリクエストは、Cookieドメイン、広告プロバイダー、ビデオプラットフォーム、ソーシャルメディアプラットフォームなどでよく発生します。 リクエストは慎重に使用してください。 必要に応じて、最低の分母を選択し、リクエストを統合または合理化します。

4) キャッシング –サーバーレベルのキャッシュ以外に、ブラウザのキャッシュを利用して、ユーザーがコンテンツを自分のディスクにキャッシュできるようにすることもできます。 これにより、訪問者がコンテンツの一部をキャッシュしていたため、訪問者が戻ってきたときのロード時間が短縮されます。 これはサーバーのバックエンドで設定できます。 そして、あなたのウェブサイトで、良質のキャッシュプラグインを設定します。

5) GZip –圧縮されたコンテンツ、特にHTML、JS、CSSなどのテキストファイルを提供するようにサーバーを設定します。 一部のページは最大70%圧縮でき、全体的な読み込み時間を短縮します。

6) キープアライブ –持続的なHTTP接続を有効にするようにApacheを設定して、同じ接続が同期リクエストを送受信できるようにし、ユーザーの速度を向上させます。

7) ヘッダーを期限切れにする –サーバーまたはWebサイトレベルで構成できるさらに別のサーバーレベルの構成。 ほとんどのコンテンツは指定された有効期限ヘッダーを持つことができ、テキストなどの一時的なコンテンツは有効期限を短くできますが、画像、ビデオ、ドキュメント、スクリプトは頻繁に変更される可能性が低いため、有効期限を長くできます。 警告はいくつかの外部スクリプト(Googleのスクリプトなど)に関するものです。これは、サーバーレベルの制御ができないため、有効期限ヘッダーを指定できないためです。

以下はGTmetrixスコアの例で、PageSpeedとYSlowの両方でAを示し、非常に短い完全ロード時間(1.8s)、小さい合計ページサイズ(693kB)、および22リクエストを示しています。

20170423_gtmetrix_mb1

GTmetrixスコア–弊社のWebサイト

これは、PageSpeedとYSlowのE、フルロード時間7秒、合計ページサイズ2.22 MB、驚異的な170リクエストのWebホスティングプロバイダーの例です。

20170422_gtmetrix_sgwebhost1

GTmetrixスコア–大規模なWebホスト

これは、PageSpeedにA、YSlowにCのWebデザイン代理店の例です。フルロード時間は23.9秒で、ページサイズは2.66MBで、リクエスト数は52です。

20170422_gtmetrix_sgwebdesign1

GTmetrixスコア–ウェブデザイン代理店

CDNブースト

PageSpeedのAスコアを有効にするために高品質の構成を行った場合は完全に必要ではありませんが、コンテンツ配信ネットワーク(CDN)は追加のブーストを追加できます。 YSlowはCDNに値を付加するため、CDNを実行しない場合、YSlowスコアは減少します。 無料のCDNが有料の専用CDNほど効果的に機能することはないため、さまざまなCDNが存在し、可能な限り、優れたCDNにSPENDします。 世界には無料の昼食はありません。

だから、もしあなたがウェブサイトを持っているなら、私は今それをGTmetrixとGoogle Chromeに対してテストして、何が改善できるかを理解することを勧めます。 スコアがひどくて不安定な場合でも、サーバーバックエンドには実績を上げるための実証済みのテクニックがあるため、心配しないでください。 公園を散歩するのは簡単ではありませんが、スコアを上げてSEOのペナルティを減らすため、その価値はあります。 また、ウェブサイトをまだ持っておらず、潜在的なウェブデザイナーや代理店と話している場合は、GTmetrixとGoogle Chromeに対して独自のウェブサイトをテストしてください。 次に、あなたが前進するのを助けるために適切な人を見つけます。

Dr Seamus Phan McGallen&BoldenのCTOおよびコンテンツ責任者です。 彼は技術、戦略、ブランディング、マーケティング、リーダーシップトレーニング、危機管理の専門家です。 この記事は彼に同時に現れるかもしれません ブログ。 接続する LinkedIn。 ©1984-2020 Seamus Phan 他 全著作権所有。