サイト上のさまざまなページのパフォーマンスをまとめて測定できるツール「Unlighthouse」
「Lighthouse」はGoogleが作成したページの読み込み速度やアクセシビリティなどをまとめてチェック・採点してくれるツールですが、そのLighthouseをサイト上のさまざまなページで動作させることでサイト全体のスコアを一発で算出してくれるツールが「Unlighthouse」です。 Unlighthouse - Site-wide Google Lighthouse · Unlighthouse https://unlighthouse.dev/ Unlighthouseを利用するためにはNode.jsのインストールが必要です。下記のURLから、手元の環境に合ったインストール方法を選択してください。 パッケージマネージャを利用した Node.js のインストール | Node.js https://nodejs.org/ja/download/package-manager 今回は
Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説
ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. HTMLの解析（パース）を開始する 2. 外部リソースを取得する 3. CSSを解析し、CSSOMを構築する 4. JavaScriptを実行する 5. DOMとCSSOMをマージしてレンダリングツリーを構築する 6. レイアウトとペイントを計算する はじめに 私の考えとしては、高速で信頼性の高いWebサイトを構築するには、実装中に各ステップを最適
スマホ対応の優れもの！クリック・タップの直前にページを先読み、高速表示する超軽量スクリプト -instant.page
ユーザーがリンクをクリックする際のhoverとタップする際のtouchstartに合わせて、クリック・タップする直前にページのHTMLをプリロードし、高速に表示するわずか1kBの超軽量スクリプトを紹介します。 ページに外部スクリプトを1つ加えるだけの簡単実装です。 instant.page instant.page -GitHub instant.pageの特徴 instant.pageのデモ instant.pageの使い方 instant.pageの特徴 instant.pageはprefetchを使用し、ユーザーがクリック・タップする直前にページをプリロードして、ページを高速に表示します。 ユーザーがリンクをクリックする際には、そのリンクの上にマウスを移動します。そのリンクをユーザーが65ミリ秒間ホバーした場合、そのリンクをクリックする確率は1/2であるため、この時instant.p
Webページの表示が早くなる！既存ページのクリティカル レンダリング パスを最適化するオンラインツール
スタイルシートを外部ファイルで管理されている人が多いと思います。しかし、最近では上部のコンテンツを表示するためのスタイルシートをインラインで記述し、残りは後にロードさせ、ページの表示を早くしているサイトが増えてきました。 Googleなどでも積極的に採用されているテクニックです。 既存ページのクリティカル レンダリング パスを改善するためのスタイルシートを簡単に生成できるオンラインツールを紹介します。 ※秒数は目安です クリティカル レンダリング パス(Critical Rendering Path)とは、ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になり、この時にブラウザがページの最初のペイントを実行するために必要とするシーケンスのことです。 クリティカル レンダリング パスについて詳しくは、下記を
pageAccelerator - JavaScriptだけでWebページ読み込みを高速化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページの読み込み速度は速ければ速いほどメリットがあります。スマートフォンアプリのようにUIはすべてアプリの中にあり、データだけをやり取りする方法が主流になっている中、Webブラウザが遅く感じられてしまうとユーザはあっという間にブラウザから離れていってしまうでしょう。 今回は簡易的にページ読み込みを高速化してくれるpageAcceleratorを紹介します。 pageAcceleratorの使い方 pageAcceleratorはTurbolinkやpjaxと呼ばれる仕組みに近いものとなっています。まずスクリプトを読み込みます。 <script src="page-accelerator.min.js"></script> 後はpageAcceleratorを実行するだけです。
[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ
縦長ページのスクロール エフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ
![[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/28da41636539dd792d07680b0ac53af6ec4dba84/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016071113.png)
[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js
Webサイトを見ていてページを遷移する時に、読み込みがやたら速いサイトに出会ったことはありませんか？ PJAXを使い、通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現する超軽量(4kb gzip)のスクリプトを紹介します。 Barba.js Barba.js -GitHub Barba.jsのデモ Barba.jsの使い方 Barba.jsのデモ Barba.jsはすでに実際のサイトにも利用されており、Webデザイナーの間でも話題になっているサイトもあります。 ページを移動しているにも関わらず、まるでスライダーやパネルを切り換えている感覚で遷移します。
![[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/4521503cad1ef35e553783a3eb0c0ab4a4bc1361/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016063007.png)
ウェブページの重さを計測して高速化に向けたアドバイスをくれる「imgix Page Weight Tool」
ウェブサイト上に画像をアップロードする際、複数サイズの画像を用意したりファイルフォーマットを変換したりすることで、少しでもファイルサイズを小さくしてサーバーに負荷がかからないようにしますが、こういった地味な作業は取り扱う画像の数が多くなれば多くなるほど面倒になっていくものです。そんな画像加工関連の処理を自動かつリアルタイムで行ってくれるサービスが「imgix」で、ウェブページを表示する際に重要な「ページの重さ」を計測してくれるサービス「imgix Page Weight Tool」を提供しているので実際に計測してみました。 imgix Page Weight Tool • Learn how to improve your site or app’s speed. https://pageweight.imgix.com/ 「imgix Page Weight Tool」の使用方法はとても
WordPressで作成したサイトやブログを静的HTMLに変換するプラグイン -StaticPress
去年あたりから、静的サイトジェネレーターの需要が増しています。 WordPressでは通常、ページを表示する際にデータベースに接続して、動的にページを生成して表示します。更新度の高いコンテンツでは便利ですが、更新度の低い、一度公開したらほとんど更新する必要のないようなコンテンツであれば、静的ページにしてしまう方がよいかもしれません。 日本語環境にも対応、WordPressで作成したサイトやブログを静的HTMLに変換する無料プラグインを紹介します。 StaticPress StaticPress -GitHub StaticPressの特徴 StaticPressのダウンロードとインストール StaticPressの活用方法 StaticPressの特徴 WordPressで作成したコンテンツを完全に静的なHTMLファイルに変換します。表示する際のデータベースへの接続も必要ありません。 注意
Google Drive
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
Googleの提供するPageSpeed Insightsを参考にして、Webサイトを高速化したときにやったこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Googleの提供するPageSpeed Insightsを参考にして、Webサイトを高速化したときにやったこと こんにちは、ライターのモリイです。 Googleが提供しているPageSpeed Insightsというサービスがあります。これは、ウェブページのコンテンツを解析してページの読み込み速度を測定し、速度の改善策を提案してくれるサービスです。 たかがページの読み込み時間、と侮ることはできません。 読み込み時間が短くなることで、 Googleに評価される。 ユーザーにストレスをあたえない。 というメリットがあり、Google検索での順位をあげるためや、ユーザに離脱されないためにも重要な要素となります。今回は、このツールを使ってサイトの読み込みスピードを実際に上げてみようと思います。 ページの読み込みスピードを分析してみる 画面中央のフォームにサイトのURLを入力し、「分析」をクリック
ずいぶん速くなった！ページ表示高速化テクニックまとめ - コムテブログ
TL;DR CMS を組み込んだサイトを構築する上で、ページを高速表示するために最初に取り入れておきたいことなどを簡潔に書いておきます。 2016/07/03：高速化についての新しい方法を追加しました。確実に速くなる、リニューアルで行ったサイト高速化への手順を全公開。 VPS 高速化のために VPS で試して比較的効果があったことを、次回また組み込む時のためにメモ。 １．VPS / SSD に リクエスト数や画像の容量にもよりますが、WordPress を組み込んで一番高速表示されたのがこれだったので。当たり外れがあるかもしれませんが、 さくらの VPSSSD（2G）に WP を置き、レンタルサーバと比較すると、とんでもなく高速表示。試用期間中は遅くて不安になりますが、契約後当日に高速になります。 さくら VPS | Sakura VPS 設定マニュアル さくら VPS の初期設定 | 離
WordPress管理画面でDB Cache Reloadedエラーが出た時の対処法 - cocowa
WordPressがインストールされているWebサイトやブログの表示速度を早くするために便利なのが、キャッシュプラグインです。 そのうちの1つである、DB Cache Reloaded Fixが非常にお手軽に導入できるので、気に入っています。 ただ、DB Cache Reloaded Fixプラグインを使っていると、時々こんなエラーが表示されます。 ここに表示されているメッセージは以下のとおりです。 DB Cache Reloaded エラー: DBモジュール(wpdbクラス)はロードされませんでした。オプションページでキャッシュを無効にし (忘れずに設定を保存してください)、ふたたび有効にしてみてください。それでも解決しない場合は、手動アップグレードするためにFAQをチェックしてみてください。 なんか、赤い画面が出て怖いと思っている方、安心してください。すぐに解決できます。 赤いエラーを
WordPressを高速化するプラグイン「DB Cache Reloaded Fix」 | TechMemo
Tweet TweetWordPressでサイトを作っていると重い！と感じることありますよね。重くなる要因の一つに、データベースへのクエリ（データベースへアクセスする命令)があります。 WordPressは動的にページを作成するときに、頻繁にデータベースにアクセスします。クエリ数が多いと、データベースへの負荷が大きくなりパフォーマンスに影響します。 データベースへのクエリ数を抑えるのに役立つのが「DB Cache Reloaded Fix」です。 DB Cache Reloaded Fix は、データベースのクエリの出力結果など、 データベースとのやり取りをキャッシュしてクエリ数を減らす効果があります。データベースとのクエリ数は減りますが、動作自体は動的ページの様に動作します。クエリ数を減らしますので、記事が多くなってきたり、アクセス数が集中したときにパフォーマンスの低下を抑える効果がある
事前レンダリングでウェブページの表示時間を高速化
[対象: 上級] 事前レンダリングと呼ぶ技術を使って、ウェブページの表示時間を高速化する方法をこの記事では解説します。 事前レンダリングとは 事前レンダリング (Prerendering)とは、その名のとおり、ページの読み込み（正確にはレンダリング）を前もって実行する仕組みです。 Google検索で採用されている「インスタントページ」には事前レンダリングが使われています。 下のキャプチャは、Googleで「Amazon」を検索したときのChromeのタスクの状況をタスクマネージャで確認したものです。 「事前レンダリング」でAmazon.co.jpが出ています。 「Amazon」で検索したユーザーはかなり高い確率で（1位に出てきた）Amazonのホームページをクリックするはずです。 Chromeは先回りして、ユーザーがクリックしなくてもAmazonのホームページを取得および描画、つまりレンダ
上級者向けSEOガイド2/9 : サイトスピードとパフォーマンス改善 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
米国のカリスマウェブマーケッター、ニール・パテルが書き下ろした上級者向けのSEOガイドを紹介する記事シリーズ第二弾。今回はランキングへの影響はもちろん、それ以上にサイト内のユーザーアクションにも大きな影響があるといわれるサイトスピードやパフォーマンスの確認＆改善方法について。この種の記事はこれまでにも様々な所で紹介されていますが、その中でも網羅度＆マニアック度はNo.1クラスの充実した内容です。 — SEO Japan チャプター 1では、サイトをクロール可能 & アクセス可能にするための方法を伝授した。チャプター 1を完了し、ウェブ上のその他の多くのサイトよりも優れたサイトにすることが出来れば、まずまずの出だしと言えるだろう。 次にさらにレベルを上げ、サイトをスピードアップさせて、より効率良く動かす上で役に立つテクニックを紹介していく。効率を高めることが出来れば、ユーザーエクスペリエンス
Google Chrome の履歴をスピーディーに検索できる拡張機能「Holmes」 : 二十歳街道まっしぐら
HolmesはChromeの履歴をスピーディーに検索できる拡張機能です。 Chromeに保存された検索履歴を素早く検索し、そのページを開くことができます。 ショートカットも用意されているので、慣れると非常に便利かと。 以下に使ってみた様子を載せておきます。 まず「Holmes」にアクセスしましょう。 Chromeに拡張機能をインストールしましょう。 このようにChrome内の履歴を検索できます。 とても早く検索してくれストレスなく開くことができますよ。 Ctrl+数字キーで検索結果のページを開けます。 また、Chrome標準の検索バーに「*」を入力してTabキーを押すことで、 履歴の検索をすることも可能。 履歴を検索するときに便利なので入れておいて損はないですね～。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
事前レンダリングでページ遷移した時の表示速度を爆速にする | TechMemo
bbfriend.net
ブログが壊れたのは WordPress プラグイン DB Cache Reloaded Fix が原因でした。…と垢BANの愉快な仲間たち。
