○ 소개

(50초)


이 기사는 "미네오 절약 모드 중 테더링 : 속도 1.5Mbps시"의 조사입니다.

개인 어플리케이션을 ConoHa VPS에 운용을 시작했습니다만, 첫회 로딩이 너무 느리기 때문에(50초!?!?) 개선하기에 이르렀습니다.

(이것도, 화상 사이즈등을 바꾸었으므로 빨리 한 분입니다・・・)

UX라든지 향상시키기 위해, SPA로 하고 있는데 이것에서는 의미가 없다. 웃음
라라벨 온리로 좋다・・・

라고 생각했지만 원인을 찾습니다.

아마 원인은 많이 있다고 생각합니다만 그 중에서도 「js파일/css파일/이미지/Vue.js」의 로딩이 늦었으므로 조사해 개선해 나가고 싶습니다.

○이번 사용한 인프라·개발 언어·환경

인프라, 개발 언어, 환경


ConoHa VPS

CentOS 8

아파치 2.4.37

PHP 7.4.23

라라벨 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초 정도 걸립니다.

네트워크 탭에서도 원인의 대부분은 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를 두드려 데이터를 가져오는 처리가 완전히 사라지고 그만큼 표시가 빨라집니다.
h tps : // / g. jp / te ch / archi c ぇ s / 321270

⑥함수형 컴포넌트 사용

sample.vue

<template functional></template>

함수형 컴포넌트는 단지 함수이므로 그리기 비용은 적습니다.

리액티브 데이터가 없고, 상태의 관리나, watch도 없는, 단지 함수 때문에 드로잉 비용은 적습니다.

⑦lazy load 사용

이미지의 지연 로딩을 시키는 JavaScript의 라이브러리입니다.

스크롤 위치에 따라 이미지를 불러오므로 초기 표시가 빨라집니다.

이미지가 많은 페이지에 사용하면 효과가 있을 것 같네요.

⑧ 필수 도메인에 사전 연결

이상입니다.

○참고