Getting a website up is no longer difficult, at least on the surface.少なくとも表面的には、ウェブサイトを立ち上げることはもはや難しくありません。 Anyone can claim to set up a website for you.誰でもあなたのためにウェブサイトをセットアップすると主張することができます。 But the secret about a high-performance website is what is done at the backend of the server level and are steeped in technical complexity that most web designers have no interest or knowledge of.しかし、高性能Webサイトの秘訣は、サーバーレベルのバックエンドで行われることであり、ほとんどのWebデザイナーが関心や知識を持たない技術的な複雑さに浸っています。 Let's explore some of these secrets that would propel your website skywards with better PageSpeed and YSlow scores (for better SEO), and especially for mobile users.特にモバイルユーザーの場合、PageSpeedとYSlowのスコアを向上させて(SEOを向上させるために)、Webサイトを空に向かって推進するこれらの秘密のいくつかを調べてみましょう。

Webデザインの誤り

To some clients, all they care about is a “pretty” website.一部のクライアントにとって、彼らが気にするのは「きれいな」ウェブサイトだけです。 They want flashy blings, with full-screen images, heavy-duty videos, and flashy scripts of all kinds.彼らは、フルスクリーンの画像、頑丈なビデオ、あらゆる種類の派手なスクリプトを備えた派手なブリンブリンを望んでいます。 To these clients, they have this mistaken notion that paying customers and visitors like websites this way.これらのクライアントにとって、彼らは顧客や訪問者にこのようにウェブサイトを好むという誤った考えを持っています。 Unfortunately, it is a fallacy that is still supported by some agencies and web designers who either do not know better, or are too afraid to spend time to explain how websites actually work.残念ながら、それは、ウェブサイトが実際にどのように機能するかを説明するのに時間を費やすことができないか、よく知らないか、恐れすぎている一部のエージェンシーやウェブデザイナーによってまだ支持されている誤謬です。

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

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

Googleは、関連性があり(「スパム」でいっぱいではない)、安全で(マルウェアやマルバタイジングがない)、高速で(最適化されたコンテンツ)、モバイルフレンドリーである場合にのみWebサイトのインデックスを作成します。 Failing any one of these criteria will penalize your website, and sinks is further and further behind in the Google index.これらの基準のいずれかを満たさない場合、Webサイトにペナルティが課せられ、シンクはGoogleインデックスでますます遅れています。

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

あなたのウェブサイトが公共のWifiまたはモバイルで非常にゆっくりとロードされている場合、それらは先に進みます(「直帰率「)。 If your website is heavy and slow, visitors will wait a few seconds, and click away elsewhere.あなたのウェブサイトが重くて遅い場合、訪問者は数秒待ってから他の場所をクリックします。 You have just lost the one and only opportunity to engage a new prospect.あなたは、新しい見込み客を引き込む唯一の機会を失いました。

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

Designing for mobile phones is also not as easy as it seems.携帯電話のデザインも思ったほど簡単ではありません。 Most web designers will use a CMS (content management system) theme that is “responsive”, and in usual circumstances, your website will be able to be viewed on a mobile phone.ほとんどのWebデザイナーは、「レスポンシブ」なCMS(コンテンツ管理システム)テーマを使用します。通常の状況では、Webサイトは携帯電話で表示できます。

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

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

教育バイアスが問題です

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

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

1996年から現在(21年!)までの長い困難な旅の中で、私は多くの技術的な複雑さを自分でトラブルシューティングして解決しなければなりませんでした。

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

It is easy to get a mobile friendly (responsive) theme automatically working.モバイルフレンドリー(レスポンシブ)テーマを自動的に機能させるのは簡単です。 What many people don't realize is that a website not only has to be visually compatible with a smartphone, it has to be bandwidth-compatible too – ie actually loading fast enough on a mobile on a 3G or maybe 4G connection.多くの人が気付いていないのは、ウェブサイトはスマートフォンと視覚的に互換性があるだけでなく、帯域幅にも互換性がある必要があるということです。つまり、実際にはXNUMXGまたはXNUMXG接続のモバイルで十分な速度で読み込まれます。

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

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

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

  • リクエスト,
  • (データ) 転送された
  • 終了 (ページを完全にロードする時間)。

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

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

20170423_chrome3g_mb1
Chromeネットワークスロットリングテスト–当社のWebサイト

以下は、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デザイナーまたは代理店を選択する場合は、GTmetrixをスキルのリトマス試験として使用してください。 優れたデザイナーや代理店は、少なくともウェブサイトの速度を最適化できる必要があります。

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

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

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

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

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

2) 総ページサイズ –携帯電話には十分小さいですか? Webデザイナー(一部の大規模なショップを含む)の一般的な失敗の3つは、画像がWeb用に最適化されていないことです。 4,000年以来のインタラクティブメディアデザインのパイオニアとして、画像サイズを劇的に縮小し、ウェブサイトを軽量化するために採用できる信じられないほどのトリックがたくさんあることを保証します。

3) リクエスト –ページ全体の提供を実現するためのさまざまなサイトおよびサーバーへのHTTP要求の数。 CSS(カスケードスタイルシート)やJS(Javascript)などの正当なリクエストの場合は、可能であればそれらを組み合わせて縮小します。 Inline small CSS and JS files whenever your can.可能な限り、小さなCSSファイルとJSファイルをインライン化します。 Unnecessary HTTP calls can reduce the usability of a website, increase error rates, reduce speed, and also raise security and privacy concerns.不必要なHTTP呼び出しは、Webサイトの使いやすさを低下させ、エラー率を高め、速度を低下させ、セキュリティとプライバシーの懸念を高める可能性があります。 Such requests often occur with cookie domains, advertising providers, video platforms, social media platforms, and so on.このようなリクエストは、Cookieドメイン、広告プロバイダー、ビデオプラットフォーム、ソーシャルメディアプラットフォームなどで頻繁に発生します。 Use requests judiciously.リクエストは慎重に使用してください。 If necessary, choose the lowest denominators and consolidate or streamline requests.必要に応じて、最小の分母を選択し、リクエストを統合または合理化します。

4) キャッシング –サーバーレベルのキャッシュ以外に、ブラウザのキャッシュを利用して、ユーザーが自分のディスクにコンテンツをキャッシュできるようにすることもできます。 This will reduce loading time when your visitors return, since they would have cached some of the content.これにより、訪問者がコンテンツの一部をキャッシュしてしまうため、訪問者が戻ってきたときの読み込み時間が短縮されます。 You can configure this at the server backend.これはサーバーバックエンドで構成できます。 And on your website, configure a good quality caching plugin.そして、あなたのウェブサイトで、高品質のキャッシュプラグインを設定します。

5) GZip –圧縮されたコンテンツ、特にHTML、JS、CSSなどのテキストファイルを提供するようにサーバーを構成します。 Some pages can be compressed by up to 70%, and will help with your overall load times.一部のページは最大XNUMX%圧縮でき、全体的な読み込み時間に役立ちます。

6) キープアライブ –同じ接続が同期要求を送受信できるように永続的なHTTP接続を有効にするようにApacheを構成し、ユーザーの速度を上げます。

7) ヘッダーを期限切れにする –サーバーまたはWebサイトレベルで構成できるさらに別のサーバーレベルの構成。 Most content can have a designated expire header, where transient content such as text can have a shorter expiry, while images, videos, documents, and scripts can have a longer expiry since they are less likely to change often.ほとんどのコンテンツには指定された有効期限ヘッダーを付けることができます。テキストなどの一時的なコンテンツの有効期限は短くなりますが、画像、動画、ドキュメント、スクリプトは頻繁に変更される可能性が低いため、有効期限が長くなります。 The caveat is with some external scripts (such as Google's scripts), since we won't have server-level control on those, and so we cannot designate expire headers to them.注意点は、いくつかの外部スクリプト(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スコアが低下します。 There are different CDNs out there, and as much as possible, SPEND on a good CDN since free CDNs will never perform as effectively as a paid dedicated CDN.そこにはさまざまなCDNがあり、無料のCDNは有料の専用CDNほど効果的に機能しないため、可能な限り、優れたCDNに費やしてください。 There is no free lunch in the world.世界には無料のランチはありません。

So, if you have a website, I suggest testing it against GTmetrix and Google Chrome right now, and get a sense of what can be improved.したがって、Webサイトをお持ちの場合は、今すぐGTmetrixおよびGoogle Chromeに対してテストし、何を改善できるかを理解することをお勧めします。 If the scores are abysmal and unsettling, don't worry, as there are proven techniques on your server back-end to get things right.スコアがひどく不安定な場合でも、心配しないでください。サーバーのバックエンドには、問題を解決するための実証済みの手法があります。 It won't be a short easy walk in the park, but it will be worth it as you get your scores up and reduce penalties on SEO.公園を散歩するのは簡単なことではありませんが、スコアを上げてSEOのペナルティを減らすので、それだけの価値はあります。 And if you haven't got a website yet, and are talking to potential web designers and agencies, test their own websites against GTmetrix and Google Chrome.また、まだWebサイトを持っておらず、潜在的なWebデザイナーや代理店と話している場合は、GTmetrixおよびGoogleChromeに対して独自のWebサイトをテストしてください。 Then find the right people to help you move forward.次に、前進するのに役立つ適切な人を見つけます。

著者について

上へスクロール