ฉันใช้ข้อมูลเชิงลึกของ Google PageSpeed ​​เพื่อพยายามปรับปรุงประสิทธิภาพเว็บไซต์ของฉันและจนถึงตอนนี้ก็พิสูจน์แล้วว่าประสบความสำเร็จอย่างมาก สิ่งต่าง ๆ เช่นการชะลอการทำงานของสคริปต์ทำได้อย่างสวยงามเนื่องจากฉันมี jQuery's รุ่นในบ้านที่.ready()จะเลื่อนการทำงานของสคริปต์จนกระทั่งหน้าโหลดเต็มทั้งหมดที่ฉันต้องทำคือทำแบบอินไลน์ฟังก์ชั่นเฉพาะนั้นและย้ายสคริปต์แบบเต็มไปยังส่วนท้ายของหน้า มันใช้งานได้ดีมาก

แต่ตอนนี้ฉันพบว่าตัวเองจ้องมองที่จุดสีเหลืองที่เหลืออยู่ในรายการตรวจสอบ: "กำจัด CSS บล็อกการแสดงผลในเนื้อหาด้านบนพับ"

วิธีการตั้งค่า CSS ของฉันคือการมี_.cssไฟล์ทั่วโลกหนึ่งไฟล์ที่มีสไตล์ที่ใช้กับโครงสร้างหน้าเว็บโดยทั่วไปหรือใช้มากกว่าหนึ่งหรือสองแห่งทั่วทั้งไซต์ หน้าส่วนใหญ่จะมีไฟล์ CSS ที่เชื่อมโยง (เช่นparty.phpมีparty.css) ที่มีสไตล์เฉพาะสำหรับหน้านั้น ไฟล์ CSS ทั้งหมดจะถูกแคชอย่างไม่มีกำหนดเมื่อฉันผนวก/t=FILEMTIMEเข้ากับชื่อไฟล์ (และลบออกด้วย. htaccess ในภายหลัง) เพื่อรับประกันว่าไฟล์จะได้รับการอัปเดตเมื่อมีการเปลี่ยนแปลง

อย่างไรก็ตาม Google ขอแนะนำการสร้างสไตล์ที่สำคัญที่จำเป็นสำหรับเนื้อหาที่อยู่ด้านบน ปัญหาคือ ... ดีลองดูภาพหน้าจอนี้: http://prntscr.com/1qt49e

ที่คุณสามารถดู ... ทั้งหมดของเนื้อหาที่อยู่เหนือ-the-พับ! ผู้คนเกลียดการเลื่อนโดยเฉพาะอย่างยิ่งในเกมที่เกี่ยวข้องกับการโหลดหลายหน้า ดังนั้นฉันจึงออกแบบเว็บไซต์ให้พอดีกับหน้าจอเดียว (สมมติว่ามีความละเอียดที่ดีพอ) ดังนั้นหมายความว่า ... ทั้งหมดของรูปแบบที่นำไปใช้กับข้างต้นครึ่งหน้าเนื้อหา! ดังนั้น ... มีวิธีแก้ไขไหม? หรือฉันติดอยู่กับเครื่องหมายสีเหลืองนั้นบนคะแนนที่ใกล้เคียงอย่างสมบูรณ์?

มีการถามคำถามที่เกี่ยวข้องมาก่อน: อะไรคือ "เนื้อหาเหนือเนื้อหา" ใน Google Pagespeed

ก่อนอื่นคุณต้องสังเกตว่านี่คือทั้งหมดที่เกี่ยวกับ ' หน้ามือถือ '
ดังนั้นเมื่อฉันตีความคำถามและภาพหน้าจอของคุณอย่างถูกต้องแล้วนี่ไม่ใช่สำหรับเว็บไซต์ของคุณ!

ในทางตรงกันข้าม - การทำบางสิ่งที่ Google แนะนำในแนวทางของพวกเขาจะทำให้แย่กว่าดีกว่าสำหรับเว็บไซต์ 'ปกติ'
และไม่ใช่ทุกสิ่งที่มาจาก Google เป็น "จอกศักดิ์สิทธิ์" เพียงเพราะมาจาก Google และพวกเขาเองก็ไม่ใช่แบบอย่างที่ดีถ้าคุณดูมาร์กอัพ HTML ของพวกเขา

คำแนะนำที่ดีที่สุดที่ฉันสามารถให้คุณได้คือ:

• ตั้งค่าความกว้างและความสูงขององค์ประกอบที่ถูกแทนที่ใน CSS ของคุณเพื่อให้เบราว์เซอร์สามารถจัดวางองค์ประกอบและไม่ต้องรอเนื้อหาที่ถูกแทนที่!

นอกจากนี้ทำไมคุณถึงใช้ไฟล์ CSS ที่แตกต่างกันแทนที่จะเป็นไฟล์เดียว?
คำขอเพิ่มเติมนั้นแย่กว่าปริมาณข้อมูลขนาดเล็ก และหลังจากการร้องขอครั้งแรกไฟล์ CSS จะถูกแคชต่อไป

สิ่งที่เราควรดูแลคือ:

• ลดจำนวนคำขอให้มากที่สุด
• รักษาน้ำหนักหน้าโดยรวมให้ต่ำที่สุด

และอย่าทำให้สมองของคุณสับสนเกี่ยวกับวิธีรับ 100% ของเครื่องมือ PageSpeed ​​Insights ของ Google ... ! ;-)

นอกจากที่ 1: นี่คือเพจที่ Google แสดงให้เราเห็นสิ่งที่พวกเขาแนะนำสำหรับการเพิ่มประสิทธิภาพการจัดส่ง CSS

ดังที่ได้กล่าวไว้ก่อนหน้านี้ฉันไม่คิดว่ามันจะไม่เหมือนจริงหรือไม่สมเหตุสมผลสำหรับเว็บไซต์ "ปกติ"! เพราะส่วนใหญ่เมื่อคุณมีการออกแบบเว็บไซต์ที่ตอบสนองได้แน่นอนที่สุดว่าคุณใช้การสืบค้นสื่อและรูปแบบเค้าโครงอื่น ๆ ดังนั้นถ้าคุณไม่โหลด CSS ของคุณก่อนและในลักษณะบล็อกคุณจะได้รับข้อความ ( Flash Of Unstyled Text ) ฉันไม่เชื่อจริงๆว่านี่เป็น "ดีกว่า" อย่างน้อยมิลลิวินาทีเพื่อแสดงผลหน้า!

Imho Google กำลังเริ่ม "hype" ใหม่ (เมื่อฉันได้ดูคำถามทั้งหมดเกี่ยวกับที่นี่ใน Stackoverflow) ... !

ฉันจะได้ 99/100 บน Google Page Speed ​​(สำหรับมือถือ) ได้อย่างไร

TLDR: บีบอัดและฝังสคริปต์ css ทั้งหมดระหว่าง<style></style>แท็กของคุณ

ฉันไล่ตามคะแนนที่เข้าใจยาก 100/100 ไปประมาณหนึ่งสัปดาห์แล้ว เช่นเดียวกับคุณรายการสุดท้ายที่เหลือถูกกำจัด "css การปิดกั้นการแสดงผลสำหรับเนื้อหาครึ่งหน้าบน"

แน่นอนว่ามีวิธีแก้ง่าย ๆ ?? Nope ฉันลองใช้โซลูชันloadCSS ของกลุ่มเส้นใย มากเกินไป. js สำหรับความชอบของฉัน

asyncคุณลักษณะเกี่ยวกับcss (เช่น js) คืออะไร ไม่มีอยู่

ฉันพร้อมที่จะยอมแพ้ จากนั้นมันก็เริ่มที่ฉัน หากการเชื่อมโยงสคริปต์กำลังบล็อกการแสดงผลจะเกิดอะไรขึ้นถ้าฉันฝัง css ทั้งหมดของฉันลงในหัวแทน ด้วยวิธีนี้ไม่มีอะไรจะบล็อก

ดูเหมือนผิดอย่างยิ่งที่จะฝัง CSS 1263 บรรทัดในแท็กสไตล์ของฉัน แต่ฉันให้มันหมุนวน ฉันบีบอัดมัน (และนำหน้ามัน) ก่อนใช้:

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ ดูแพคเกจ postcss NPM

ตอนนี้มันเป็นเพียงหนึ่งบรรทัดยาวของพื้นที่น้อย CSS ฉัน plopped CSS ใน<style>your;great-wall-of-china-long;css;here</style>แท็กในหน้าแรกของฉัน จากนั้นฉันวิเคราะห์อีกครั้งด้วยข้อมูลเชิงลึกความเร็วหน้า

ฉันไปจาก 90/100 ถึง 99/100 บนมือถือ !!!

สิ่งนี้ขัดกับทุกอย่างในตัวฉัน (และคุณ) แต่มันแก้ปัญหาได้ ฉันเพิ่งใช้มันในหน้าแรกของฉันในตอนนี้และรวมถึง CSS ที่บีบอัดโดยทางโปรแกรมผ่าน PHP รวมอยู่ด้วย

YMMV (ระยะทางของคุณอาจแตกต่างกัน) อยู่ระหว่างรอความยาวของ css ของคุณ Google อาจนำคุณเข้าสู่เนื้อหาครึ่งหน้าบนมากเกินไป แต่อย่าคาดเดา ทดสอบ!

หมายเหตุ

1. ฉันเพิ่งทำสิ่งนี้ในหน้าแรกของฉันในตอนนี้เพื่อให้ผู้ใช้ได้รับการแสดงผลที่รวดเร็วในหน้าสำคัญที่สุดของฉัน

2. CSS ของคุณจะไม่ถูกแคช แม้ว่าฉันจะไม่กังวลเกินไป วินาทีที่พวกเขาเข้าชมหน้าอื่นในเว็บไซต์ของฉัน. css จะได้รับแคช (ดูหมายเหตุ 1)

เคล็ดลับเล็กน้อยที่อาจช่วย:

• ฉันเจอบทความนี้ในการเพิ่มประสิทธิภาพ CSS เมื่อวานนี้: การ ทำโปรไฟล์ CSS เพื่อ ... การเพิ่มประสิทธิภาพข้อมูล
  จำนวนมากที่เป็นประโยชน์เกี่ยวกับ CSS และ CSS ที่ทำให้ประสิทธิภาพการทำงานท่อระบายน้ำมากที่สุด

• ผมเห็นนำเสนอต่อไปนี้บน jQueryUK บน "ความลับที่ซ่อนอยู่" ใน Googe Chrome (Canary) Dev เครื่องมือ DevTools สามารถทำเช่นนั้น ลองดูหัวข้อเกี่ยวกับTime to First Paint การทาสีและ CSS ราคาแพง

• นอกจากนี้หากคุณกำลังใช้ตัวโหลดเช่นrequireJSคุณสามารถดูหนึ่งในปลั๊กอินตัวโหลด CSS ซึ่งเรียกว่าrequire-CSSซึ่งใช้CSSOซึ่งเป็นตัวเพิ่มประสิทธิภาพที่ทำหน้าที่ปรับโครงสร้างเช่นกัน การรวมบล็อกด้วยคุณสมบัติที่เหมือนกัน ฉันใช้มันสองสามครั้งและมันสามารถบันทึก CSS ได้ค่อนข้างมากในแต่ละกรณี

ปิดคำถาม: ฉันสอง @Enzino ในการสร้างเทพดาสำหรับไอคอนขนาดเล็กทั้งหมดที่คุณกำลังโหลด ขนาดไฟล์เล็กมากมันไม่ได้รับประกันว่าเซิร์ฟเวอร์จะไปถึงสำหรับแต่ละไอคอน โปรดจำไว้ว่าจำนวนคำขอ HTTP ทั้งหมดที่เกิดขึ้นพร้อมกันคือเบราว์เซอร์สามารถทำได้ ดังนั้นคำขอสำหรับไอคอนขนาดเล็กจำนวนมากจึงเป็น "การปิดกั้นการแสดงผล" เช่นกัน แม้ว่าหน้าว่างจะเปรียบเทียบกับของคุณ แต่ฉันชอบวิธีที่duckduckgoโหลดเช่น

กรุณาดูได้ในหน้าต่อไปที่https://varvy.com/pagespeed/render-blocking-css.html นี้ช่วยให้ฉันเพื่อกำจัด"ทำให้การปิดกั้น CSS" ฉันใช้รหัสต่อไปนี้เพื่อลบ " Render Blocking CSS " ตอนนี้ในการทำความเข้าใจความเร็วหน้า Google ฉันไม่ได้รับปัญหาที่เกี่ยวข้องกับการแสดงผลการปิดกั้น CSS

<!-- loadCSS -->
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/cssrelpreload.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/loadCSS.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/onloadCSS.js"></script>
<script>
      /*!
      loadCSS: load a CSS file asynchronously.
      */
      function loadCSS(href){
        var ss = window.document.createElement('link'),
            ref = window.document.getElementsByTagName('head')[0];

        ss.rel = 'stylesheet';
        ss.href = href;

        // temporarily, set media to something non-matching to ensure it'll
        // fetch without blocking render
        ss.media = 'only x';

        ref.parentNode.insertBefore(ss, ref);

        setTimeout( function(){
          // set media back to `all` so that the stylesheet applies once it loads
          ss.media = 'all';
        },0);
      }
      loadCSS('styles.css');
    </script>
    <noscript>
      <!-- Let's not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>

ฉันก็ต้องดิ้นรนกับเมตริกความเร็วหน้าเว็บใหม่นี้ด้วย

แม้ว่าฉันจะไม่พบวิธีที่เป็นประโยชน์ในการรับคะแนนกลับมาได้ถึง 100% มีบางสิ่งที่ฉันพบว่ามีประโยชน์

การรวม CSS ทั้งหมดเป็นไฟล์เดียวช่วยได้มาก ไซต์ทั้งหมดของฉันสำรองได้สูงสุด% 95 -% 98

สิ่งเดียวที่ฉันคิดได้ก็คือใส่ css ที่จำเป็นทั้งหมด (ซึ่งดูเหมือนจะเป็นส่วนใหญ่ - อย่างน้อยก็สำหรับหน้าของฉัน) ในหน้าแรกเพื่อให้ได้คะแนนสูงที่น่ารัก แม้ว่ามันอาจช่วยให้คะแนนความเร็วของคุณนี้อาจจะทำให้หน้าโหลดช้าลง

ทางออกที่ดีที่สุด 2019 สำหรับเรื่องนี้คือHTTP / 2 กดเซิร์ฟเวอร์

คุณไม่จำเป็นต้องแก้ปัญหาจาวาสคริปต์หรือสไตล์อินไลน์ อย่างไรก็ตามคุณจำเป็นต้องมีเซิร์ฟเวอร์ที่รองรับ HTTP 2.0 (รุ่นเซิร์ฟเวอร์ทันสมัยใด ๆ ก็ตาม) ซึ่งตัวเองต้องการให้เซิร์ฟเวอร์ของคุณใช้ SSL อย่างไรก็ตามด้วย Let's Encrypt ไม่มีเหตุผลที่จะไม่ใช้ SSL

เว็บไซต์ของฉันhttps://r.je/มีคะแนน 100/100 สำหรับทั้งมือถือและเดสก์ท็อป

สาเหตุของข้อผิดพลาดคือเบราว์เซอร์รับ HTML จากนั้นต้องรอให้ดาวน์โหลด CSS ก่อนจึงจะสามารถแสดงหน้าเว็บได้ การใช้ HTTP2 คุณสามารถส่งทั้ง HTML และ CSS ได้ในเวลาเดียวกัน

คุณสามารถใช้การผลัก HTTP / 2 โดยการตั้งค่าส่วนหัวของลิงก์

ตัวอย่าง Apache (.htaccess):

Header add Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload"

สำหรับ NGINX คุณสามารถเพิ่มส่วนหัวในแท็กตำแหน่งของคุณในการกำหนดค่าเซิร์ฟเวอร์:

location = / {
    add_header Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload";
}

ด้วยชุดส่วนหัวนี้เบราว์เซอร์จะได้รับ HTML และ CSS ในเวลาเดียวกันซึ่งหยุด CSS จากการบล็อกการแสดงผล

คุณจะต้องปรับแต่งเพื่อให้ CSS ส่งเฉพาะในคำขอแรก แต่ส่วนหัวของลิงก์เป็นโซลูชันที่สมบูรณ์แบบที่สุดและแฮ็กน้อยที่สุดในการ "กำจัด Render Blocking Javascript และ CSS"

สำหรับรายละเอียดการสนทนาลองดูที่โพสต์ของฉันที่นี่: กำจัด Render Blocking CSS โดยใช้ HTTP / 2 Push

ลองใช้แพ็คเกจเพื่อสร้างสไตล์อินไลน์โดยอัตโนมัติจากไฟล์ css ของคุณ หนึ่งที่ดีคือฮึดฮัดที่สำคัญหรือCSS ที่สำคัญสำหรับ Laravel

สวัสดีสำหรับ jQuery คุณสามารถใช้ได้เช่นนี้เท่านั้น

ใช้ async และ type = "text / javascript" เท่านั้น