○はじめに
(50秒)
こちらの記事は、「mineoの節約モード中のテザリング：速度1.5Mbps時」の調査です。
個人アプリケーションをConoHa VPSに運用を始めたのですが、初回読み込みがあまりにも遅すぎる(50秒 !?!?)ので改善するに至りました。
（これでも、画像サイズなどを変えたので早くした方です・・・）
UXとか向上させるために、SPAにしているのにこれでは意味がない。笑
Laravelオンリーでいいやん・・・
と、思いましたが原因を探ります。
おそらく、原因は多々あると思いますがその中でも「jsファイル/cssファイル/画像/Vue.js」の読み込みが遅かったので調べて改善していきたいと思います。
○今回使用したインフラ・開発言語・環境
| インフラ・開発言語・環境 |
|---|
| ConoHa VPS |
| CentOS 8 |
| Apache 2.4.37 |
| PHP 7.4.23 |
| Laravel 6.20.32 |
| Composer version 2.1.7 |
| Vue v3.x |
○js/css/画像の読み込みが遅くなっている原因達の修正
⓪画像サイズを疑う
| 変更前 | 変更後 | |
|---|---|---|
| 画像サイズ | 約8MB | 803KB |
| 時間 | 1分以上 | 約50s |
今回、使用しているサイズの大きい画像の圧縮です。
こちらの、squooshで画像圧縮可能です。
①本番環境で、css/jsのファイルを圧縮する
●＜結果＞
| 変更前 | 変更後 | |
|---|---|---|
| 結果 | app.js：402KB | |
| 時間 | 約50s | 約7s |
●＜結論＞
$ npm run developmentの実行でかなりマシになリました。
本番環境で、css/jsのファイルを圧縮します。
本番環境のアセットコンパイル時に、必要みたいですね。
早くなったとはいえ、まだ平均7秒ほどかかります。
networkタブでも原因のほとんどは、js(Vue)でした。改善していきます。
②gzip圧縮をする
（圧縮前）/js/app.js
（圧縮後）/js/.gz
●＜結果＞
| 変更前 | 変更後 | |
|---|---|---|
| 結果 | app.js:402kB | /js/.gz：128KB |
| 時間 | 約7s | 約3.5s~4.5s |
●＜アクション＞
- gzip圧縮とは?
→ファイルサイズを圧縮する方法の１つ。
対象コンポーネントは、テキストファイル（HTML,CSS,JSなど）です。
以下記事参考に。
●＜エラーが出た際参考に＞
・$ npm run productionでエラーが出れば、package.jsonの、compression-webpack-pluginのVersionを変更すれば改善すると思います。
ここまで修正できれば、致命的な遅延は抑えれたはずです。
細かいところを修正していきます。
③【Vue.js】ページごとにJSファイルを分割する
④【Vue.js】データを取得するタイミングを変更する
fetch → ブラウザ側で呼び出す形に変更する
⑤【Vue.js】更新頻度が高くないデータは、Vueのビルド時に事前にAPIを叩いて取得する。
つまり、更新頻度が低いコンテンツのデータを、ビルド中にAPIを叩いて、事前にJSONとして保持させる
そのビルドしたJSとさっき保持したJSONごと、そのままサーバに上げてしまいます。そうすることで、ユーザーがページを表示するたびにAPIを叩いてデータを取得してくる処理がまるっと消えて、その分表示が速くなります。
https://logmi.jp/tech/articles/321270
⑥関数型コンポーネントを使う
<template functional></template>
関数型コンポーネントはただの関数なので、描画コストは少ないです。
リアクティブデータがなく、状態の管理や、watchも無い、ただの関数のため描画コストは少ないです。
⑦lazy load を使用する
画像の遅延読み込みをさせるJavaScriptのライブラリです。
スクロール位置に応じて画像の読み込みをさせるので、初期表示が早くなります。
画像の多いページに使用すると効果がありそうですね。
⑧必須のドメインへの事前接続
以上です。
○参考