กำจัดการปิดกั้นการแสดงผล JavaScript และ CSS ในเนื้อหาครึ่งหน้าบน

ฉันกำลังสร้างเว็บไซต์ Drupal 7 นี่คือบางส่วนของโมดูลที่ฉันใช้: Adaptivetheme (ธีม), มุมมองและบานหน้าต่างเนื้อหา, พาเนล, แผงเล็ก ๆ , แผงทุกที่, ตัวจัดการหน้า, Superfish สำหรับเมนู, เพิ่ม, เลือก (เลื่อนลง)

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

เมื่อเรียกใช้การทดสอบ Pagespeed ของ Googleฉันได้รับข้อผิดพลาดต่อไปนี้เป็น "ควรแก้ไข":

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

นี่คือข้อมูลที่ Google ใช้:

• ลบ JavaScript บล็อกการแสดงผล
• เพิ่มประสิทธิภาพการจัดส่ง CSS

มีวิธีที่ฉันสามารถเปลี่ยนการตั้งค่าของโมดูล Advagg หรือแกน Drupal และแก้ปัญหานี้ได้หรือไม่?

มีวิธีอื่นในการบรรลุเป้าหมายนี้หรือไม่?

อัปเดต - หลังจากใช้การเปลี่ยนแปลงตามคำตอบmikeytown2ฉันได้รับข้อความต่อไปนี้ในการทดสอบ Pagespeed ของ Google:

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

READMEมีคำแนะนำเกี่ยวกับวิธีการทำเช่นนี้โดยใช้ปัจจุบัน7.x-2.31 + รุ่นของ AdvAgg ยังเห็นหน้าวิกิพีเดียนี้ในกลุ่มที่มีประสิทธิภาพสูง เว็บไซต์ส่วนใหญ่จะประสบความสำเร็จที่สมบูรณ์แบบ 100/100 คะแนนในhttps://developers.google.com/speed/pagespeed/insights/ คำแนะนำเกี่ยวกับวิธีการติดตั้ง AdvAgg ใหม่ให้สำเร็จ

อย่าลืมตรวจสอบเว็บไซต์หลังจากทุกส่วนเพื่อให้แน่ใจว่าการเปลี่ยนแปลงไม่ทำให้ไซต์ของคุณยุ่งเหยิง การเปลี่ยนแปลงภายใต้ AdvAgg Modifier มักเป็นปัญหามากที่สุด แต่จะมีการปรับปรุงที่ใหญ่ที่สุด

ไปที่ admin/config/development/performance/advagg

• เลือก "ใช้การตั้งค่าที่แนะนำ (ปรับให้เหมาะสม)"

ติดตั้ง AdvAgg Compress Javascript หากไม่ได้เปิดใช้งานและไปที่ admin/config/development/performance/advagg/js-compress

• เลือก JSMin หากมี; มิฉะนั้นเลือก JSMin +
• เลือก Strip ทุกอย่าง (ไฟล์ที่เล็กที่สุด)
• คลิกที่ลิงค์บีบอัดแบบแบตช์เพื่อประมวลผลไฟล์เหล่านี้

ติดตั้ง AdvAgg Async Font Loader หากไม่ได้เปิดใช้งานและไปที่ admin/config/development/performance/advagg/font

• เลือกไฟล์โลคัลรวมอยู่ในการรวม (เวอร์ชัน: XXX) หากตัวเลือกนี้ไม่สามารถใช้งานได้ให้ทำตามคำแนะนำทางด้านล่างของตัวเลือกในการติดตั้ง
• ทำเครื่องหมายที่ "ใช้ localStorage เพื่อให้แฟลชของข้อความที่ไม่มีการจัดแนว (FOUT) เกิดขึ้นเพียงครั้งเดียวเท่านั้น"
• ทำเครื่องหมาย "ตั้งคุกกี้เพื่อให้แฟลชข้อความที่ไม่มีการจัดแนว (FOUT) เกิดขึ้นเพียงครั้งเดียวเท่านั้น"

ติดตั้ง AdvAgg Bundler หากไม่ได้เปิดใช้งานและไปที่ admin/config/development/performance/advagg/bundler

การตั้งค่า HTTP / 2.0

• ใต้ "จำนวนเป้าหมายของการรวมกลุ่ม CSS ต่อหน้า" เลือก 25
• ภายใต้ "จำนวนเป้าหมายของการรวมกลุ่ม JS ต่อหน้า" เลือก 25
• ภายใต้ "ตรรกะการจัดกลุ่ม" เลือก "ขนาดไฟล์"

การตั้งค่า HTTP / 1.1 (ค่าเริ่มต้น)

• ใต้ "จำนวนเป้าหมายของการรวมกลุ่ม CSS ต่อหน้า" เลือก 2
• ภายใต้ "จำนวนเป้าหมายของการรวมกลุ่ม JS ต่อหน้า" เลือก 5
• ภายใต้ "ตรรกะการจัดกลุ่ม" เลือก "ขนาดไฟล์"

25 บันเดิลกับ 2 และ 5 เกี่ยวข้องกับการแคชของเบราว์เซอร์ ไฟล์เพิ่มเติมเท่ากับโอกาสที่ดีกว่าของเบราว์เซอร์ที่มีคอมโบนั้นในแคช แต่ไฟล์เพิ่มเติมหมายถึงการเชื่อมต่อที่สร้างและเปิดได้มากขึ้นใน HTTP 1.1 ใช้ 2 สำหรับ CSS เนื่องจากหมายเลขนี้จะไม่รอการเชื่อมต่อใหม่ JS คือ 5 เนื่องจากเบราว์เซอร์ส่วนใหญ่มีการ จำกัด การเชื่อมต่อพร้อมกันที่ 6 หมายเลขนี้สำหรับการรวมกลุ่มถูกเลือกหลังจากการทดสอบหลายครั้ง ใน HTTP 2.0 มีการเชื่อมต่อแบบสตรีมมิ่งหนึ่งครั้งและบทลงโทษสำหรับไฟล์ CSS และ JS หลายไฟล์แทบไม่มีอยู่จริง ดังนั้นการเพิ่มประสิทธิภาพสำหรับแคชเบราว์เซอร์เป็นตัวเลือกที่ดีที่สุด; ดังนั้น 25 ควรใช้สำหรับ CSS และ JS เมื่อให้บริการ HTTP / 2.0

ติดตั้ง AdvAgg Relocate หากไม่ได้เปิดใช้งานและไปที่ admin/config/development/performance/advagg/relocate

• เลือก "ใช้การตั้งค่าที่แนะนำ (ปรับให้เหมาะสม)"

ติดตั้ง AdvAgg Modifier หากไม่ได้เปิดใช้งานและไปที่ admin/config/development/performance/advagg/mod

• เลือก "ใช้การตั้งค่าที่แนะนำ (ปรับให้เหมาะสม)"

ไปที่https://www.sitelocity.com/critical-path-css-generatorและป้อนหน้า Landing Page ได้มากเท่าที่จำเป็นสำหรับ css ที่สำคัญ 10 อันดับแรกมักเป็นการเริ่มต้นที่ดี หากคุณมี Google Analytics สิ่งนี้จะแสดงวิธีค้นหาหน้า Landing Page บนสุดของคุณhttps://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages หรือ Piwik https: //piwik.org/faq/how-to/faq_160/ หากคุณไม่ทราบว่าจะเริ่มหน้าใดกับหน้าแรกของเว็บไซต์ของคุณ คุณสามารถใช้วิธีนี้เพื่อสร้าง css https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=th

ตัวอย่างชื่อไฟล์และพา ธ ด้านล่างสำหรับธีม "bootstrap" พวกเขาทั้งหมดเริ่มต้นด้วยsites/all/themes/bootstrap/critical-css/; ในชุดรูปแบบของคุณสร้างcritical-css/ไดเรกทอรี ไดเรกทอรีถัดไปจะขึ้นอยู่กับผู้ใช้ anonymous/, all/หรือauthenticated/สามารถใช้

ไดเรกทอรีต่อไปสามารถหรือurls/ type/มองไปที่urls/; front เป็นเคสพิเศษสำหรับ front page, พา ธ อื่นทั้งหมดใช้ current_path () เป็นไดเร็กทอรีและชื่อไฟล์ที่.cssเพิ่มเข้ากับท้าย ดูhttps://api.drupal.org/api/drupal/includes%21path.inc/function/current_path/7.x

ดูที่type/นี่เป็นกรณีพิเศษสำหรับประเภทโหนด ใช้ชื่อเครื่องและเพิ่ม.cssไปยังจุดสิ้นสุด โหนดใด ๆ ของประเภทนี้จะมีไฟล์ css ที่สำคัญนี้นำไปใช้และ inlined ด้านล่างคือตัวอย่างที่แสดงวิธีการทำงาน

ตำแหน่งไฟล์ตัวอย่างที่ถูกต้องสำหรับหน้า "front": sites/all/themes/bootstrap/critical-css/anonymous/urls/front.css

ตำแหน่งไฟล์ตัวอย่างที่ถูกต้องสำหรับหน้า "node / 1" current_path (): sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css

ตำแหน่งไฟล์ตัวอย่างที่ถูกต้องสำหรับประเภทโหนดของ "หน้า": sites/all/themes/bootstrap/critical-css/anonymous/type/page.css

ถ้าคุณต้องการวิธีอัตโนมัติในการสร้างไฟล์ css เหล่านี้ fourkitchens มีบทความที่ยอดเยี่ยมเกี่ยวกับวิธีการตั้งค่า: https://fourword.fourkitchens.com/article/use-grunt-and-advagg-inline-critical-css -drupal-7-ธีม

คุณจะไม่ได้รับคะแนนสูงสุดอย่างแท้จริงด้วยโมดูล drupal ที่สร้างไว้ล่วงหน้าวิธีเดียวที่จะบรรลุเป้าหมายนี้ได้คือการเข้าร่วมและวิเคราะห์คำแนะนำแต่ละอย่างที่จัดทำโดยเครื่องมือความเร็ว googleโดยระบุที่อยู่เหล่านั้นอย่างอิสระ

บางสิ่งที่ฉันทำเพื่อให้บรรลุ 95 ในไซต์ข่าวที่มีการใช้งานมากซึ่งตามเวลาที่ฉันเขียนสิ่งนี้ทำคะแนนได้ดีกว่าnytimes (ตอนนี้ไม่ได้):

• [การบล็อกสคริปต์] การเรียกใช้งานสคริปต์ของบุคคลที่สามอย่างล่าช้าเช่น sharethis, วิดเจ็ต Facebook, google plus และอื่น ๆ เพื่อให้ทำงานหลังจากที่แสดงผลหน้าเว็บอย่างสมบูรณ์แล้วเท่านั้น สิ่งนี้ต้องการการเปลี่ยนสตริงแบบง่าย ๆ เพื่อส่งออกของ html.tpl.php เพื่อตรวจจับสคริปต์เหล่านั้นและจัดคิวเพื่อดำเนินการในภายหลัง
• [การบล็อกสคริปต์] เก็บตัวแปร $ สคริปต์ของ html.tpl.php (พร้อม json_encode) ในตัวแปร javascript เพื่อจัดคิวให้พวกเขาทำงานหลังจากโหลดหน้าแรก นี่เป็นสิ่งที่ผิดธรรมชาติ แต่จำเป็น ปัญหาเฉพาะของเบราว์เซอร์บางอย่างต้องถูกแยกออก
• [บล็อก css] นำสิ่งที่คล้ายกับเทคนิคของ Keith Clark มาใช้แต่ด้วย rel = "prefetch" นี้จะแนะนำจำเป็นที่จะต้องแก้FOUC
• [การย่อขนาดและการบีบอัด] ทำให้การบีบอัดและการย่อขนาดไปยังเซิร์ฟเวอร์การกระจายที่ฉันสามารถใช้จินตภาพ, yui-compressor, pngoptim และสิ่งอื่น ๆ ที่จะเอาชนะกฎเหล่านั้นโดยไม่ต้องเปลี่ยนการติดตั้ง drupal เป็นระเบียบที่ไม่สามารถจัดการได้