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

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

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

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

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

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

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

최신 이미지 형식 사용

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="A fallback image">
</source></source></picture>

항상 이미지를 압축하세요! Sharp, ImageOptim 또는 Squoosh와 같은 도구를 사용하면 눈에 띄는 품질 손실 없이 이를 달성할 수 있습니다.

지연 로딩 구현

<img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" 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 인라인 및 중요하지 않은 스타일 연기:

  <!-- 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'">

사용하지 않는 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. 성능 모니터링

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

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

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="A fallback image">
</source></source></picture>

빠른 승리 체크리스트

• [ ] Gzip/Brotli 압축 활성화
• [ ] 적절한 캐시 헤더 설정
• [ ] HTML, CSS 및 JavaScript 축소
• [ ] 웹 글꼴 로딩 최적화
• [ ] 사용하지 않는 종속성 제거
• [ ] 프레임워크의 프로덕션 빌드 사용

결론

성능 최적화는 일회성 작업이 아니라 지속적인 프로세스라는 점을 기억하세요. 이미지 최적화 및 적절한 로딩 기술과 같은 쉬운 작업부터 시작한 다음 필요에 따라 더 복잡한 최적화로 넘어갑니다.

어떤 성능 최적화 기술이 귀하에게 가장 효과적이었습니까? 아래 댓글로 여러분의 경험을 공유해 주세요!

즐거운 코딩하세요! ?

위 내용은 이 프런트엔드 마술로 내 웹사이트를 더 빠르게 만들었습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!