エックスサーバーの設定を調整するだけでPageSpeed Insightsが82点に
各指標により異なるが平均値のため小数点以下等の数字を調整 Cumulative Layout Shiftは元々0だったためこれ以上改善の余地がないとして、その他全部の指標において改善しました。Largest Contentful Paintが高めなのが気になりますが、あとの指標はどれもいい数字が出ています。 特にTotal Blocking Time、次いでTime to Interactiveが大きく変化しました。PHP8の威力でしょうか。 フロント側、管理画面どちらともストレス無く画面遷移していましたが、今回の設定変更によって、よりサクサク表示できるようになった印象です。 ちなみに、PageSpeed Insightsの「パソコン」となっているデスクトップ側のスコアは98で、各指標も全て緑色の高スコアです。 行った各種設定項目 前提条件に書いたとおり、Xserverのサーバーコントロー
WP Rocketの設定方法と使い方
【2021年4月14日まで】20%オフセール実施中！→終了しました WP Rocket ウェブサイトを運用していてアクセスが多くなってくると、気になってくるのがウェブサイトの表示速度。WordPressでサイトを運用していると、多くのプラグインを有効にすることで関連ファイルの読込が増えたり、記事数増加に伴いデータベースが大きくなったり、オリジナルテーマやテーマをカスタマイズして制作した場合によくある表示速度を考えて作られていないなど、色々な問題が出てきます。 表示速度が遅いサイトは直帰率やコンバージョン、SEOに悪影響があるため、パフォーマンス改善は非常に重要な項目です。そこで、改善のためのWordPressプラグインであるWP Rocketのメリットや導入方法などをご紹介します。 表示速度の重要性 デザインや見た目はいいウェブサイトなのに、読み込むまで時間がかかったりページが重い等では、
パフォーマンス改善の結果PageSpeed Insightsで97点をマーク
各指標により異なるが平均値のため小数点以下等の数字を調整 モバイルスコアは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を意識したスライダーのライブラリ選定と指標改善のためのチューニング Core Web Vitals Lighthouse PageSpeed Insights 表示高速化 UIとしてはアンチパターンと言われがちなスライダー(カルーセルやスライドショーとも呼ばれますが、今回はスライダーで統一)ですが、ファーストビューの「にぎやかし」として根強い人気があり、Web制作の現場でよく遭遇します。 大きな画像を何枚も読み込み、それをJavaScriptで制御するのは聞いただけでも重い機能です。2021年から検索順位に関係すると言われるCore Web Vitalsや、PageSpeedスコアといったフロントエンドパフォーマンス指標にも明らかに影響がありそうです。 ライブラリの種類が多いことも悩みの種です。今回、フロントエンドパフォーマンスの観点からはどのライブラリを選ぶ
インタラクティブになるまでの時間(TTI: Time To Interactive)とは何か - Qiita
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改善に役立つツール: LCPとCLSの関連要素を特定する方法
[レベル: 上級] Core Web Vitals が近い将来にランキング要因になります。 早くても 2021 年以降になるはずですが、さっそく改善に取り組み始めた人もいるはずです。 この記事では、Core Web Vitals 改善の際に必要になるであろう LCP と CLS に関連するページ内の要素を特定する方法を説明します。 PageSpeed Insights とデベロッパーツールで LCP と CLS の関連要素を特定する LCP は Largest Contenful Paint の略で、ブラウザの表示範囲内で最も大きなコンテンツが表示されるまでの時間を表します。 CLS は Cumulative Layout Shift の略で、視覚要素の安定性を示す指標です。 ユーザーが意図せぬレイアウトのずれがどれぐらい発生したかをスコアで表します。 LCP の表示速度を速くするには、最
Webpagetestから始める継続的パフォーマンス改善
autoscale: true Webpagetestから始める継続的 パフォーマンス改善 ページロードタイム編 :hourglass: 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info Create: textlint, Almin アジェンダ パフォーマンス改善は指標を決めて行わないと迷子になる パフォーマンス改善を行うには継続的な計測を行う 今回はページロードについて、ランタイムは範囲外 パフォーマンス改善のアプローチ 継続的なパフォーマンス計測とリグレッションの検知 ^ 目的はパフォーマンス改善には計測が必要という事実を知ること ^ パフォーマンス計測は継続的に行う必要がある ^ パフォーマンス改善は何を目的、指標にして改善するかを決めないと迷子になる ^ 目的をもって継続的にパフォーマンス改善を行い
PageSpeed Insightsの点数はどのように計算されているか。100点をとるための条件 - Qiita
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」は メルカリのエンジニアに関する情報を、 オープンに公開・共有していくためのサイトです。
PageSpeed Insightsの真実。点数の公式と高得点をとれない理由。5項目の最適化をすることがスコアアップの近道。 | アイデアマンズブログ
指標についてはこちらの記事がわかりやすいのでぜひご参考ください。 これらの指標それぞれについて先ほどの順位点数を出します(0〜100)。その5つの順位点数に重みを加味して平均値を出したものが、PageSpeed Insightsで表示される点数です。 つまりどういうことか PageSpeed Inshgtsの点数はいかにファーストビューが速く完成して操作できるようになるか、それが全てということです。 例えば、同じ内容のWebページでも、 A ファーストビューが1秒で表示されるが、スクロールしたときのコンテンツはその後4秒かけて少しずつ表示される場合 B 読み込みから5秒は画面が真っ白だが、その後ページの上から下まで一気に表示される場合 PageSpeed InsightsはAの場合を高く評価し、Bの点数は低く評価します。これは実際のページ離脱の感覚として理に適っていると思います。 点数が上
WordPress でも大丈夫！実例で見るウェブパフォーマンス改善
ウェブパフォーマンス、あるいはウェブページの表示速度は、ウェブサイト品質の重要な指標の1つです。今注目されているウェブパフォーマンス改善ですが、そもそも何をすればいいのか、具体例を交えながらその施策を紹介いたします。具体例としては、WordPress を利用したブログの PageSpeed Insigh…
WordPressキャッシュプラグインを選ぶために知っておくべきこと – Capital P – WordPressメディア
WordPressはPHPアプリケーションであるため、キャッシュプラグインがよく利用される。多くのキャッシュプラグインは「高速化」という言葉と一緒に紹介されることが多いため、それならば試してみようと思うことが多いが、実は高度な技術であるため、ある程度の知識が必要とされる。この記事では前提知識を含めた上で、いくつかのおすすめプラグインを紹介しよう。 そもそもキャッシュとは？ キャッシュとはコンピューターシステムの専門用語で、「ある領域から他の領域に情報を伝送する際にその中間で作用し遅延を隠蔽するシステム」のことだ。図示すると、このようになる。 情報転送の中間に位置していい感じにするのがキャッシュである 「情報の伝送」だと少し具体性にかけるので、PHP（スクリプト）とMySQL（データベース）を例にしよう。 キャッシュがオンでヒットした場合、データベースにはアクセスしない キャッシュとは、そも
Google PageSpeed Insightsのoriginコマンドでサイト全体のスピードを計測
[レベル: 中級] ウェブページの表示スピードを計測するツールの PageSpeed Insights で、サイト全体を集計した速度データを調べられるようになりました。 これまでは、単一のページが検証の対象でした。 origin: コマンドで集計データをレポート サイト全体の速度データを集計してレポートを出すには origin: をドメイン名の URL の先頭に付けます。 僕のサイトであれば、origin:https://www.suzukikenichi.com で検証します。 僕のサイトは、全体としては「Fast」（速い）という結果が出ました。😃 あるいは、個別ページを検証すると、origin: コマンドを使うと集計データをレポートすることができるという説明が出てきます。 Chrome ユーザー エクスペリエンス レポートでは、このorigin（https://www.example
【WordPress】プラグイン無しでAMP（Accelerated Mobile Pages）に対応にする手順
プラグインを有効化するとこんな感じになります。パープルのヘッダーにグレーの背景でこちらもシンプルな見た目になります。AMPは制約が多いので凝った作りにすることが難しいためです。テーマに組み込んでいた関連記事のショートコードもむき出しになってしまいました。 AMPをプラグインを使わず自分で対応したい 上記のプラグインは完全なAMP対応とは言えずまだまだβ版です。今から数年前にスマホサイト対応でWPtouch Mobile Pluginが流行ったのと同じように、プラグインを使っている人と全く同じデザインになってしまうので「とりあえず対応しました感」があって何か嫌なんですよね。 というわけで今回はWordPressでプラグインを使用せずAMPに対応させた手順をご紹介します。このページもAMPに対応しているので、URL末尾に「?amp=1」を付けてレイアウトの違いを見て下さい。 https://c
blog.katsuma.tv
YSlowの評価に対する改善シリーズ、その2です。mod_deflateを利用してHTTPレスポンスを圧縮させる方法はこちらから。 YSlow対策でmod_deflateを利用してHTTPレスポンスをgzip圧縮 前回で、総合ポイントが「F」だったサイトをレスポンス圧縮することで、総合ポイントを「D」にまで上げることができました。今回は、残りの「F」項目の中の「Add an Expires header」についての処理を行いたいと思います。 YSlowの公式サイトによると、「リッチサイトはCSSやらJSやら多くのファイルをロードするために、リクエスト回数も増えちゃうよね。でも変更が少ないファイルについてはExpiresヘッダを追加することで、ユーザにキャッシュさせ、リクエスト回数を減らすことができるよ（大雑把な意訳）」と、あります。つまり、Apache側でExpiresヘッダをレスポンスに
ブラウザ動作の理解－レンダリングツリーの構築と描画のタイミング | ゆっくりと…
HTML5 の Web Worker やら GPU でハードウェア・アクセラレートされる IE9 のレンダリングなど、今年もブラウザの進化が激しくなりそうですネ。一方でフロント･エンド改善によるページ表示の高速化 Tips や Hack も百花繚乱、出尽くした感がありますが、やはり原理原則を知らないと 「どれが正しくて筋が良いか」 中々判断が効かないと思いませんか？ そこで最も基本的な 「ページの読み込みから表示まで、ブラウザって何をどうやってるの？」 を理解していきたいなと思っています。 一番の厳密かつ王道は、ブラウザ間の違いを極力少なくするように注意深く書かれている HTML5 の仕様書 を理解だと思いますが、イキナリではハードルが高いので、まずは周辺を漁っています。そんな中から、ちょっと古いですが、2004年5月の記事 「Testing Page Load Speed」 を今回、翻訳
ウェブサイトをgzip圧縮で高速化する
ウェブサイトをgzip圧縮を使って高速化するカスタマイズを紹介します。当サイトでもgzip圧縮を利用しています。 １．gzip圧縮によるウェブサイト高速化のイメージ gzip圧縮によるウェブサイト高速化のイメージをご覧ください。 （クリックすれば拡大します） クライアント（ブラウザ）から、あるウェブサイトの「index.html」にアクセスしたとき、リクエストを受信したサーバでは、HTTPリクエストの分析や、「index.html」の圧縮ファイル「index.html.gz」の有無などをチェックして、圧縮ファイルが返却可能であれば「index.html.gz」を返却します。 返却できない場合は通常の「index.html」をレスポンスで返却します。 圧縮ファイルを返却できれば、データの転送量を減らすことができるので、これによりウェブサイトの高速化につながります。 圧縮ファイルは受信したブラ
ほんとうは怖いWP Super Cacheの話 | 高橋文樹.com | プログラミング
この投稿は 11年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 WordPressで一般ユーザーのログインを伴うサイト（ECサイト、SNSなど）を作っている方も多いと思いますし、そういった依頼を受けることも多いのですが、最近「バグです！」という報告を受けてよくよく調べたらWP Super Cacheというキャッシュプラグインのせいだったということがなんどかありました。毎回説明するのが大変なので、書いておきます。 そもそもWP Super Cacheはどういう仕組みか 通常のWebサイトというのは、ユーザーから求められたリクエストからPHPなりRubyなりPythonなりが求められるデータを推測し、データベースに対して適切な操作を行い、最終的にHTMLを書き出します。 動的なサイトがリクエストを受け取って処理する仕組み で、Webサイトが重
高速化：jQuery と CSS のセレクタは書き方を変えること - ShobonEngineの日記
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sprite Images