이 프런트엔드 마술로 내 웹사이트를 더 빠르게 만들었습니다.-JS 튜토리얼-php.cn

이 프런트엔드 마술로 내 웹사이트를 더 빠르게 만들었습니다.

Susan Sarandon

풀어 주다： 2024-12-07 05:06:15

원래의

590명이 탐색했습니다.

I Made My Website Faster With These Frontend Magic Tricks

안녕하세요, 동료 개발자 여러분! ?

웹사이트 속도가 느리다고 사용자가 불평한 적이 있나요? 아니면 새로운 기능이 추가될 때마다 Lighthouse 성능 점수가 점차 떨어지는 모습을 공포에 질려 지켜보신 적이 있으신가요? 저를 믿으세요. 저는 거기에 가봤습니다. 오늘은 웹사이트를 매우 빠르게 만드는 프런트엔드 최적화 기술에 대해 자세히 알아보겠습니다.

왜 성능에 관심을 가져야 합니까?

잠시 현실을 직시해 보겠습니다. Google에 따르면 모바일 사용자의 53%가 로드하는 데 3초 이상 걸리는 사이트를 이탈합니다. 엄청나네요! 또한 Google은 2021년부터 Core Web Vitals를 순위 요소로 사용해 왔습니다. 따라서 사이트의 순위를 높이고 사용자 만족도를 유지하려면 성능은 선택 사항이 아니라 필수입니다.

1. 이미지 최적화: 첫 번째 큰 승리

이미지는 웹페이지에서 가장 큰 자산인 경우가 많습니다. 전문가처럼 처리하는 방법은 다음과 같습니다.

지연 로딩 구현

<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

로그인 후 복사

2. 자바스크립트 최적화 기술

JavaScript는 사이트 성능을 향상시키거나 망칠 수 있습니다. 다음은 실전에서 검증된 몇 가지 전략입니다:

코드 분할

하나의 큰 묶음을 보내는 대신 코드를 작은 덩어리로 나누세요.

// Before
import { heavyFeature } from './heavyFeature';

// After
const heavyFeature = () => import('./heavyFeature');

로그인 후 복사

성과 예산 사용

웹팩 구성에 다음을 추가하세요.

module.exports = {
  performance: {
    maxAssetSize: 244000, // bytes
    maxEntrypointSize: 244000,
    hints: 'error'
  }
};

로그인 후 복사

3. CSS 최적화

중요한 CSS

중요한 CSS 인라인 및 중요하지 않은 스타일 연기:

<head>
  <!-- Critical CSS inline -->
  <style>
    /* Your critical styles here */
  </style>

  <!-- Non-critical CSS deferred -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

로그인 후 복사

사용하지 않는 CSS 제거

PurgeCSS를 사용하여 사용하지 않는 스타일을 제거하세요.

// postcss.config.js
module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: ['./src/**/*.html', './src/**/*.js']
    })
  ]
};

로그인 후 복사

4. 현대적인 로딩 기술

리소스 힌트

<link rel="preconnect" href="https://api.example.com">
<link rel="preload" href="critical-font.woff2" as="font" crossorigin>

로그인 후 복사

교차로 관찰자 사용

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Load your content
      loadContent();
    }
  });
});

observer.observe(document.querySelector('.lazy-section'));

로그인 후 복사

5. 성능 모니터링

최적화만 하고 잊어버리지 마세요! 모니터링 설정:

배포 파이프라인에서 Lighthouse CI 사용
Google Search Console을 통해 핵심 웹 바이탈 모니터링
웹 바이탈과 같은 도구를 사용하여 실제 사용자 모니터링(RUM)을 설정합니다.

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="A fallback image">
</picture>

로그인 후 복사