내연 관건 CSS와 JS는 답방자의 바이트를 낭비할 것이다...아니면 정말?

17357 단어 performancecssfirstpostjavascript

소개하다.
만약 당신이 page speed insights(또는 다른 사이트 성능 감사 도구)에서 100/100의 점수를 얻으려고 시도한 적이 있다면, 당신이 직면하게 될 일은 바로 관건적인 CSS이며, 아마도 관건적인 JS도 있을 것이다.
그것이 무엇인지 모르는 사람들에게 critical CSS는 '접기' 보다 높은 내용을 나타내는 데 필요한 모든 스타일 설명 (페이지를 처음 불러올 때 본 사이트 부분) 이다.브라우저는 이렇게 해야만 방문자가 먼저 본 내용을 나타낼 수 있다.
Critical JS는 모든 JS가'접는 것보다 높게'웹 사이트를 운영하도록 해야 하는 것과 같은 일이다.
페이지가 빨리 표시되는지 확인the advice is to add all of the styles needed to render the "above the fold" content inline within a <style> tag.
또한 중요한 JS가 있다면 내연<script> 라벨에 대해 똑같은 일을 해야 한다.
이렇게 하면 사용자가 사이트를 처음 방문할 때 HTML(인라인 스타일 및 스크립트 포함)만 로드하면 다른 리소스가 로드될 때까지 기다리지 않고 페이지가 표시됩니다.
이것은 당신의 First Contentful Paint배를 높이는 데 있어서 보통 당신의 Largest Contentful Paint배를 높이는 데 매우 중요하다. 이 두 가지 요소는 모두 web vitals의 관건적인 요소이다.
추가적인 장점으로 CSS를 연결하면 보통 Cumulative Layout Shift의 많은 문제를 해결할 수 있는데 이것은 또 하나의 중요한 웹 응용 프로그램이다.
내연 관건 CSS와 관건 JS는 이동 연결에 특히 중요하다. 왜냐하면 이동 연결이 서버에 연결되는 왕복 시간이 반초에 달할 수 있기 때문이다!
그러나 CSS와 JS의 내연에 매우 큰 문제가 있다. 이것은 당신에게 매우 뚜렷하고 바이트를 낭비할 수 있다!
첫 번째 불러오는 시간이 크게 높아졌지만 사용자가 방문한 두 번째 페이지나 되돌아오는 방문자는?
매번 누군가가 당신의 사이트의 여러 페이지를 방문할 때마다, 당신은 모든 관건적인 CSS와 JS를 최하층으로 밀어붙여야 합니다. 설령 브라우저가 모든 외부 CSS와 JS 파일을 캐시한다고 해도.
처음 방문했을 때 '내장' CSS와 JS를 연결한 다음, 이후의 방문할 때마다 브라우저 캐시를 사용하는 해결 방안이 필요합니다.
본문이 해결 방안을 제공할 수 있기를 바랍니다!
주의: 본고에서 관건적인 CSS와 JS를 식별하고 파일에 저장하는 방법을 알고 있다고 가정합니다.이 글은 순전히 앞에서 설명한 낭비 바이트를 어떻게 복원하는지에 관한 것이다.

인라인 CSS 및 JS 해결 계획 작성
이 해결 방안은 원칙적으로 매우 간단하다.
Google은 Google에 접근한 적이 없는 사람들을 위해 내장 CSS와 JS를 제공합니다. Google은 Google이 HTML에 중요한 CSS와 JS를 보내지 않도록 하고, 만약 Google이 Google에 저장되어 있다면.
처음에 나는'이것은 종업원의 일'이라고 생각했다. 왜냐하면 너는 그 녀석들이 할 수 있는 일을 틀림없이 좋아할 거야!
그러나 한 가지 사고를 통해 나는 대부분의 사이트에 대해 더욱 간단한 해결 방안이 있고 실현하기 쉽다는 것을 깨달았다.
우리는 더 이상 서비스 인원을 사용하지 않고 모든 업무를 서버로 옮겼다.
그래서 첫 번째는 우선 우리 방문객을 첫 방문객과 되돌아오는 방문객으로 나누는 것이다.
이것은 아주 간단해, 과자.
서버가 저희 페이지 요청을 받았을 때 저희는 사용자가 특정한 쿠키 집합이 있는지 확인합니다. 만약에 내부 연결 키 CSS와 JS가 있는 페이지를 보내지 않았거나 쿠키가 설정되어 있으면 내부 연결 키 JS와 CSS가 없는 페이지를 보냅니다.
이것은 매우 간단하다.
다음은 사용자가 브라우저를 처음 방문할 때 중요한 CSS와 JS를 브라우저에 캐시해야 합니다.
나는 또다시 종업원에게 뛰어들었지만 그것도 간단했다.
Google 서버에서 쿠키 집합 (첫 방문) 이 없으면 키 CSS를 <head> 의 첫 번째 파일로 추가합니다.파일 해석(대다수 사이트에서 해석 시간은 50밀리초보다 작아야 함)을 제외하고 같은 CSS에 대해 두 번 다시 성명하는 것은 실제적인 벌칙이 없기 때문에 우리는 원래의 상태를 유지할 수 있다.
Google은 다른 JavaScript에 이르기 전에, Google의 자바스크립트에 대해서도 같은 일을 합니다.
JavaScript로 1분 안에 돌아갑니다. (JS를 두 번 추가했을 때의 문제점을 알아차렸을 수도 있기 때문입니다.) 이제 CSS에 주목합시다.

CSS 프로세스
그래서 우리의 과정은 매우 간단하다.
Google 사용자들은 첫 방문이기 때문에 쿠키를 설정하지 않은 페이지를 요청합니다.
그리고 우리 서버는 대체로 다음과 같은 조건문을 가지고 있다. (나는 그것을 간소화하고 PHP를 예로 들었다. 대부분의 사람들이 쉽게 이해할 수 있기 때문이다)
PHP

$inlineCSS = "";
// check if the cookie has NOT been set so we can set it
if(!isset($_COOKIE['hasVisitedCSS'])){
// update the $inlineCSS variable to put our inlineCSS within a `<style>` tag.
    $inlineCSS = '<style>' . file_get_contents('ourInlineStyles.min.css') . '</style>';
// Set the cookie that we check for so we don't send the inline styles again. 
// We set the cookie called "hasVisitedCSS" to have a value of the current time (for use later) and set the expiry one year from now.
    setcookie("hasVisitedCSS", time(), time() + 31536000);
}
HTML
<html>
<head>
    <title>Title</title>

    <?php echo $inlineCSS; ?>
    <link rel="stylesheet" type="text/css" href="ourInlineStyles.min.css" />
<!-- our other styles -->
</head>
네가 사이트의 스타일을 갱신하기 전에, 상기 방법은 모두 매우 효과적이다.
이 점에서, 누군가가 캐시한 CSS는 이미 유행이 지났기 때문에, 만약 그들이 당신의 사이트로 돌아간다면, 그들은 반드시 페이지가 나타나기 전에 그것을 다운로드해야 한다.
이것이 바로 우리가 time()를 사용하여 쿠키의 값을 현재 시간으로 설정한 이유입니다.
우리가 해야 할 일은 CSS 파일이 마지막으로 수정된 시간을 확인하고 그 당시와 비교하는 것이다.만약 그들의 쿠키가 우리가 파일을 수정하기 전에 설치된다면 우리는 간단하게 그들을 위해 CSS를 연결하고 쿠키의 시간을 업데이트할 수 있습니다.
HTML은 변경되지 않으므로 서버측 코드는 다음과 같습니다.
PHP

$inlineCSS = "";
// check if the cookie has NOT been set
if(!isset($_COOKIE['hasVisitedCSS'])){
// update the $inlineCSS variable to put our inlineCSS within a `<style>` tag.
    $inlineCSS = '<style>' . file_get_contents('ourInlineStyles.min.css') . '</style>';
// Set the cookie that we check for so we don't send the inline styles again. 
// We set the cookie called "hasVisitedCSS" to have a value of the current time (for use later) and set the expiry one year from now.
    setcookie("hasVisitedCSS", time(), time() + 31536000);
// if the cookie has already been set we compare the time it holds to the last time the file was updated
}else if($_COOKIE['hasVisitedCSS'] < filetime('ourInlineStyles.min.css')){
   // we have updated our file since we installed the cookie so we inline the CSS again.
    $inlineCSS = '<style>' . file_get_contents('ourInlineStyles.min.css') . '</style>';

}
상기'작업'이 생산에서 사용되지 않았음에도 불구하고 파일이 존재하는지, 쿠키가'동일한 사이트'로 설정되었는지 확인하지 않았습니다.
위의 경고를 제외하고는 완전한 해결 방안이다.우리가 CSS를 업데이트한 후 처음으로 방문하고 돌아온 방문객은 내연 양식을 얻을 수 있고, 돌아온 방문객과 여러 페이지를 보는 방문객은 캐시에서 CSS 서비스를 받을 수 있으며, 모든 CSS를 다시 다운로드할 필요가 없다.
또한 오프라인을 지원하는 점진적인 웹 애플리케이션에도 적합합니다.

이제 JS를 보도록 하겠습니다.
만약 당신이 관건적인 JS를 가지고 있다면, 우리는 매우 유사한 방법을 사용할 수 있지만, 몇 가지'gotchyas'가 있다.
우선, 만약 우리가 완전히 같은 JS를 페이지에 두 번 (한 번은 내연이고, 한 번은 외부 파일에) 추가한다면, 만약 우리가 그것을 고려하지 않는다면, 두 번째 실행할 때 여러 가지 문제를 초래할 수 있다.
그러나 우리는 간단한 방법으로 분류할 수 있다.
스크립트를 시작할 때, 페이지에 변수가 추가되었는지 확인하는 빠른 검사를 추가할 수 있습니다.그리고 스크립트에서 이 변수를 검사하기만 하면 됩니다. 설정이 없으면 스크립트를 실행할 수 있습니다.
다음은 더 좋은 방법이 있는데, 이것은 내가 생각할 수 있는 가장 간단한 예이다.
if(!window.mymagicvariable){
   init1();
}

//all of your functions can go here, assuming redeclaring them will not break your application.
function init1(){
    console.log("hi");
}

window.mymagicvariable = true;
두 번째'gotchya'는 만약에 페이지에 내연 스크립트가 없다면defer 또는 async 속성을 가지기를 원하지 않는다는 것이다.
주요 JS가 실행되기 전에 페이지 렌더링을 의도적으로 차단하기 위해서다.
이제 우리는 되돌아오는 손님과 새로운 방문객을 구분하는 방법이 생겼다. 이것은 매우 간단하다.
PHP

$inlineJS = "";
// we need to make sure we always serve the script, even if the file has not been updated so we set our default here.
$externalJS = '<script src="ourInlineScript.js"/>'; 
// check if the cookie has been set
if(!isset($_COOKIE['hasVisitedJS'])){
// update the $inlineJS variable to put our inlineJS within a `<script>` tag.
    $inlineJS = '<script>' . file_get_contents('ourInlineScript.js') . '</script>';
    $externalJS = '<script src="ourInlineScript.js" async />';

// Set the cookie that we check for so we don't send the inline script again. 
// We set the cookie called "hasVisitedJS" to have a value of the current time (for use later) and set the expiry one year from now.
    setcookie("hasVisitedJS", time(), time() + 31536000);
// cookie already set, let's check we haven't updated the file.
}else if($_COOKIE['hasVisitedJS'] < filetime('ourInlineScript.js')){
   // we have updated our file since we installed the cookie so we inline the JS again.
    $inlineJS = '<script>' . file_get_contents('ourInlineScript.js') . '</script>';
    // no need to update this here as it hasn't changed, just purely for illustration
    $externalJS = '<script src="ourInlineScript.js"/>';
}
HTML
<html>
<head>
    <title>Title</title>
</head>
<body>
<header></header>
<main></main>
<footer></footer>

    <?php echo $inlineJS; ?>
    <?php echo $externalJS; ?>
    <!--other JS goes here-->
</body>

결론
대부분의 사람들은 상술한 방법이 처음 방문할 때 같은 데이터를 두 번 불러온다는 것을 의미한다는 것을 알아차릴 것이다.질문에 대답하십시오: 네, 이것은 처음으로 방문한 전체 페이지의 불러오는 시간을 약간 증가시킬 것입니다. 그러나 장점은 단점보다 훨씬 큽니다. 그리고 이런 기술을 사용하면 100/100의 네트워크 관건에 쉽게 도달할 수 있습니다. (만약 당신이 모든 다른 일을 정확하게 끝냈다고 가정하면)
이 글을 쓴 후에 저는 더 복잡한 사이트(SAAS 스타일의 사이트)에서 서비스 직원을 사용해서 이 점을 실현하기로 결정했습니다. 그러면 저는 파일을 캐시할 수 있고 실제로 페이지에 추가할 필요가 없습니다. (이렇게 하면 저는 모든 다른 일을 끝낸 후에 CPU와 네트워크 부하가 비교적 많은 사이트에서 네트워크와 CPU가 조용한 상태에 있을 때까지 다운로드를 미룰 수 있습니다).
그럼에도 불구하고 상술한 기술은 관건적인 JS와 CSS가 비교적 작고 영향이 적은 사이트에 적용되며 서비스 인원 기반의 해결 방안보다 실현과 유지보수가 더욱 쉽다.나는 여전히 간단하고 복잡한 사이트에서 상술한 기술을 사용하는데 Page Speed Insights에서의 득점은 모두 95점 이상이고 캐시 메커니즘을 제거한 후에 첫 번째 방문객의 득점은 아무런 개선이 없었다.
나는 서비스 종사자들이 미래에 일을 하는 방식에 관한 글을 발표하여 당신들 같은 복잡한 사이트를 가진 사람들이 참고하도록 제공할 것이다.
마지막으로 저는 관건적인 CSS와 JS는 매우 중요하고 특히 the Google Experience update coming in May.와 웹의 중요한 정보를 대량으로 사용하는 데 매우 중요하다고 말하고 싶습니다.
이상은 귀하가 이 기초 위에서 자신의 관건적인 CSS와 JS 솔루션을 실현할 수 있으며, 되돌아오는 방문자와 여러 페이지를 보는 방문자의 모든 요청에 KB를 추가할 필요가 없습니다.

마지막 경고
상기 코드 예시는 테스트를 거치지 않았고 생산도 준비하지 않았다.
그것들은 안전한 구멍, 구멍 또는 완전한 오류가 존재할 수 있습니다!
코드 예시만 사용해서 어떻게 스스로 실현하는지에 대한 지침으로 삼으십시오.
만약 당신이 코드에서 어떤 뚜렷한 오류를 발견한다면, 나에게 알려주십시오. 나는 그것들을 바로잡을 것입니다.

초과의 자질구레한 일
실험을 보고 싶으세요?
이 웹 사이트https://klu.io는 다음과 같은 측면에서 높은 점수를 얻을 수 있도록 설계되었습니다.

  • Page Speed Insights(99 또는 100/100)

  • Mozilla Observatory (website security headers) (125/100)
    • Lighthouse(구글 크롬의 개발자 도구)의 접근성(100/100), 최적 실천(100/100), 검색엔진 최적화(100/100)에서도 높은 점수를 받았다.유감스럽게도progressive 웹 응용 프로그램이 고장나서 삭제할 수밖에 없었지만, 오프라인으로 작업한 적이 있습니다.
    비록 접근성 테스트에서 높은 점수를 얻었지만, 시간의 추이에 따라 여전히 일부 접근성 문제가 해결되어야 한다.나도 그것의 모든 내용을 완성하지 못했다.
    저는 사이트 디자인에 대해 항상 호감을 가지고 있습니다. 저는 글의 마지막 몇 달 동안 공유할 것입니다. 왜냐하면 우리는 새로운 사이트를 설립하고 브랜드를 바꾸고 있기 때문입니다.
    이것은 내가 생각할 수 있는 가장 좋은 방식이다. KLUIO 사이트가 은퇴하기 전에 브랜드와 아름다운 이별을 보내는 것이다.
    나는 네가 이 문장을 즐겨 읽기를 바란다. 어떤 문제든지 물어볼 수 있기를 바란다.
    HYSBZ - 2243 [SDOI 2011] 염색 (트 리 체인 분할)
    증가 하 는 두 개의 질서 있 는 링크 를 증가 하 는 질서 있 는 링크 로 합 칩 니 다 (C 언어 프로 그래 밍 실현)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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