pagespeed-quest 0.2.1 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.ja.md +22 -2
  2. package/README.md +21 -1
  3. package/package.json +2 -1
package/README.ja.md CHANGED
@@ -24,7 +24,7 @@ Web APIのモックツールである[VCR](https://github.com/vcr/vcr)をご存
24
24
 
25
25
  ## 使い方
26
26
 
27
- Node JS 18以上が必要です。
27
+ Node JS 20以上が必要です。
28
28
 
29
29
  ### プロジェクトの作成
30
30
 
@@ -62,6 +62,26 @@ yarn psq lighthouse playback
62
62
 
63
63
  レポートページが自動で表示されます。レポートファイル等は`artifacts`ディレクトリに作成されます。
64
64
 
65
+ ### loadshowによる読み込み過程の動画の作成
66
+
67
+ 次の`loadshow`サブコマンドを使うと、[loadshow](https://github.com/ideamans/loadshow)を用い、再生したWebページの読み込み過程を動画として出力できます。
68
+
69
+ ```sh
70
+ yarn psq loadshow playback
71
+ ```
72
+
73
+ 動画は`artifacts/loadshow.mp4`として出力されます。
74
+
75
+ また、Webページの記録においてもloadshowを利用できます。
76
+
77
+ ```sh
78
+ yarn psq loadshow recording https://exmaple.com/
79
+ ```
80
+
81
+ Lighthouseとloadshowでは、Webページの読み込みに関するブラウザの挙動が少し違います。
82
+
83
+ 動画によるスピード改善の確認が主な目的である場合は、`loadshow recording`サブコマンドを利用することを推奨します。
84
+
65
85
  ## 再生プロキシの起動
66
86
 
67
87
  次のコマンドでWebページを再生するプロキシのみを起動できます。
@@ -87,4 +107,4 @@ PageSpeed Questは、Webアプリケーションのリリースを必要とし
87
107
 
88
108
  ## 連絡先
89
109
 
90
- 技術サポートやビジネス利用に関しては contact@ideamans.com まで連絡ください。
110
+ 技術サポートやビジネス利用に関しては <contact@ideamans.com> まで連絡ください。
package/README.md CHANGED
@@ -24,7 +24,7 @@ Thanks to this mechanism, instead of actually modifying the application, you can
24
24
 
25
25
  ## How to use
26
26
 
27
- Node JS 18 or higher is required.
27
+ Node JS 20 or higher is required.
28
28
 
29
29
  ### Creating a project
30
30
 
@@ -62,6 +62,26 @@ yarn psq lighthouse playback
62
62
 
63
63
  A report page is automatically displayed. Report files and the like are created in the `artifacts` directory.
64
64
 
65
+ ### Creating a video of the loading process with loadshow
66
+
67
+ By using the following `loadshow` subcommand, you can output the playback process of a loaded web page as a video using loadshow.
68
+
69
+ ```sh
70
+ yarn psq loadshow playback
71
+ ```
72
+
73
+ The video will be output as artifacts/loadshow.mp4.
74
+
75
+ You can also use loadshow to record the loading of a web page.
76
+
77
+ ```sh
78
+ yarn psq loadshow recording <https://example.com/>
79
+ ```
80
+
81
+ Lighthouse and loadshow behave slightly differently when it comes to how the browser handles web page loading.
82
+
83
+ If the main goal is to check speed improvements through video, it is recommended to use the `loadshow recording` subcommand.
84
+
65
85
  ## Launching the playback proxy
66
86
 
67
87
  You can launch only the proxy that plays back the web page with the following command.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pagespeed-quest",
3
- "version": "0.2.1",
3
+ "version": "0.3.1",
4
4
  "type": "module",
5
5
  "description": "A framework for efficient web front-end speed improvement",
6
6
  "main": "build/index.js",
@@ -59,6 +59,7 @@
59
59
  "iconv-lite": "^0.6.3",
60
60
  "jschardet": "^3.0.0",
61
61
  "lighthouse": "^12.2.1",
62
+ "loadshow": "^1.0.9",
62
63
  "node-watch": "^0.7.4",
63
64
  "pino": "^9.4.0",
64
65
  "pino-pretty": "^11.2.2",