あなたのイメージの重いウェブサイトをスピードアップする簡単なステップ
公開: 2019-09-20サイトの所有者は、最終的にダウンロード速度を上げたいと思うかもしれません。 これにより、検索結果のランキングが上がります。 その上、サイト訪問者が彼らの行動へのより速い反応を得ることによってそれで働くことはより快適です。
迅速で簡単な解決策を求めて、サイト所有者は膨大な数のプラグインをインストールします。プラグインはリソースを消費し、作業を遅くするだけです。 最適化プラグインに反対するものは何もありませんが、それらは、その作業の原則を十分に理解して使用する必要があります。
さらに、管理を経験したことがないサイト所有者は、最適化について誤解していることがよくあります。 彼らの理解では、最適化とは、どんな犠牲を払ってもスクリプトを加速することです。 最適化のタスクは、リソースの最適な価格でサイトの最適な速度を生成することです。 したがって、すべてのサイトに普遍的な指示があるわけではありません。
あなたのウェブサイトを速くすることはどんな資源所有者またはウェブマスターにとっても緊急の仕事です。 結局のところ、ページの読み込み速度は、高品質のコンテンツと美しいグラフィックデザインとともに、Webリソースの成功にとって最も重要な要素の1つです。
読み込みが遅いと、ユーザーを失う可能性が高くなります。 特に訪問者がモバイルデバイスから来る場合。 経験の浅いユーザーでも実際に実装できる、サイトの読み込みを高速化するための簡単な推奨事項は、トラフィック損失の可能性を最小限に抑えるのに役立ちます。
1. HTMLコードとCSSファイル、JSファイルを最適化する
ダウンロードの最適化は、サイトにアクセスするときにユーザーのブラウザに送信されるコードの「清潔さ」を気にせずに不可能です。 ソースコード内の多数の文字は読み込み速度に大きく影響するため、その簡潔さが重要な成功要因です。
不要な文字、マークアップ要素、およびソースコードタグを削除します。 プロセスを自動化すると、サイトのHTMLコードの最初と最後に小さな挿入を追加するのに役立ちます。
HTMLコンテンツをバッファリングするこの方法は非常に便利ですが、ランダムアクセスメモリに追加の負荷がかかる可能性があります。
同じタイプのCSSファイルとJSファイルをグループ化します。 JCH Optimize、Cloudflare、Minifyなどの無料のPHPアプリケーションは、別のディレクトリにコピーされ、すべてのサイトファイルを通過するため、要素を組み合わせるのに役立ちます。
2.余分なHTTPリクエストを削除します
ページ要素（javascript、画像、CSS、およびフラッシュファイル）をアップロードすると、サイトをロードするときにシステムリソースの大部分を占めます。 このような要素に対するHTTPリクエストは、サイトの速度を著しく低下させます。
「余分な」リクエストを回避するには、ページのコンポーネントの数を減らす必要があります。 これにより、サーバー呼び出しが比例して減少し、サイトの読み込みが高速化されます。
これはいくつかの方法で行うことができます。
- 複数の画像を1つのグラフィックファイル（CSSスプライト）に結合します。
- ページスタイルシートでインライン画像（インライン画像）を使用します。
- 1ページの複数のCSSファイルまたはスクリプトが1つのファイルにマージされます。
- シナリオとプラグインの数を最小限に抑えます。
3.JavaScriptとCSSを正しい順序で配置します
CSSファイルをページコードの上部に配置し、JavaScriptを下部に配置することをお勧めします。 この最適化の後、静的コンテンツが最初に読み込まれ、次に動的グラフィックのみが読み込まれます。
ダウンロードするためにより多くのリソースを必要とするFlash要素またはアニメーションは、最初の数秒からサイトの印象を損なうことはありません。 これにより、コンテンツのスムーズなダウンロードが保証され、リソースの美的魅力が高まります。
4.外部スクリプトの数を減らします
外部スクリプトは、外部リンクを介してアクセスされるコード（テキスト）の断片です。 リンクは多くの異なるサーバーへの追加のリクエストを作成し、最終的にサイトの速度を低下させます。 これを回避するには、主にページのソースコードの構造に埋め込まれたローカルスクリプトを使用することをお勧めします。
もちろん、ローカルスクリプトに焦点を合わせると、サイトの外観と機能に一定の制限が生じます。 しかし、結果として得られるダウンロード速度の利点は、これらの「犠牲」の価値があります。
5.フラッシュを有効にします
このPHP機能を使用すると、ユーザーのサーバーがリソースから情報をロードするまで待つのではなく、部分的に出力することができます。 データがブラウザに送信されている間、開いているウィンドウは空のままではなく、サイトのロード可能な要素でスムーズに埋められます。 このような高速化は、複雑なインターフェイスとトラフィックの多いWebリソースに特に必要です。
フラッシュ関数は、ページのソースコードの先頭、先頭の直後に配置することをお勧めします。 ヘッダーから、HTMLコンテンツがより速く開き、CSS要素とJavaScript要素の並列読み込みを有効にすることもできます。
6.ページをキャッシュします
キャッシュは、サイトのページ（フラッシュ、グラフィックス、JavaScript、CSS）からユーザーのブラウザーにいくつかの情報を保存します。 次回の実行時に、これらのファイルはブラウザから即座にダウンロードされ、サイトの速度が向上します。
HTMLコードにexpiresヘッダーを追加することで、キャッシュを有効にできます。 WordPressサイトは、W3 Total Cache、Cache Enabler、Zen Cachなど、無料または部分的に無料の機能を備えたプラグインをインストールすることで簡単にキャッシュできます。
新しいサイトの場合は、起動の準備が完全に整った後でのみキャッシュを使用することをお勧めします。 開発中にこの機能を有効にすると、それ以上の変更がサイトに正しく表示されない場合があります。
7.CDNを使用する
コンテンツ配信ネットワーク–コンテンツが訪問者に転送される速度を上げるために、世界中のデータセンターに散在するサーバーのチェーン。 訪問者がCDNサーバーから地理的に近いほど、サイトからのデータパケットの送信速度が速くなります。
CDNの使用は、主な対象者が物理サーバーから非常に離れているコンテンツや高負荷のポータルにとって特に重要です。 このサービスは、海外サイトからのダウンロードの待ち時間を最小限に抑え、ローカル検索結果でのランキングの向上に貢献します。 結局のところ、コンテンツは彼の国のユーザーに最も近いサーバーストレージからダウンロードされます。
8.グラフィックとビデオを最適化する
ファイル形式は訪問者に情報が表示される速度に直接影響するため、正しいグラフィックとビデオ形式を選択する必要があります。
さまざまなWebコンテンツに推奨される形式：
- SVG –ベクターロゴとシンプルなインターフェース要素用。
- PNG –スキームおよび非ベクターロゴ用。
- JPG –写真および画像用。
- MPEG4 –ビデオおよびアニメーション用。
ビデオとアニメーションについても、比較的新しいWEBMフォーマットが利用可能です。 ほとんどの場合、同じ品質でより小さなビデオサイズを提供します。 ただし、フォームのブラウザサポートは制限されています（たとえば、macOS / iOS Safariブラウザではサポートされていません）。 したがって、優先ビデオソースとしてWEBMファイルを使用し、代替ソースとしてMPEG4をインストールすることをお勧めします。 共有が受け入れられない、または不便な場合は、MPEG4のみを使用することもできます。
これとは別に、ベクトル形式（SVG）を使用すると、グラフィックの品質を損なうことなくスケーリングできることに注意してください。
画像最適化の段階
WordPressやJoomlaなどの多くの人気のあるCMSには、オリジナルの画像を最適化するためのプラグインが組み込まれています。 ただし、この方法では追加の負荷が発生し、サイトの速度が低下する可能性があります。 ページが読み込まれるたびに、ブラウザは最初にソースコードにアクセスし、次にその場で画像のサイズを変更します。
画像をロードする際の速度の低下を回避するには、プレビュー（Mac）やMicrosoftペイント（Windows）などのOSに組み込まれているグラフィックエディタ、および同様の機能を備えたオンラインサービスが役立ちます。 それらを操作するには、グラフィックを操作するための最小限のスキルが必要です。
画像サイズを最適化した後でも、その「重み」は通常、最適とはほど遠いものです。 ImageResizeやTinyPNGなどの便利で無料のサービスは、画質を損なうことなくサイズを縮小するのに役立ちます。 ここでのプロセスのほとんどは自動化されています。 ユーザーは、ファイルをアップロードして、最適な画像サイズに圧縮済みでダウンロードするだけで済みます。
9.Gzipファイル圧縮を適用します
Gzipは、サイトファイルを圧縮してチャネルリソースを節約し、読み込みを高速化する簡単な方法です。 Gzipを使用すると、ファイルはブラウザがより高速にダウンロードできるアーカイブに圧縮され、コンテンツを解凍して表示できます。
Gzipの使用を有効にするのは非常に簡単です。.htaccessファイルに数行のコードを追加するだけです。 たとえば、Apache Webサーバーを使用している場合、Webマスターはmod_gzipモジュールを使用できます。Gzipをアクティブ化するには、この場合、そのようなコードを.htaccessに追加する必要があります。
Gzipファイルの圧縮は、ブラウザーからサーバーへの要求の数を減らすために行われます。 つまり、このテクノロジーはファイルの初期の重みを70％に減らし、ダウンロードを高速化します。
次のコードスニペットを「.htaccess」Webサーバー構成ファイルに追加します。
Apacheサーバー上
# BEGIN GZIP COMPRESSION <IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule> # END GZIP COMPRESSION
Nginxサーバー上
gzip on; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript; gzip_disable "MSIE [1-6].(?!.*SV1)"; gzip_vary on;
10.ホスティングを変更します
ダウンロードを高速化するための最も基本的な方法は、ホスティングプロバイダーを変更することです。 リソース割り当てを節約すると、サービスの品質が大幅に低下することが多く、ブドウの木のサイトを高速化するすべての試みが損なわれます。
コンテンツ、コード、プラグインを操作しても結果が得られない場合は、サイトにもっと適切な「ホーム」を選択することを検討してください。 高可用性と思慮深い技術サポートを備えた高品質のホスティングでは、インターネットリソースは、作業速度を上げるための強力な推進力を受け取ります。 そして、これは感謝する聴衆に感謝されるでしょう。
最も重要なことは…
2〜3秒以内にサイトにアクセスするように努力する必要があります。 サイトが2秒または3秒開いているかどうかは関係ありませんが、それ以上ある場合は、サイトの負荷を加速することを検討する理由です。
また、ページの読み込み速度には2つのパラメータがあることを理解する必要があります。
1つ目は、コンテンツが表示される速度です（この時点で、ページは既に開いてユーザーに表示されていますが、すべての静的ファイルと非同期スクリプトが接続されるまで、透明なページインジケーターが表示されたままです）。
さらに、2つ目は、接続する必要のあるものがすべて接続されたときの、実際のページ形成の速度です。 最初のパラメータに焦点を合わせる必要があります。つまり、サイトのレイアウトが表示されるまでに3秒以上経過する必要はありません。
結論
サイトの読み込み速度などは無視できません。 最初の数秒から、訪問者にとって快適な環境を作り出すのは彼でした。 ユーザーが目的のコンテンツをすばやく取得するほど、リソースのポジティブなイメージが形成され、リソースへの忠誠心が構築される可能性が高くなります。