Google PageSpeed와 싸우고 나서 배운 세 가지

9551 단어 pagespeedgooglecssjavascript
최근에 새로운 디자인의 랜딩 페이지를 유지할 기회가 있었지만 로딩 성능 문제와 이전 페이지에 비해 전환율이 많이 떨어졌습니다.

내가 배우는 것은 다음과 같습니다.
  • 이미지 최적화(압축/지연 로드)
  • CSS/JS 로드 최적화( critical path rendering )
  • 코드 분할



    • 1. 이미지 최적화



    이미지는 수정하기 가장 쉽고 로딩 속도의 주요 요소입니다. TinyJPG과 같은 이미지 압축을 사용하여 이미지를 압축하고 페이지 크기를 최소화하며 이미지를 점진적으로 설정하는 것이 중요합니다.

    이미지를 프로그레시브 이미지로 만들려면 컴퓨터에 Imagemagick이 있는 경우 다음을 시도할 수 있습니다.

    for i in ./*.jpg; do convert -strip -interlace Plane $i $i; done

    또한 화면 밖에 있는 불필요한 이미지를 불러오는 것을 방지하기 위해 Lazy load를 사용할 필요가 있다.


    2. CSS/JS 로딩 최적화



    CSS



    Pagespeed에는 "Optimize CSS Delivery"이라는 규칙이 있습니다. 즉, 첫 번째 렌더링에 포함되지 않는 모든 것(즉, 화면 밖)은 렌더링 속도를 차단합니다.

    화면 외부 CSS의 로드를 지연하려면 snippet by Google을 사용하여 body 태그의 끝에 배치할 수 있습니다.

    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="<your-css-file>.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
</script>

    또한 중요한 CSS(즉, 뷰포트에)를 인라인 및 내부에 배치해야 합니다<head>. 예를 들어:

    <head>
    <style>
      .blue{color:blue;}
    </style>
</head>

    자바스크립트



    JS의 경우 다음과 같이 defer , async 스크립트를 웹 페이지에 비동기식으로 삽입하려고 시도할 수 있습니다.

    const script = document.createElement('script');
script.src = "//example.com/widget.js";
document.getElementsByTagName('head')[0].appendChild(script);

    화면 밖 기능의 경우 속성을 "지연"으로 설정하고 본문 끝에 배치할 수 있습니다. 즉, 전체 페이지가 렌더링된 후에 로드됩니다. 예를 들어:

    
<!--preload js for important func-->
<link rel="preload" href="script.js" as="script"> 

<!--load after rendered-->
<script src="script.js" defer></script>

<!--will load asynchronously-->
<script src="script.js" async></script>

    gulp용 gulp-inline-source 또는 webpack용 critters과 같이 인라인 CSS를 자동으로 추가하는 데 도움이 되는 몇 가지 도구가 있습니다.


    3. 코드 분할



    스크립트가 중요하지 않고 화면의 기능(예: 고정 메뉴)에 해를 끼치는 경우 몇 개의 파일로 분할하고 필요할 때 로드할 수 있습니다. webpack 또는 React의 경우 webpack 에서 "코드 분할"기능을 사용할 수 있습니다.

    React의 경우 new lazy 또는 react-loadable 을 사용하는 것이 훨씬 더 쉽습니다.

    페이지 내 불필요한 코드를 삭제하거나 다듬어 사용자에게 최소화된 버전을 제공하는 것을 잊지 마세요!

    결과





    그 페이지는 마침내 모바일에서 거의 80개를 얻었고 데스크톱 버전에서는 거의 완벽했습니다. 모바일의 점수는 확실히 개선의 여지가 있기 때문에 완벽하지는 않습니다.

    이것에 대해 어떤 생각이 있습니까? 귀하의 통찰력을 알려 주셔서 감사합니다! :)
    서버 방해 해제: NodeJS 협업 멀티태스킹
    drbd 소개 및 배치 방법 [속속 업데이트]

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage