○はじめに

(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

⑥関数型コンポーネントを使う

sample.vue

<template functional></template>

関数型コンポーネントはただの関数なので、描画コストは少ないです。

リアクティブデータがなく、状態の管理や、watchも無い、ただの関数のため描画コストは少ないです。

⑦lazy load を使用する

画像の遅延読み込みをさせるJavaScriptのライブラリです。

スクロール位置に応じて画像の読み込みをさせるので、初期表示が早くなります。

画像の多いページに使用すると効果がありそうですね。

⑧必須のドメインへの事前接続

以上です。

○参考