これらのWordPress開発技術を使用してすべてのCWVおよびPageSpeedInsightsテストに合格する

2021年、英国に拠点を置くフルスタックデジタルエージェンシーであるStrategiQで、GoogleのCore Web Vitals（CWV）およびPageSpeed Insights（PSI）のパフォーマンスに合格するために、開発および立ち上げたすべてのWebサイトの開発を開始することを目標にしました。報告する。

Core Web Vitalsは、さまざまな方法でWebサイトのパフォーマンスを示します。 これには、ページに最初のコンテンツをロードする速度（First and Largest Contentful Paint）、ユーザーがページを操作できるようになるまでの待機時間（Time to Interactive）、およびレイアウトシフト（Cumulative Layout Shift）が含まれます。 。

CWVのテストは、パイと同じくらい簡単です。https：//pagespeed.web.dev/にアクセスして、アドレスを入力するだけです。 上の領域には過去28日間の最新の実世界のデータが表示され、下のセクション（モバイルとデスクトップの両方で100点満点）はラボで生成されたデータです。

なぜこれが重要なのですか？ ええと、グーグルがそう言っているからです。

2018年7月、Googleは、特にモバイルで、検索結果にサイトがどのように表示されるかを決める要素が速度であることを発表しました。 ソース。

2020年には、ユーザーエクスペリエンスの指標（コアWeb Vitals / CVWを構成する）がサイトのランク付けに使用されるようになったとも発表しました。 ソース。

シンプルです。サイトのパフォーマンスが速く、パフォーマンスが高いほど、ランク付けが高くなる可能性があります。

そのため、StrategiQの開発チームは、SEO部門を支援する番であると判断しました。 SEOの専門家は、できる限り一生懸命に仕事をすることができますが、ひどく機能するサイトは、良いことよりもはるかに害を及ぼす可能性があります。 ただし、CWVとPSIに合格するサイトでは、優れた作業に素晴らしい踏み台が確実に組み込まれます。

注目に値するのは、CWVとPSIの通過が難しいことで有名です。 大多数のサイトはそうではなく、世界で最も有名なWebサイトの多くでさえもそうではありません。 YouTube、BBC、さらにはWPエンジン自体でさえ、モバイルとデスクトップの両方でパスを取得するのに苦労していると考えてください（ごめんなさい）。

では、これらの楽しいグリーンパスドーナツを確実に見られるようにするために、私たちは何をしましたか？

私たちはすべてを取り除いて、1つの単純なマントラに取り組みました：

できるだけ早く、できるだけ少なくロードします。

細かいところまでは入りませんが、WordPressの特注テーマを可能な限り合理化するための主要な方法を説明します。

まず、ハードウェアについて話しましょう。 最初にWPエンジンについて話さずに続けることはできません。 間違いなく、彼らはそこにある最高のWordPress固有のホスティングサプライヤーの1つです。 印象的なサポート、稼働時間、各インストールの環境、バックアップ、および他の多くの機能の中でもSSL証明書とドメインの管理がいかに簡単であるかを喜んでいます。 さらに、それらのキャッシングとハードベイクされた速度の最適化により、サイトがサーバーレベルで可能な限り高速に実行されることが保証されます。

高性能サーバーを中核として、Webサイトを可能な限り高速に動作させるのは私たちの責任です。

ほとんどの代理店と同様に、私たちはすべてのオーダーメイドのWebサイトの開始点として使用する独自の手作りのベーステンプレートを持っています。 私たちが作成する各サイトは、社内で設計およびコード化されており、事前に構築されたテーマは見えません。

基本テンプレートには、速度最適化手法が組み込まれているだけでなく、すべてのプロジェクトで必要とされる多くの巧妙な関数と再利用可能なコンポーネントが含まれています。 その出発点があることで、長期的には時間を節約でき、開発者が必要とするオーバーヘッドをほとんどかけずに、すべてのサイトが可能な限り最高のパフォーマンスを発揮できるようになります。

私はあなたが何を考えているか知っています–良いものを手に入れましょう！

「遅延読み込み画像」など、すべてのブログ投稿に見られる通常の退屈なものをわざわざリストするつもりはありません。 ただし、そうでない場合は、それは必須です。srcsetタグとsizesタグを遅延ロードした画像（レスポンシブ画像と呼ばれます）を出力する画像関数があります。

さっそく始めましょう。

方法1：チャンクとエンキュー

それはたくさん起こります：プロジェクトには1つのcssファイルと1つのjsファイルがあり、それらは小さな惑星のサイズに膨れ上がります。 次は何？ Googleは、「このページでスタイルとJavaScriptが使用されていないのはなぜですか？」と尋ねます。 なんで？ なぜ？！

それは有効なポイントです。 ページごとにほんの一部しか必要ないのに、なぜWebサイト全体に大量のcssとjavascriptをロードする必要があるのでしょうか。

すべてのサイトは完全にグーテンベルクブロックで構築されています。 これは、ブロックごとに、cssファイルとjsファイルをキューに入れるという優れた機能を利用できることを意味します。

ブロックごとに、そのファイル専用に個別のcssファイルとjsファイルを作成します（必要な場合）。 次に、これらは縮小され（詳細については次のポイントを参照）、ブロックごとにキューに入れられます。

結果？ 各ページに実際にあるものだけをロードします。

方法2：gulpなどのタスクランナーを使用して、アセットを結合および縮小します

生成されたすべてのアセットは、gulp関数によって縮小されます（gruntなどの他のアセットも使用可能です）。 何ヶ月も前に、Googleはミニファイよりも連結を好んでいたことは注目に値します（5つの小さなリクエストよりも1つの大きなリクエストの方が望ましいでしょう）が、HTTP / 2（一度に複数のリクエストを多重化する）の台頭により、これはもはや問題。

繰り返しますが、これはファイルをできるだけ小さく保つために行います。 そのため、ページにあるアセットを読み込むだけでなく、サイズもごくわずかになりました。

方法3：レンダリングブロッキングアセットを停止する

これらのエンキューされたアセットがすべてページの下部にあることを確認し、ブロックをレンダリングしないようにします。

WordPressに付属しているjQueryをデキューし、ページの下部にある新しいバージョン（セキュリティの脆弱性がないバージョン）をエンキューします。

しかし、FOUC（Flash of Unstyled Content）についてはどうでしょうか？

方法4：フォールドcssの上

スタイルシートがページの下部にあるため、スタイルなしのコンテンツのフラッシュは、ページが最初にスタイルなしでロードされたときに発生します。 スタイルシートが読み込まれると、スタイルが適用され、サイトが点滅し、最終的に正しく表示されます。

これを修正するために、上記の折り畳みスタイルを分割し、頭にインライン<style>タグとして追加します。 これはレンダリングをブロックするアセットではなく、FOUCを取得しません。

方法5：WPロケット

パズルの最後のピースは、クラス最高のパフォーマンスプラグインWPRocketです。 WPエンジンエンジニアと共同で構築され、ホスティングプラットフォームで許可されている唯一のキャッシュプラグインです。

結果？

まあ、スコアはそれ自体を物語っています。

SportsAidEasternは、英国のアスリートを支援する慈善団体です。 PSIによると、私たちが彼らのために開発したサイトは、モバイルでなんと97/100、デスクトップで100/100のスコアを獲得しています。

Calligoは革新的なデータサービスを提供しており、そのサイトスコアはSportsAidよりもさらに優れています。 モバイルではほぼ完璧な99/100、デスクトップでは100/100で登場します。

結論

うまくいけば、これは他のすべての同じ-古い「同じ-古い」「WordPressをスピードアップする方法」サイトの投稿からの新鮮な空気の息吹であり、パスを取得するのに苦労しているなら、おそらく私たちは強調しましたあなたが試すことができる何か。

StrategiQは戦略第一のマーケティングエージェンシーです。 貴重な市場洞察を明らかにし、競合他社を打ち負かす機会を明らかにし、効果的なマーケティング戦略を定義して提供することにより、私たちのチームは、アドバイザリー、クリエイティブ、マーケティング、テクノロジーを通じて、野心的なブランドが目標を上回るのを支援します。
戦略、アドバイス、リソース、専門知識が必要かどうかにかかわらず、最初の一歩を踏み出しましょう。 あなた自身について教えてください。私たちがどのように手助けできるかを見ていきます。