ホームページ » ウェブデザイン » ウェブ最適化のための究極のガイド（Tips＆Best Practices）

    ウェブ最適化のための究極のガイド（Tips＆Best Practices）

    Web最適化 Webの開発と保守には欠かせないものですが、Webマスターからは見過ごされがちです。あなたが節約できるお金と、それが適切に行われたときにそれがどのようにあなたの読者とトラフィックを増やすのに役立つ可能性があるかを考えてください。.

    これまでにWebサイト（またはブログ）に対して最適化を行っていない場合、またはサイトの高速化にどのように役立つかについて興味がある場合は、まとめた最適化のヒントの一覧をご覧ください。.

    読みやすくするために、3つのセクションに分割しました。 サーバー側の最適化, 資産の最適化 （CSS、Javascript、画像などのWebコンポーネントが含まれます） プラットフォーム, 私達が焦点を合わせるところ WordPressの最適化. 最後のセクションでは、役に立つと思われるリンクをいくつか紹介します。ジャンプ後の全リスト.

    最適化：サーバーサイド

    1. まともなWebホストを選択してください

      あなたのWebホスティングアカウントはあなたが実行しようとしている最適化と直接の関係を持っていません、しかし我々は最初にあなたの注意を引くことに決めたので重要な正しいWebホスティングアカウントを選びました。ホスティングアカウントは、セキュリティ、アクセシビリティ（cPanel、FTP、SSH）、サーバーの安定性、価格、そして顧客サポートのすべてにおいて重要な役割を果たす、Webサイト/ブログの基盤です。あなたはあなたが良い手にあることを確認する必要があります.

      推奨読書：Webホストの選び方 によって wikiHow あなたが任意のWebホスティングアカウントを購入する前にあなたが知っておくべきステップとヒントを提供する素晴らしい記事です。.

    2. 資産を別にホストする

      資産について言及するとき、私たちは以下のようなWebコンポーネントを意味しました。 画像 そして 静的スクリプト サーバーサイドの処理は必要ありません。これらにはWebグラフィック、画像、Javascript、Cascading Style Sheets（CSS）などが含まれます。アセットを個別にホスティングすることは必須ではありませんが、ブログのトラフィックが急増しているときの実装ではサーバーの安定性に関して多大な結果が得られています。.

      おすすめ読書： Carpool車線での並列ダウンロードの最大化.

    3. GZipによる圧縮

      つまり、HTTPリクエストが行われるたびに、コンテンツはサーバー側からクライアント側（その逆）に移動します。コンテンツを送信用に圧縮すると、各要求の処理に必要な時間が大幅に短縮されます。.

      GZip これを行うための最良の方法の1つであり、使用しているサーバーの種類によって異なります。例えば, Apache 1.3 mod_zipを使用します, Apache 2.x mod_deflateを使います。 Nginx. サーバーサイドの圧縮について理解を深めるための、本当によい記事がいくつかあります。

      • Apacheファイル圧縮を有効にしてWebサイトを高速化する
      • mod_gzipとApacheを使用してWeb出力を圧縮する
      • GZIP圧縮でサイトを最適化する方法
      • ASP用のサーバーサイド圧縮

    4. リダイレクトを最小限に抑える

      ウェブマスターは常にURLリダイレクトを行います（JavascriptまたはMETAリダイレクトのどちらでも）。場合によっては、古いページから新しいページにユーザーを誘導したり、単に正しいページにユーザーを誘導したりすることが目的です。各リダイレクトは、追加のHTTP要求とRTT（往復時間）を作成します。リダイレクトが多いほど、ユーザーは目的のページにアクセスするのが遅くなります。.

      おすすめ読書： リダイレクトを避ける Google Codeによると、あなたはその問題についての良い概観を得ることができます。記事はまたサービング速度を高めるためにリダイレクションを最小にするためにある実用的な方法を推薦します.

    5. DNSルックアップを減らす

      による Yahoo!開発者ネットワークブログ, DNS（Domain Name System）が特定のホスト名またはドメイン名のIPアドレスを解決するのに約20〜120ミリ秒かかり、ブラウザはプロセスが正しく完了するまで何もできません。.

      著者 スティーブスーダーズ これらのコンポーネントを2つ以上4つ以下のホスト名に分割することでDNS検索を減らし、高度な並列ダウンロードを可能にすることを提案しました。. 続きを読む 記事に.

    最適化：資産（CSS、Javascript、画像）

    1. 複数のJavascriptを1つに結合する

      での人々 rakaz.nl 次のように複数のJavascriptを組み合わせる方法を共有します。

       http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http：// www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js

      URLを次のように変更して単一ファイルにします。

       http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js

      .htaccessを操作してPHPを使用する. ここをクリック もっと読む.

    2. JavascriptとCSSを圧縮

      縮小する 複数のCSSファイルとJavascriptファイルを組み合わせ、それらのコンテンツを圧縮し（つまり、不要な空白やコメントを削除し）、HTTPエンコーディング（gzip / deflate）と最適なクライアントサイドキャッシュを可能にするヘッダーを使用して結果を提供できるPHP5アプリです。.

      それらをオンラインで圧縮する!JavascriptとCSSファイルをオンラインで手動で圧縮できるWebサービスもいくつかあります。ここに私達が知るようになる少数はある：

      • コンプレッサー （ジャバスクリプト, CSS）
      • javascriptcompressor.com （ジャバスクリプト）
      • jscompress.com （ジャバスクリプト）
      • CleanCSS （CSS）
      • CSSオプティマイザ （CSS）

    3. ヘッダーの有効期限/キャッシュをカスタマイズする

      クレジット：httpwatch

      カスタマイズされたExpiryヘッダを使用することで、画像、静的ファイル、CSS、JavascriptなどのWebコンポーネントは、同じユーザが2回目にページをリロードしたときに不要なHTTPリクエストをスキップしました。それは必要とされる帯域幅を減らし、ページをより早く提供するのを明確に助けます。.

      おすすめの読み物：

      • Yahoo!開発者ネットワークブログ - Expiresヘッダを追加する
      • Apache 1.3で画像に有効期限切れヘッダを追加する方法
      • HTTPキャッシング
      • Web作成者とWebマスターのためのキャッシングチュートリアル

    4. 資産をオフロードする

      オフロードとは、WebサイトがホストされているメインサーバーからJavascript、画像、CSS、および静的ファイルを分離し、それらを別のサーバーに配置するか、他のWebサービスに依存することを意味します。ここで大幅な改善が見られました ホンキート 利用可能な他のWebサービスにアセットをオフロードすることによって、サーバーは主にPHP処理を行うようにします。オフロードのためのオンラインサービスのいくつかの提案はここにあります：

      • 画像：Flickr、Smugmug、有料ホスティング*
      • ジャバスクリプト：Google Ajax Library、Google App Engine、有料ホスティング*
      • Webフォームs：WuFoo、FormStack
      • RSS：Google Feedburner
      • 調査と世論調査：SurveyMonkey、PollDaddy

      *有料ホスティング - 有料サービスの信頼性と安定性は常に優れています。あなたのウェブサイトが絶えず資産を要求しているならば、あなたはそれらが良い手にあることを確認する必要があります。 Amazon S3とCloud Frontをお勧めします.

    5. Web画像の処理

      画像はあなたのウェブサイトの重要な部分です。しかし、それらが適切に最適化されていないと、日々の負担となり、予測できないほど大量の帯域幅を使用することになりかねません。ここにあるいくつかの 画像を最適化するためのベストプラクティス：

      • PNG画像を最適化するSmashing Magazineの人々は、PNG画像を最適化するのに役立つかもしれないいくつかの巧妙なテクニックを説明しています.
      • Web用に最適化する - 知っておくべきこと（フォーマット）Jpeg、GIF、PNG、およびWeb用に画像を保存する方法の詳細.
      • 画像を拡大縮小しない常に挿入を練習する 幅 そして 高さ 画像ごとに。あなたがウェブ上でより小さなバージョンを必要とするという理由だけで画像を縮小しないでください. 例えば：Webサイト用に200×200ピクセルの画像を強制的に50×50ピクセルに拡大縮小しないでください。 幅 そして 高さ. 代わりに50×50ピクセルを入手.

      Webサービスとツールによる最適化. 良いニュースは、画像を最適化するためにPhotoshopの専門家になる必要はないということです。あなたが仕事をするのを助けるためにたくさんのウェブサービスとツールがあります.

      • Smush.itおそらく画像を最適化するための最も効率的なオンラインツールの一つです。それのためのWordPressプラグインさえあります!
      • JPEG＆PNGストリッパーJPG / JPEG / JFIF＆PNGファイルから不要なメタデータ（ジャンク）を削除、駆除、削除するためのWindowsツール.
      • オンライン画像オプティマイザーあなたはあなたのGIF、アニメーションGIF、JPG、PNGを簡単に最適化することができます、それでそれらはあなたのサイトにできるだけ速くロードします、ダイナミックドライブによって。
      • SuperGIFGIF画像やアニメーションを簡単に小さくします.
      • こちらがもっと.

    6. CSSの取り扱い

      現代のWebサイトでは、スタイルの基盤としてCSSを使用しています。 CSSは変更に対して大きな柔軟性を与えるだけでなく、必要とされるコードの点でもそれほど劣りません。ただし、コードが適切にコーディングされていないと、問題が発生する可能性があります。ここにいくつかのチェックリスト、またはCSSが正しく最適化されていることを確認するためのガイドがあります。

      • あなたの要素の子供を子孫と一致させ続けるマークアップをCSSセレクタできれいに保つ方法.
      • CSSを短くするそれらが同じスタイルを与えるとき、コードはそれらがより短いほど良いです。これが CSS速記ガイド あなたはおそらく必要でしょう.
      • CSSスプライトを使用CSSスプライト技術は、1つの画像ファイルで複数の（またはすべての）画像を結合してCSSでの出力を制御することによって、ページが読み込まれるたびにHTTPリクエストを削減します。 背景位置 属性。 CSSスプライトを作成するための便利なガイドとテクニックは次のとおりです。
        • オンラインCSSスプライトジェネレータ
        • 最高のオンラインとオフラインのCSSスプライトジェネレータ
      • すべての宣言を一度だけ使うあなたのCSSファイルを最適化しようとするとき、あなたが使うことができる最も強力な手段の1つはあらゆる宣言を一度だけ使うことです.
      • CSSファイルの量を減らすその理由は単純です、あなたがより多くのCSSファイルを持っているなら、あなたはそれがウェブページが要求されているときそれがしなければならないであろうより多くのHTTP要求を持ちます。たとえば、次のような複数のCSSファイルがある代わりに、

        それらを1つのCSSにまとめることができます。

      おすすめの読み物：

      • あなたのCSSファイルをチェックし、きれいにし、そして最適化するための便利なツールCSSコーディングの知識がまったくなくても、CSSコードを最適化するために使用できる便利なツールのいくつか.
      • クリーンで最適化されたCSSコードの7つの原則最適化はファイルサイズを最小化するだけではなく、整理され、整理され、効率的であることも意味します。.
      • CSSを最適化するためのベストプラクティスこの記事は、実際の最適化のヒントではなく、学術的な演習のようなものです。.

    WordPressのための最適化

    時折、私たちはWordPressブログのパフォーマンスを監視、ベンチマーク、分析します。このサイトの処理が遅い場合は、その理由を知る必要があります。これまでに行った基本的な変更をいくつか紹介します。これにより、WordPressブログの速度が大幅に向上します。.

    1. Worpressブログをキャッシュする

      WPキャッシュ あなたのサイトをもっと速くそして敏感にするために非常に効率的なWordPressページキャッシングシステムです。おすすめです WPスーパーキャッシュ これは前述のプラグインから強化されても素晴らしい仕事をします.

    2. 未使用のプラグインを無効にして削除する

      ブログの読み込みが非常に遅いことに気付いたら、たくさんのプラグインがインストールされているかどうかを確認してください。彼らは犯人かもしれません.

    3. 不要なPHPタグを削除する

      テーマのソースコードを調べると、次のようなたくさんのタグがあります。

      それらは、サーバーに負荷をかけないテキストコンテンツとほぼ置き換えることができます。チェックアウト マイケルマーティンの あなたのWordPress Bloから削除する13のタグg

    おすすめの読み物：

    • WordPressをスピードアップする3つの最も簡単な方法John Pozadzidesが、Diggのトラフィック急上昇を通じて、彼のブログがスムーズに進行していることを説明します。.
    • 13最高のWordPressスピードヒントとMAXパフォーマンスのトリック あなたのWordPressサイトがうまく機能していないことに気付いた場合、試してみるべきいくつかのことがあります。.
    • 40ワードプレスの最適化のヒントスライドの最適化のヒント40分で40のヒント.

    少なくとも最後のではなく…

    以下は、Webの最適化を支援するために、より広い視点とより優れた分析を提供する便利なWebサービスとツールです。.

    • Yahoo! YSlow

      YSlow Webページを分析し、高性能Webページの一連のルールに基づいてWebページのパフォーマンスを向上させる方法を提案します。それはあなたがウェブサイトがより速くロードするために何がなされる必要があるかについてあなたに良い考えを与えます.

      （Firebugが必要です）

    • PageSpeed

      に似ている Yahoo! YSlow, グーグル ページスピード Webサイトのパフォーマンスとその改善方法を評価するためのオープンソースのFirebugアドオンです。 （Firebugが必要です）

    • Pingdomツール

      Pingdomツール すべてのオブジェクト（画像、CSS、JavaScript、RSS、Flash、フレーム/インラインフレーム）を含むWebサイトを完全に読み込み、オブジェクトの総数、合計読み込み時間、すべてのサイズを含むサイズなど、読み込まれたページに関する一般的な統計を表示します。オブジェクト.

    おすすめの読み物：ここでチェックアウトする価値があるより多くのヒントやツール.

    • Googleウェブオプティマイザー
    • より速いWebページを開発するのに役立つ15のツール
    • あなたのウェブサイトをスピードアップし、あなたのコードを最適化するための15以上のヒント!
    Office 2013のインストールに関する問題の究極のトラブルシューティングガイド
    Ultimate Windows 8 WiFiトラブルシューティングガイド
    MacでWindowsを実行するための究極のガイド
    次の記事
    WordPress Postのリビジョンへの究極のガイド
    前の記事
    あなたの最初のオンラインショップをセットアップするための究極のガイド