あなたのサイトを速く燃え上がらせる：パート1

公開: 2015-03-18

それは秘密ではありません。今日のWebユーザーはスピードを必要としています。インターネットとセルラー接続がどんどん速くなっているので、ユーザーはサイトがすぐに読み込まれることを期待しており、それらのページをすばやく提供するためにできることを行うのは開発者の仕事です。では、どのようにしてサイトを高速化するのでしょうか。 WordPressでビルドするときに具体的に行うべきことは次のとおりです。

まず最初に：サイトの速度をテストします

パフォーマンスは、フロントエンドとバックエンドの2つの主要なカテゴリに分類できます。バックエンドは、サーバーとページへのデータの入力方法に関連するものだと思います（テーマのPHPコードは「バックエンド」です）。フロントエンドは、すべてのアセット（CSS、JavaScript、画像など）とマークアップで構成されています。 Webブラウザーが読み取り、解釈するものはすべて「フロントエンド」です。私がパフォーマンスの観点からこの区別をしている理由は、何を最適化しているのか、そしてさらに重要なことに、どこを最も最適化する必要があるのかを知ることが良いからです。

サイトの速度をテストするには、WebPagetestとGooglePageSpeedInsightsを組み合わせて使用することをお勧めします。 WebPagetestを使用すると、サイトの読み込みにかかる実際の時間（秒単位）がわかり、サイトの読み込みが遅くなる原因がバックエンドなのかフロントエンドなのかを知るための優れた指標が得られます。 PageSpeed Insightsは、サイトがブラウザーによってどのようにレンダリングされるか、およびフロントエンドで何を改善できるかを確認するのに最適です。

この記事は完全にカスタマイズされたWordPressサイトに焦点を当てていることに注意してください。かさばるテーマと19のサードパーティプラグインを使用してサイトで速度テストを実行している場合（プラグインはフロントエンドとバックエンドの両方を遅くする可能性があります）、白紙の状態に到達し、プラグインを1つずつゆっくりとアクティブにしてそれらを見つけることから始めますそれは物事を遅くしています。

フロントエンドのパフォーマンス

WordPressテーマのアクセシビリティを今すぐ改善する方法

休暇中であっても、ウェブを使わない日はありません。私はあなたが関係することができるという野蛮な推測をするつもりです。ますます、インターネットは...

FastlyのチーフパフォーマンスオフィサーであるSteveSoudersによると、パフォーマンスの黄金の法則は、ページの合計読み込み時間の80〜90％がフロントエンドで構成されていることです（80/20の法則）。バックエンドの10〜20％は非常に重要ですが、購入できる最速のホストマネーを使用している場合でも、フロントエンドを最適化してユーザーがそれを認識できるようにしないと、サイトはその潜在能力を最大限に発揮できません。読み込みが速いです。フロントエンドの最適化に関しては、認識が重要です。ユーザーは、サイトの読み込みにかかる時間（秒単位）を気にしません。彼らが本当に気にかけているのは、どれだけ迅速にコンテンツを操作してコンテンツを表示したり、アクションを実行したりできるかということです。実際の読み込み時間について心配する必要はありませんが（そうする必要があります）、以下の手法に従うことで、サイトをできるだけ早く使用可能な状態にし、その後、ページを完全に読み込むことができます。すべての資産。

CSS

CSSをブラウザに配信する前に行う最も重要なことは、CSSを圧縮して、未使用のセレクタを削除することです。テーマを開発するときに優れた開発ワークフローを取得すると、特にSassのようなプリプロセッサを使用している場合、このプロセスは簡単になります。開発中にコマンドを実行するJavaScriptタスクランナーであるGruntを使用します。 grunt-contrib-sassと呼ばれるGruntのプラグインがあります。これは、すべてのSassファイルを1つにコンパイルし（つまり、Sassパーシャルを使用している場合）、それを最小化して圧縮します。その上にgrunt-contrib-watchプラグインを投入すると、ファイルを保存するたびにSassタスクが実行されます。簡単！最新かつ最高のCSS手法を使用していない場合でも、眠りにつくことはありませんが、CSSを作成するときは、重複や巨大なファイルサイズを避けるために、ある種の標準に従うようにしてください。

スタイルシートの準備ができたら、それをロードする最も簡単な（そしてはるかに標準的な）方法は、 <head> ;でそれを参照することです。このように、ブラウザはDOMの残りの部分が読み込まれる前に、それを読み込んで解析します。ただし、「重要な」スタイルが<head>にインライン化され、JavaScriptを使用して完全なスタイルシートが非同期にロードされる新しい手法があります。この手法を実際に使用するのは、サイトを1秒以内にロード（またはロードを認識）させようとしている場合だけですが、ワークフローに適合するかどうかを確認するのは素晴らしいことです。フィラメントグループには、この手法の使用に関する非常に広範な記事があります。

JavaScript

WordPressがMySQLをどのように使用するかを理解する

大まかに言えば、WordPressは2つのセグメントに分けることができます。WordPressサイトのルックアンドフィールを生成するロジックとテンプレートです。すべてのコンテンツとパワーを格納するMySQLデータベース...

JavaScriptを最適化するための黄金律は単純です。可能な限り少ないJavaScriptファイルを提供し、縮小して連結します。サードパーティのWordPressプラグインは、ブロックするJavaScriptファイルを最小限に抑えてドキュメントを肥大化させることで悪影響を与える可能性があるため、プラグインを選択する際には注意が必要です。理想的には、すべてのJavaScriptファイルを1つに連結してから、それを縮小します。すべてのファイルを1つに連結できない場合は、「async」および「defer」と呼ばれるHTML属性を使用して、JavaScriptファイルを非同期で、またはページの残りの部分をロードした後にロードできます。

今日JavaScriptを参照する最も一般的な場所は、ドキュメントの下部、終了タグの直前です。ただし、JavaScriptをロードするためのより高度な手法があります。繰り返しになりますが、フィラメントグループはこれについて多くの研究を行っており、ページの読み込み時間を超高速にすることを目指している場合に使用できるいくつかのオープンソースプロジェクトがあります（ちなみに、私はフィラメントグループとはまったく関係がありません。私は彼らのものが素晴らしいと思います）。最善のアプローチは、 <head>に小さな関数をインライン化することによってスクリプトを動的にロードすることのようです。次に、ページの残りの部分をブロックせずにスクリプトタグを追加します。詳細については、loadJSスクリプトを確認してください。

imagessssss

画像

多くの場合、画像はページ上の最大のファイルであり、ページの読み込み時間の最大の遅延の原因となります。ただし、画像の良いところは、CSSやJavaScriptとは異なり、ほとんどのブラウザが画像を非同期で読み込むことです。それは少なくともページの知覚されるパフォーマンスに役立ちますが、それでもA）できるだけ少ない画像を提供し、B）それらの画像ができるだけ圧縮されていることを確認する必要があります。

画像の余分な部分をできるだけ絞り出すには、圧縮ツールが必要です。 ImageOptimは、Gruntなどのタスクランナーで使用するためのOptiPNGおよびjpegtranとともに、これをうまく実行する優れたMacアプリです。

フォント

最近のWebフォントは非常に一般的です。私はほぼすべてのプロジェクトでGoogleWebFontsを使用していますが、最近まで、 <head>でそれらを参照するだけで、パフォーマンスの低下に気づきませんでした。パフォーマンスへの影響は小さいですが、これはサイトを高速化することに関する記事なので、すべてが重要です！ Webフォントを使用して最高のパフォーマンスを得るには、GoogleとTypekitが共同開発したWebフォントローダーを使用することをお勧めします。これはオープンソースのスクリプトであり、Google Web Fontsなどのサードパーティからのフォントの読み込みを管理し、非同期で読み込むことができます（まだその単語に飽きていますか？）。

予想どおり、Web Font Loaderをプロジェクトに統合するにはいくつかの構成が必要です。そのため、セットアップ方法の詳細については、GitHubでプロジェクトを確認してください。

これで、フロントエンドの最適化は終わりです。次に、バックエンドのパフォーマンスに焦点を当てて、WordPressサイトを高速化する方法を学びます。