各指標により異なるが平均値のため小数点以下等の数字を調整 Cumulative Layout Shiftは元々0だったためこれ以上改善の余地がないとして、その他全部の指標において改善しました。Largest Contentful Paintが高めなのが気になりますが、あとの指標はどれもいい数字が出ています。 特にTotal Blocking Time、次いでTime to Interactiveが大きく変化しました。PHP8の威力でしょうか。 フロント側、管理画面どちらともストレス無く画面遷移していましたが、今回の設定変更によって、よりサクサク表示できるようになった印象です。 ちなみに、PageSpeed Insightsの「パソコン」となっているデスクトップ側のスコアは98で、各指標も全て緑色の高スコアです。 行った各種設定項目 前提条件に書いたとおり、Xserverのサーバーコントロー

【2021年4月14日まで】20%オフセール実施中！→終了しました WP Rocket ウェブサイトを運用していてアクセスが多くなってくると、気になってくるのがウェブサイトの表示速度。WordPressでサイトを運用していると、多くのプラグインを有効にすることで関連ファイルの読込が増えたり、記事数増加に伴いデータベースが大きくなったり、オリジナルテーマやテーマをカスタマイズして制作した場合によくある表示速度を考えて作られていないなど、色々な問題が出てきます。 表示速度が遅いサイトは直帰率やコンバージョン、SEOに悪影響があるため、パフォーマンス改善は非常に重要な項目です。そこで、改善のためのWordPressプラグインであるWP Rocketのメリットや導入方法などをご紹介します。 表示速度の重要性 デザインや見た目はいいウェブサイトなのに、読み込むまで時間がかかったりページが重い等では、

各指標により異なるが平均値のため小数点以下等の数字を調整 モバイルスコアは15点上昇！正直ここまで上がるとは思いませんでした。 First Contentful Paintはあまり変わらず。 Time to Interactiveは結構下がり、Speed Indexも若干下がっています。 Total Blocking Timeはなぜか大きくなり、Cumulative Layout Shiftも0だったのが若干数字が出てしまい、この2点は前回より悪くなった箇所です。 そして一番の要因ではないかと思われる、Largest Contentful Paintは大きく改善しました。前回でここだけ赤色だったんですよね。緑色になるの初めてみたかも。 100点をマークした時 PageSpeed Insightsの「改善できる項目」「診断」は以下の通りです。 行った各種設定項目 前述の通り今回はプラグインを

Core Web Vitalsを意識したスライダーのライブラリ選定と指標改善のためのチューニング Core Web Vitals Lighthouse PageSpeed Insights 表示高速化 UIとしてはアンチパターンと言われがちなスライダー(カルーセルやスライドショーとも呼ばれますが、今回はスライダーで統一)ですが、ファーストビューの「にぎやかし」として根強い人気があり、Web制作の現場でよく遭遇します。 大きな画像を何枚も読み込み、それをJavaScriptで制御するのは聞いただけでも重い機能です。2021年から検索順位に関係すると言われるCore Web Vitalsや、PageSpeedスコアといったフロントエンドパフォーマンス指標にも明らかに影響がありそうです。 ライブラリの種類が多いことも悩みの種です。今回、フロントエンドパフォーマンスの観点からはどのライブラリを選ぶ

2020/6/3 追記 本家レポートよりPageSpeed Insightsのスコア改善が捗る裏レポートツールを公開しました。併せてご参考ください。 https://simulate.site/cheatspeed-insights/ 英語ではTime To Interactiveまたはその頭文字をとってTTIと表記されます。Webページ表示の体感速度を決める重要な指標です。 PageSpeed Insightsでも最も重視されていて、点数の1/3がこの指標で決まります。 Googleによると以下の説明ですが、 「操作可能になるタイミング」とは、レイアウトが安定して、主要なウェブフォントが表示され、メインスレッドでユーザー入力を処理できる状態になるタイミングとして定義されます。 https://developers.google.com/web/tools/lighthouse/audit

[レベル: 上級] Core Web Vitals が近い将来にランキング要因になります。 早くても 2021 年以降になるはずですが、さっそく改善に取り組み始めた人もいるはずです。 この記事では、Core Web Vitals 改善の際に必要になるであろう LCP と CLS に関連するページ内の要素を特定する方法を説明します。 PageSpeed Insights とデベロッパーツールで LCP と CLS の関連要素を特定する LCP は Largest Contenful Paint の略で、ブラウザの表示範囲内で最も大きなコンテンツが表示されるまでの時間を表します。 CLS は Cumulative Layout Shift の略で、視覚要素の安定性を示す指標です。 ユーザーが意図せぬレイアウトのずれがどれぐらい発生したかをスコアで表します。 LCP の表示速度を速くするには、最

PageSpeed Insightsの採点ロジックについて詳しく調べてみたところ、意外なことがわかりました。 2020/6/3 追記 本家レポートよりPageSpeed Insightsのスコア改善が捗る裏レポートツールを公開しました。合わせてご参考ください。 https://simulate.site/cheatspeed-insights/ 2020/3/19 追記 Lighthouse 6へのバージョンアップでこのページにかかれている内容が一部変更される可能性があります。 こちらも併せてご参考ください。 PageSpeed Insightsのスコア大変動か？ Lighthouse 6 で変わる採点ルールを先取りチェック！ - アイデアマンズブログ 点数に反映される監査項目は5つだけ PageSpeed Insightsを実行するといろいろな指摘事項が出てきます。なので指摘が多いと点数

「Mercari Engineering」は メルカリのエンジニアに関する情報を、 オープンに公開・共有していくためのサイトです。

指標についてはこちらの記事がわかりやすいのでぜひご参考ください。 これらの指標それぞれについて先ほどの順位点数を出します(0〜100)。その5つの順位点数に重みを加味して平均値を出したものが、PageSpeed Insightsで表示される点数です。 つまりどういうことか PageSpeed Inshgtsの点数はいかにファーストビューが速く完成して操作できるようになるか、それが全てということです。 例えば、同じ内容のWebページでも、 A ファーストビューが1秒で表示されるが、スクロールしたときのコンテンツはその後4秒かけて少しずつ表示される場合 B 読み込みから5秒は画面が真っ白だが、その後ページの上から下まで一気に表示される場合 PageSpeed InsightsはAの場合を高く評価し、Bの点数は低く評価します。これは実際のページ離脱の感覚として理に適っていると思います。 点数が上

ウェブパフォーマンス、あるいはウェブページの表示速度は、ウェブサイト品質の重要な指標の1つです。今注目されているウェブパフォーマンス改善ですが、そもそも何をすればいいのか、具体例を交えながらその施策を紹介いたします。具体例としては、WordPress を利用したブログの PageSpeed Insights (Lighthouse) のパフォーマンススコアを、30点以下から95点以上に改善した際、実際に行った施策を用います。

WordPressはPHPアプリケーションであるため、キャッシュプラグインがよく利用される。多くのキャッシュプラグインは「高速化」という言葉と一緒に紹介されることが多いため、それならば試してみようと思うことが多いが、実は高度な技術であるため、ある程度の知識が必要とされる。この記事では前提知識を含めた上で、いくつかのおすすめプラグインを紹介しよう。 そもそもキャッシュとは？ キャッシュとはコンピューターシステムの専門用語で、「ある領域から他の領域に情報を伝送する際にその中間で作用し遅延を隠蔽するシステム」のことだ。図示すると、このようになる。 情報転送の中間に位置していい感じにするのがキャッシュである 「情報の伝送」だと少し具体性にかけるので、PHP（スクリプト）とMySQL（データベース）を例にしよう。 キャッシュがオンでヒットした場合、データベースにはアクセスしない キャッシュとは、そも

[レベル: 中級] ウェブページの表示スピードを計測するツールの PageSpeed Insights で、サイト全体を集計した速度データを調べられるようになりました。 これまでは、単一のページが検証の対象でした。 origin: コマンドで集計データをレポート サイト全体の速度データを集計してレポートを出すには origin: をドメイン名の URL の先頭に付けます。 僕のサイトであれば、origin:https://www.suzukikenichi.com で検証します。 僕のサイトは、全体としては「Fast」（速い）という結果が出ました。😃 あるいは、個別ページを検証すると、origin: コマンドを使うと集計データをレポートすることができるという説明が出てきます。 Chrome ユーザー エクスペリエンス レポートでは、このorigin（https://www.example

プラグインを有効化するとこんな感じになります。パープルのヘッダーにグレーの背景でこちらもシンプルな見た目になります。AMPは制約が多いので凝った作りにすることが難しいためです。テーマに組み込んでいた関連記事のショートコードもむき出しになってしまいました。 AMPをプラグインを使わず自分で対応したい 上記のプラグインは完全なAMP対応とは言えずまだまだβ版です。今から数年前にスマホサイト対応でWPtouch Mobile Pluginが流行ったのと同じように、プラグインを使っている人と全く同じデザインになってしまうので「とりあえず対応しました感」があって何か嫌なんですよね。 というわけで今回はWordPressでプラグインを使用せずAMPに対応させた手順をご紹介します。このページもAMPに対応しているので、URL末尾に「?amp=1」を付けてレイアウトの違いを見て下さい。 https://c

ウェブサイトをgzip圧縮を使って高速化するカスタマイズを紹介します。当サイトでもgzip圧縮を利用しています。 １．gzip圧縮によるウェブサイト高速化のイメージ gzip圧縮によるウェブサイト高速化のイメージをご覧ください。 （クリックすれば拡大します） クライアント（ブラウザ）から、あるウェブサイトの「index.html」にアクセスしたとき、リクエストを受信したサーバでは、HTTPリクエストの分析や、「index.html」の圧縮ファイル「index.html.gz」の有無などをチェックして、圧縮ファイルが返却可能であれば「index.html.gz」を返却します。 返却できない場合は通常の「index.html」をレスポンスで返却します。 圧縮ファイルを返却できれば、データの転送量を減らすことができるので、これによりウェブサイトの高速化につながります。 圧縮ファイルは受信したブラ

この投稿は 11年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 WordPressで一般ユーザーのログインを伴うサイト（ECサイト、SNSなど）を作っている方も多いと思いますし、そういった依頼を受けることも多いのですが、最近「バグです！」という報告を受けてよくよく調べたらWP Super Cacheというキャッシュプラグインのせいだったということがなんどかありました。毎回説明するのが大変なので、書いておきます。 そもそもWP Super Cacheはどういう仕組みか 通常のWebサイトというのは、ユーザーから求められたリクエストからPHPなりRubyなりPythonなりが求められるデータを推測し、データベースに対して適切な操作を行い、最終的にHTMLを書き出します。 動的なサイトがリクエストを受け取って処理する仕組み で、Webサイトが重

jQuery 『jQuery クックブック』レシピ 5.10　より高速なセレクタを作成する (P.109) には以下の記述があります。 <table id="log"> <tr><td>Client X:</td><td class="clientX"></td></tr> ... </table> // クラス .clientX を取得する jQuery セレクタ $('.clientX') // 遅い $('td.clientX') // 速いかもしれない $('#log .clientX') // かなり速いかもしれない $('#log td.clientX') // ブラウザによっては速い可能性がある jQuery のセレクタは、#id や tag.class 等の限定されたルールで条件を絞り込むほど高速になる傾向があるようです。 詳しい解説がこちらにあります。 また、jQuery