McGallen & Bolden アジア

ウェブサイトの最適化に対するインサイダーの秘密

手のひらに現代のスマートフォン

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

Webデザインの誤り

一部のクライアントにとって、彼らが気にするのは「きれいな」ウェブサイトだけです。 彼らは、フルスクリーン画像、頑丈なビデオ、あらゆる種類の派手なスクリプトを備えた派手なブリンブリンを望んでいます。 これらのクライアントにとって、彼らは顧客や訪問者にこのようにウェブサイトを好むという誤った考えを持っています。 残念ながら、それは、ウェブサイトが実際にどのように機能するかを説明するのに時間を費やすことができないか、よく知らないか、恐れすぎている一部のエージェンシーやウェブデザイナーによってまだ支持されている誤謬です。

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

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

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

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

あなたのウェブサイトが公共のWifiまたはモバイルで非常にゆっくりとロードされている場合、それらは先に進みます(「直帰率")。あなたのウェブサイトが重くて遅い場合、訪問者は数秒待って、他の場所をクリックします。あなたは新しい見込み客を引き込む唯一の機会を失っただけです。

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

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

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

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

教育バイアスが問題です

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

そして、多くの人々は技術的な複雑さよりも美学にのみ焦点を当てているので、開発コンポーネントはそこにある多くのウェブサイトワーカーから欠落しています。 私は無数の候補者に面接をしてきたので、ほとんどが私が成し遂げるために必要な種類の仕事を下回りました。 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サイトの親和性を測定できますが、これらのパフォーマンスを決定するものは何ですか? 少し調べてみましょう。

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

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

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

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

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

Webサイトのパフォーマンスとセキュリティに役立つ可能性があるが、単なる設計者には無視される可能性のあるいくつかの雑学は、Apache Webサーバーソフトウェア(または他の同等のWebサーバーソフトウェア)、PHP、およびSQLのバージョンでもあります。

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

GTmetrixが救いに

GTmetrix は、Webサイトの速度と最適化を確認するための優れたテストプラットフォームです。 Webデザイナーまたは代理店を選択する場合は、GTmetrixをスキルのリトマス試験として使用してください。 優れたデザイナーや代理店は、少なくともウェブサイトの速度を最適化できる必要があります。

あなたが知る必要がある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年以来のインタラクティブメディアデザインのパイオニアとして、画像サイズを劇的に縮小し、ウェブサイトを軽量化するために採用できる信じられないほどのトリックがたくさんあることを保証します。

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スコア-私たち自身のウェブサイト

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

20170422_gtmetrix_sgwebhost1
GTmetrixスコア-大規模なウェブホスト

これは、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に費やしてください。 世界には無料のランチはありません。

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

ウェブサイトの最適化に対するインサイダーの秘密
トップにスクロール