本番環境の初回読み込みが遅すぎる！読み込み最適化出来た方法をまとめた

#○はじめに

(50秒)
![スクリーンショット 2021-09-18 18.18.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536974/bfa24e87-0b23-67a4-c3f6-5190621b051e.png)

**こちらの記事は、「mineoの節約モード中のテザリング：速度1.5Mbps時」の調査です。**

個人アプリケーションをConoHa VPSに運用を始めたのですが、初回読み込みがあまりにも遅すぎる<font color="Red">(50秒 !?!?)</font>ので改善するに至りました。

（これでも、画像サイズなどを変えたので早くした方です・・・）

UXとか向上させるために、SPAにしているのにこれでは意味がない。笑
Laravelオンリーでいいやん・・・

と、思いましたが原因を探ります。

おそらく、原因は多々あると思いますがその中でも<font color="Red">「jsファイル/cssファイル/画像/Vue.js」</font>の読み込みが遅かったので調べて改善していきたいと思います。

# ○今回使用したインフラ・開発言語・環境

| インフラ・開発言語・環境 |
|---|
| 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](https://squoosh.app/)で画像圧縮可能です。

##①本番環境で、css/jsのファイルを圧縮する

###●＜結果＞

|   | 変更前  | 変更後 |
|---|---|---|
| 結果  |   | app.js：402KB  |
|  時間 |  約50s | 約7s  |

###●＜結論＞
```$ npm run development```の実行でかなりマシになリました。

**本番環境で、css/jsのファイルを圧縮します。**
本番環境のアセットコンパイル時に、必要みたいですね。

![スクリーンショット 2021-09-18 18.44.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536974/f66fabf3-c96d-18ed-eb86-228ce62737a7.png)

早くなったとはいえ、まだ**平均7秒**ほどかかります。

networkタブでも原因のほとんどは、```js(Vue)```でした。改善していきます。

##②gzip圧縮をする

（圧縮前）/js/app.js
![スクリーンショット 2021-09-18 21.19.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536974/0abb38fa-cd27-7f2a-28b5-f8fe8df5390d.png)

（圧縮後）/js/.gz
![スクリーンショット 2021-09-18 21.20.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536974/6dab08bb-7b9f-c228-894a-6f121595169e.png)

###●＜結果＞

|   | 変更前  | 変更後 |
|---|---|---|
| 結果  |  app.js:402kB | /js/.gz：128KB  |
|  時間 |  約7s | 約3.5s~4.5s  |

###●＜アクション＞

* gzip圧縮とは?

→**ファイルサイズを圧縮する方法の１つ。**
対象コンポーネントは、テキストファイル（HTML,CSS,JSなど）です。

以下記事参考に。

https://qiita.com/nittannittan/items/386f5e20478a28413429

###●＜エラーが出た際参考に＞

・```$ npm run production```でエラーが出れば、```package.jsonの、compression-webpack-plugin```のVersionを変更すれば改善すると思います。

**ここまで修正できれば、致命的な遅延は抑えれたはずです。**

細かいところを修正していきます。

##③【Vue.js】ページごとにJSファイルを分割する

https://qiita.com/nobu-maple/items/16bfd5cc8c3cc01763a4

##④【Vue.js】データを取得するタイミングを変更する

fetch → ブラウザ側で呼び出す形に変更する

https://logmi.jp/tech/articles/321270

##⑤【Vue.js】更新頻度が高くないデータは、Vueのビルド時に事前にAPIを叩いて取得する。

>つまり、更新頻度が低いコンテンツのデータを、ビルド中にAPIを叩いて、事前にJSONとして保持させる

>そのビルドしたJSとさっき保持したJSONごと、そのままサーバに上げてしまいます。そうすることで、ユーザーがページを表示するたびにAPIを叩いてデータを取得してくる処理がまるっと消えて、その分表示が速くなります。
https://logmi.jp/tech/articles/321270

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

```sample.vue
<template functional></template>
```

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

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

https://jp.vuejs.org/v2/guide/render-function.html#%E9%96%A2%E6%95%B0%E5%9E%8B%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88

##⑦lazy load を使用する

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

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

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

https://cluster-seo.com/blog/lazy-load-javascript-library.html

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

https://tech.smartcamp.co.jp/entry/2019/08/16/180000

以上です。

#○参考
https://kouya17.com/posts/19/

https://www.codit.work/notes/u2t9igzn0cooatt3t1sz/