내 웹 사이트 가속화

나의 이번 주말 프로젝트는 나를 가속화시키는 것이다personal website.Google Lighthouse의 성적이 불합격한 후에 나는 이 문제를 계속 연구하기로 결정했다.일련의 필요한 최적화를 거친 후에 이 사이트는 현재 로딩 속도가 현저히 빨라지고 Lighthouse 점수가 크게 향상되었다.

이제 웹 사이트 속도를 높이는 주요 최적화를 여러분과 공유하겠습니다.
이미지 최적화
내 사이트의 이전 버전에는 3MB의 JPEG 파일이 있는데, 나는 그것을 완전한 배경 이미지로 사용한다.같은 모양을 유지하고 싶습니다. 이것은 JPEG보다 압축 성능이 좋은 형식으로 이 그림을 교체해야 한다는 것을 의미합니다.나는 일찍이 새로운 AVIF format을 고려한 적이 있지만, 불행하게도, 그것은 현재 좋은 지지를 얻지 못했다.

따라서 기존 JPEG와 PNG 이미지를 WebP 이미지로 대체하기로 했습니다. WebP 형식이 더 잘 지원되었기 때문입니다.

이미지 형식을 바꾸는 것 외에, 나는 내 사이트에서 사용하는 이미지가 화면에 표시된 이미지와 완전히 같다는 것을 확보한다.
예를 들어 내가 이전에 사용한 초상화 이미지의 크기는 사이트에 표시된 200x200의 작은 원형 이미지보다 훨씬 크다.이것은 이 불필요한 큰 파일을 다운로드하는 데 귀중한 밀리초를 낭비할 뿐만 아니라 브라우저도 이미지 크기를 조정하는 데 시간을 낭비할 수 있다는 것을 의미한다.정확한 크기의 이미지를 배치함으로써 밀리초를 절약할 수 있다.
불필요한 JavaScript 제거
내 이미지를 최적화해야 하는 것 외에 라이트하우스는 불필요한 자바스크립트 스크립트를 삭제함으로써 내 사이트를 더욱 최적화할 수 있다고 밝혔다.내 사이트에서 3개의 JS 스크립트를 실행했다. 가상 옵션 카드 생성기이다.구글 분석 스크립트;Google ReCaptcha 스크립트가 하나 더 있습니다.
나는 가상 옵션 카드 생성기를 보류하기로 결정했다. 왜냐하면 그것은 나의 사이트를 강화시켰기 때문이다.나는 구글 분석 스크립트를 삭제하기로 결정했다. 왜냐하면 나는 그것을 필요로 하지 않는다는 것을 깨달았기 때문이다. 왜냐하면 나는 전자상거래와 같은 개인 사이트의 기능을 사용하지 않았기 때문이다.
마찬가지로 Google ReCaptcha 스크립트를 삭제하고 폼 설정을 조정하여 FormSpree에서 관리되는 ReCaptcha 함수를 사용합니다.이러한 타사 JavaScript 스크립트를 삭제하면 브라우저가 웹 사이트를 불러오고 보여주는 데 걸리는 시간이 현저히 줄어든다.
CDN 기울이기
최적화되기 전에 내 사이트는 3개의 CDNFormSpree contact form, Google Fonts, Font Awsome을 사용했다.현지에서 위탁 관리하는 자산으로 이 자산들을 교체하여 시간을 크게 절약하였다.
구글 글꼴
구글 글꼴 CDN 사용을 대체하기 위해 필요한 글꼴을 다운로드하고 Bootstrap 인터넷 글꼴로 변환했습니다.그리고 웹 사이트 프로젝트 디렉터리에 만든 fonts 폴더로 woff2 글꼴 파일을 이동하여 CSS 파일에 설명합니다.
예를 들어 내가 사이트에서 사용하는 구글 글꼴 중 하나는 Font Squirrel 이다.@font-face(위치 포함)를 선언하여 CSS 파일로 가져옵니다.

@font-face {
  font-family: "Righteous";
  src: url(fonts/righteous-regular-webfont.woff2);
  font-display: swap;
}

그리고 적절한 CSS 구성 요소에 사용합니다. 이 예에서 배너:

.banner h1 {
  ...
  font-family: "Righteous", cursive;
  ...
}

상형이체자
최적화되기 전에, 나의 사이트는 Righteous에 의존하여 페이지 밑에 사용되는 링크드 인, Google, GitHub 아이콘을 얻었다.이 점을 최적화하기 위해서, 나는 Font Awesome 으로 전환했다. 이 아이콘들을 단일한 글꼴 파일로 다운로드할 수 있고, 나는 로컬에서 위탁 관리할 수 있다.(이 글꼴 파일을 다운로드할 때 Fontastic은 코드에 아이콘을 삽입하기 위해 적절한 CSS 및 HTML 세션을 제공합니다.)
독자적으로 창립하다
저는 이전에 제 사이트에 Bootstrap을 넣어서 레이아웃을 조정했지만 CDN에서 Bootstrap을 다운로드하고 브라우저에서 Bootstrap 클래스를 보여주는 데 걸리는 시간이 합리적이라는 것을 증명할 수 없다고 생각합니다.부트를 삭제한 후, 나는 내가 원하는 외관을 얻기 위해 HTML과 CSS를 조정하는 데 약간의 시간이 필요하다는 것을 발견했다.
빠른 웹 사이트
이러한 최적화는 진작에 이루어졌을 것이다. 내 사이트가 라이트하우스에서 더 높은 점수를 얻은 것을 제외하고 속도가 현저히 빠른 사이트에서 좋은 점을 느낄 수 있다.저는 HubSpotFontastic에서 제 사이트를 테스트했는데 최적화 전보다 더 높은 점수를 주었습니다.
Website Grader