วิธีสร้างหน้า Divi ที่เร็วที่สุด: การเพิ่มประสิทธิภาพเนื้อหา Divi ของคุณเพื่อความรวดเร็ว

ด้วยการอัปเดตประสิทธิภาพใหม่ของ Divi มีความเป็นไปได้มากมายที่จะเพิ่มคะแนนความเร็วของหน้า วันนี้ เรากำลังแบ่งปันเคล็ดลับและกลเม็ดเชิงปฏิบัติที่คุณควรจำไว้เมื่อสร้างหน้า Divi ตั้งแต่เริ่มต้น นี่เป็นคำแนะนำ ไม่ใช่กฎเกณฑ์ที่กำหนดไว้ มันจะลงมาที่วัตถุประสงค์หลักของหน้าของคุณเสมอ บางครั้ง คุณจะพบว่าตัวเองเสียสละความเร็วเพื่อการออกแบบและในทางกลับกัน เราเชื่อว่าเป็นการค้นหาความสมดุลที่ดีระหว่างทั้งสอง แต่การใช้เคล็ดลับด้านล่าง คุณสามารถเพิ่มความเร็วหน้า Divi ของคุณได้อย่างแน่นอน

มาดำดิ่งกัน!

สมัครสมาชิกช่อง Youtube ของเรา

1. การเพิ่มประสิทธิภาพเนื้อหาครึ่งหน้าบน

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

แนวคิดฮีโร่ 4 โมดูล

การแบ่งปันข้อมูลให้มากที่สุดเท่าที่คุณจะทำได้กับผู้เยี่ยมชมอาจเป็นเรื่องน่าดึงดูดตั้งแต่แรกเห็น แต่นั่นคือสิ่งที่คุณควรหลีกเลี่ยงในฮีโร่ ยิ่งเนื้อหาของคุณตรงมากเพียงใด ทั้งในสไตล์และรูปลักษณ์ก็ยิ่งดี นั่นเป็นเหตุผลที่การจำกัดจำนวนโมดูลที่คุณใช้ครึ่งหน้าบนจะช่วยเพิ่มความเร็วหน้า Divi ของคุณ คุณควรใช้:

• ชื่อ
• ย่อหน้า
• ปุ่ม

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

• ชื่อ
• ย่อหน้า
• ปุ่ม
• ปรับแต่งภาพ

ใช้ฮีโร่แบบเต็มหน้าจอหรือแบ่งเนื้อหาออกเป็นหลายส่วนเพื่อการตรวจจับอัตโนมัติที่แม่นยำ

มีเหตุผลว่าทำไมการออกแบบฮีโร่แบบเต็มหน้าจอจึงเป็นที่นิยม ไม่เพียงแต่ทำให้การออกแบบของคุณระบายอากาศได้ดีขึ้น แต่ยังช่วยในเรื่อง CSS ที่สำคัญอีกด้วย หากคุณเลือกฮีโร่แบบเต็มหน้าจอ คุณกำลังตัดสินใจว่านั่นคือสิ่งเดียวที่ปรากฏบนครึ่งหน้าบน ไม่ว่าคุณจะใช้หน้าจอขนาดใดก็ตาม ในการสร้างฮีโร่แบบเต็มหน้าจอใน Divi อย่าลืมกำหนดความสูงขั้นต่ำ "100vh" ภายในการตั้งค่าส่วน โดยกำหนดความสูงขั้นต่ำ คุณกำลังตรวจสอบให้แน่ใจว่าส่วนนี้ครอบคลุมความสูงทั้งหมดของเบราว์เซอร์ คุณสามารถวางอะไรก็ได้ในส่วนนี้เพื่อเป็นส่วนหนึ่งของการออกแบบฮีโร่ของคุณตั้งแต่นั้นเป็นต้นมา หรือคุณสามารถใช้ส่วนหัวแบบเต็มหน้าจอในตัวของ Divi ก็ได้

หรือหากคุณไม่ต้องการทำตามเส้นทางฮีโร่แบบเต็มหน้าจอ คุณสามารถตัดสินใจแยกสิ่งที่อยู่ครึ่งหน้าบนออกเป็นหลายๆ ส่วนได้ Divi จะตรวจจับสิ่งที่ปรากฏครึ่งหน้าบนโดยอัตโนมัติใน ระดับส่วน ซึ่งหมายความว่า หากคุณกำลังสร้างส่วนขนาดใหญ่ที่ปรากฏบางส่วนในครึ่งหน้าบนและครึ่งหน้าล่างบางส่วน จะมีการโหลด CSS ของส่วนทั้งหมดและ CSS ขององค์ประกอบในส่วนนั้น การแบ่งส่วนต่างๆ ออกเป็นหลายๆ ส่วนจะช่วยให้คุณไม่ต้องจัดการกับองค์ประกอบมากเกินไปเหมือนอยู่ครึ่งหน้าบน

หลีกเลี่ยงแอนิเมชั่นในฮีโร่เพื่อป้องกันความล่าช้า

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

แก้ไขเนื้อหาครึ่งหน้าบนบนแท็บเล็ตและมือถือ

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

2. การใช้สไตล์อัจฉริยะ

สไตล์สมาร์ททำงานอย่างไร

ด้วยการอัปเดตประสิทธิภาพใหม่ Divi ได้รับการปรับให้เหมาะสมโดยลดสไตล์ที่ซ้ำกัน ในการเปิดใช้งานสไตล์อัจฉริยะ คุณจะต้องดำดิ่งสู่โลกของ Divi Presets โดยทั่วไปแล้ว ค่าที่ตั้งล่วงหน้าจะให้คุณแชร์สไตล์กับองค์ประกอบต่างๆ ได้โดยไม่ต้องกำหนดบล็อกสไตล์ที่ไม่ซ้ำใครให้กับแต่ละองค์ประกอบที่มีสไตล์ในลักษณะเดียวกัน

ใช้ 1 หรือ 2 ค่าที่ตั้งไว้ล่วงหน้าสำหรับส่วน & แถว

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

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

ใช้ค่าที่ตั้งไว้ล่วงหน้าสำหรับโมดูล

แน่นอน คุณจะต้องการใช้สไตล์อัจฉริยะสำหรับโมดูลด้วยเช่นกัน ในตัวอย่างด้านล่าง คุณจะสังเกตเห็นว่ารูปลักษณ์โดยรวมของแต่ละโมดูลมีความคล้ายคลึงกัน การสร้างพรีเซ็ตสำหรับโมดูล Blurb จะช่วยให้คุณเก็บไฟล์ CSS ของเพจของคุณให้เล็กได้

เอาชนะพรีเซ็ตหรือไม่?

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

3. จับคู่ตัวเลือกการออกแบบกับความเร็ว

จำกัดการเลือกโมดูลที่คุณต้องการใช้ (โมดูลไดนามิก)

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

ค้นหา LCP ของการออกแบบของคุณและปรับให้เหมาะสม

อีกสิ่งหนึ่งที่สามารถช่วยให้คุณปรับปรุงความเร็วของหน้าได้คือการค้นหา Largest Contentful Paint ของคุณและปรับแต่งให้เหมาะสม กล่าวโดยสรุป LCP ของคุณเป็นองค์ประกอบที่ใหญ่ที่สุดในหน้าเว็บของคุณที่ช่วยกำหนดคะแนนความเร็วของหน้าเว็บ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ที่นี่ การทำให้แน่ใจว่า LCP ของการออกแบบของคุณได้รับการปรับให้เหมาะสมแล้ว คุณสามารถลดเวลาในการโหลดบนหน้าเว็บของคุณได้อย่างมาก

การเลือกรูปแบบแอนิเมชั่น (คุณสมบัติไดนามิก)

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

การจับคู่แบบอักษร: ติด 1 หรือ 2 ตระกูลแบบอักษร

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

4. การเพิ่มประสิทธิภาพด้วยตนเอง

เนื้อหาที่ปรับเปลี่ยนตามอุปกรณ์: ลดขนาดรูปภาพบนมือถือ

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

ประเภทไฟล์และการบีบอัด

ตรวจสอบให้แน่ใจว่าคุณใช้ JPEG ให้มากที่สุดเท่าที่จะเป็นไปได้ เนื่องจากไฟล์เหล่านี้มักจะมีขนาดไฟล์ที่ต่ำกว่า โดยทั่วไปแล้ว PNG จะเหมาะสมก็ต่อเมื่อคุณต้องการความโปร่งใสในภาพเพื่อยกระดับการออกแบบ แต่ถึงกระนั้น คุณยังสามารถพยายามหาทางเลือกอื่นเพื่อให้การออกแบบใช้งานได้ หลีกเลี่ยงไฟล์ประเภทที่หนักกว่านั้น เช่น GIF ด้วย สำหรับวิดีโอ ปกติแล้วจะไม่ต้องทำอะไรเลย โดยเฉพาะอย่างยิ่งหากคุณต้องการให้เล่นเป็นแบ็กกราวด์ และแน่นอน ตรวจสอบให้แน่ใจว่าคุณได้บีบอัดไฟล์ที่คุณใช้ ก่อนที่คุณจะอัปโหลดไปยังไลบรารีสื่อ WordPress ของคุณ

เบื้องหลัง

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

สร้างหน้าด่วนด้วย Divi—ง่ายกว่าที่เคย

เราสามารถสรุปได้ง่าย ๆ ว่าคุณลักษณะด้านประสิทธิภาพของ Divi มีความทับซ้อนกันอย่างมากกับวิธีที่คุณจัดการในการสร้างเว็บไซต์ของคุณ Divi จะดูแลเพียงบางส่วน ดังนั้นคุณจึงสามารถมุ่งเน้นไปที่แนวทางปฏิบัติที่ดีที่สุดส่วนหน้าซึ่งจำเป็นในการนำทุกอย่างมารวมกันเป็นเว็บไซต์ที่สวยงามและรวดเร็ว หากมีแนวทางปฏิบัติที่ดีที่สุดสำหรับคุณ โปรดแชร์ในส่วนความคิดเห็นด้านล่างเพื่อให้การสนทนาดำเนินต่อไป!