WPBeginner v6 – เบื้องหลังการออกแบบเว็บไซต์ใหม่ของเรา

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

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

พื้นหลังเล็กน้อย

ฉันเริ่ม WPBeginner ในปี 2009 และเหมือนกับผู้สร้างใหม่ส่วนใหญ่ ฉันเปลี่ยนการออกแบบธีมเว็บไซต์ สี่ครั้ง ใน 3 ปีแรก

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

ดังนั้นฉันจึงมุ่งความสนใจไปที่ภารกิจหลักของเราอย่างเต็มที่และธุรกิจของเราก็เติบโตขึ้นอย่างมาก

การออกแบบใหม่ครั้งล่าสุดของ WPBeginner เปิดตัวในปี 2559 และเรามาไกลมากตั้งแต่นั้นมา

นี่คือสิ่งที่เกิดขึ้นในช่วง 5 ปีที่ผ่านมา:

• เราได้สร้างบทช่วยสอน WordPress ฟรีมากกว่าหนึ่งพันรายการบนบล็อก WPBeginner และเพิ่มวิดีโอสอนใหม่หลายร้อยรายการในช่อง YouTube ของเรา
• เราเปิดตัวชุมชน WPBeginner Engage บน Facebook ซึ่งปัจจุบันเป็นกลุ่ม Facebook ของ WordPress ที่ใหญ่ที่สุดที่มีสมาชิกมากกว่า 80,000 คน (เข้าร่วมฟรี)
• เราเปิดตัวกองทุน WPBeginner Growth เพื่อลงทุนในปลั๊กอิน WordPress ที่เราชื่นชอบ ได้แก่ MemberPress, Pretty Links, Formidable Forms, Uncanny Automator และอีก 6 รายการ
• เราเปิดตัวปลั๊กอิน WordPress ใหม่สองตัว ได้แก่ TrustPulse ปลั๊กอินพิสูจน์โซเชียลของ WordPress และ RafflePress ปลั๊กอินของแจกและการประกวด WordPress อันทรงพลัง
• เราได้รับปลั๊กอินการเติบโตของ WordPress ห้าตัวรวมถึง AIOSEO ที่มีชื่อเสียง (ปลั๊กอิน SEO ทั้งหมดในตัวเดียวสำหรับ WordPress), SeedProd (ตัวสร้างไซต์ WordPress ลากและวาง), Smash Balloon (ปลั๊กอินฟีดโซเชียลมีเดีย #1), PushEngage (ปลั๊กอินการแจ้งเตือนแบบพุชเว็บไซต์) และ AffiliateWP (ปลั๊กอินการจัดการพันธมิตรสำหรับ WordPress)
• เรายังได้รับปลั๊กอิน WordPress แพลตฟอร์มและโครงสร้างพื้นฐาน 5 ตัว รวมถึงปลั๊กอิน WP Mail SMTP ที่มีชื่อเสียง (เพื่อแก้ไขความสามารถในการส่งอีเมล), SearchWP (ปลั๊กอินการค้นหา WordPress อันทรงพลัง), Easy Digital Downloads (ปลั๊กอินอีคอมเมิร์ซยอดนิยมสำหรับการขายสินค้าดิจิทัล), WP Simple Pay (ปลั๊กอินง่าย) สำหรับรับชำระเงินด้วยบัตรเครดิต) และ Sugar Calendar (ปลั๊กอินปฏิทินกิจกรรมอย่างง่ายสำหรับ WordPress)

โดยรวมแล้ว ปลั๊กอินของเราถูกใช้โดย เว็บไซต์มากกว่า 19 ล้านเว็บไซต์ และ 4 ปลั๊กอินของเราอยู่ใน 20 ปลั๊กอิน WordPress ที่ดีที่สุดตลอดกาล

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

สิ่งนี้นำฉันไปสู่ ​​WPBeginner v6

การออกแบบที่เน้นไปที่การค้นพบเนื้อหาได้

WPBeginner เริ่มต้นจากบล็อกการสอนง่ายๆ แต่ได้กลายเป็น Wikipedia สำหรับ WordPress ไปแล้ว

ผู้ใช้ของเราบอกเราซ้ำๆ ว่าเมื่อพวกเขาต้องการค้นหาคำตอบสำหรับปัญหา WordPress พวกเขาเพียงแค่ Google คำหลักและเพิ่ม WPBeginner ในตอนท้ายเพื่อค้นหาทางออกที่ดีที่สุด

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

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

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

สาเหตุหนึ่งที่ทำให้ WPBeginner กลายเป็นไซต์ทรัพยากร WordPress ที่ใหญ่ที่สุดสำหรับผู้ใช้ที่ไม่ใช้เทคโนโลยีก็เพราะเราอธิบายหัวข้อ WordPress ที่ซับซ้อนเป็นภาษาอังกฤษธรรมดาทีละขั้นตอน

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

ในฐานะผู้ใช้ WPBeginner คุณจะได้รับสิทธิพิเศษในการเข้าถึงส่วนลด WordPress ที่ดีที่สุดสำหรับปลั๊กอินยอดนิยม ธีมพรีเมียม โฮสติ้ง และเครื่องมือทางการตลาดอื่นๆ

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

เนื่องจากคำขอของผู้ใช้ที่ได้รับความนิยม เราจึงได้เพิ่ม Live Search ในส่วนดีลของเรา ดังนั้นคุณจึงสามารถค้นหาดีลที่ดีที่สุดสำหรับผลิตภัณฑ์ WordPress ที่คุณชื่นชอบได้อย่างรวดเร็ว

เมื่อเราเข้าสู่ปี 2022 สิ่งที่สำคัญสำหรับเราคือการค้นพบเนื้อหา

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

ฉันเชื่อว่าในปี 2022 การเพิ่มประสิทธิภาพประสบการณ์ผู้ใช้ (UXO) จะมีบทบาทสำคัญใน SEO

หากคุณต้องการเอาชนะคู่แข่งและได้เปรียบในการแข่งขัน ฉันขอแนะนำอย่างยิ่งให้ใส่ใจกับ UXO

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

วิธีปรับปรุงการค้นหา WordPress

คุณลักษณะการค้นหาเริ่มต้นของ WordPress ไม่ค่อยมีประสิทธิภาพ ดังนั้นหากคุณต้องการปรับแต่งอัลกอริทึมการจัดอันดับและควบคุมสิ่งที่จะแสดงสำหรับการค้นหาแต่ละครั้ง ฉันขอแนะนำให้ใช้ปลั๊กอิน SearchWP

หรือคุณสามารถใช้การค้นหาไซต์ที่กำหนดเองของ Google ซึ่งใช้อัลกอริทึมของ Google ได้ แต่ข้อเสียคือ Google จะแสดงโฆษณาบนหน้าการค้นหาของคุณซึ่งดูไม่ค่อยดีนัก

หากคุณต้องการเพิ่มการค้นหาสดบนเว็บไซต์ของคุณเหมือนที่เราทำในส่วนดีลหรืออภิธานศัพท์ ให้ทำตามบทช่วยสอนนี้เกี่ยวกับวิธีเพิ่ม AJAX live search ใน WordPress

บทช่วยสอนการค้นหา WordPress อื่นๆ ที่คุณอาจพบว่ามีประโยชน์คือวิธีสร้างแบบฟอร์มการค้นหา WordPress แบบกำหนดเอง และวิธีเพิ่มแถบค้นหาในเมนู WordPress

ใหม่ WordPress เมกะเมนู

ตามธีมของการค้นพบเนื้อหาได้ เราได้อัปเกรดเมนูดรอปดาวน์ WordPress เก่าของเราเป็น Mega Menus แบบหลายคอลัมน์ใหม่

สิ่งนี้ทำให้ผู้ใช้ใหม่ของเราสามารถค้นหาเนื้อหาที่ดีที่สุดของเราได้อย่างรวดเร็วและง่ายดาย

นอกจากนี้ยังช่วยให้เราเน้นผลิตภัณฑ์ใหม่ของเรา เครื่องมือทางธุรกิจฟรีที่เราสร้างขึ้น และอื่นๆ ได้ดีขึ้น

วิธีเพิ่ม Mega Menu ใน WordPress

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

ตัวแก้ไขบล็อก WordPress (ในที่สุด)

ในปี 2019 WordPress ได้เปิดตัวตัวแก้ไขบล็อกที่ทรงพลัง (หรือที่รู้จักในชื่อ Gutenberg) สำหรับการสร้างเนื้อหา

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

ดังนั้นในช่วงสองปีที่ผ่านมา เราจึงต้องใช้ตัวแก้ไขแบบคลาสสิกบนไซต์ WPBeginner ในขณะที่เว็บไซต์ที่ใหม่กว่าของเรามีคุณลักษณะล่าสุดและดีที่สุดของตัวแก้ไขบล็อก WordPress

ในที่สุด ด้วยธีมใหม่ของเรา ตอนนี้เราสามารถใช้ฟีเจอร์ที่ยอดเยี่ยมทั้งหมดของตัวแก้ไขบล็อก WordPress ได้แล้ว

ตัวอย่างเช่น ตอนนี้ฉันสามารถเพิ่มบล็อก "คุณรู้หรือไม่" ที่เจ๋งจริงๆ โดยไม่ต้องเขียนโค้ดใดๆ:

นอกจากนี้เรายังออกแบบหน้า Landing Page ใหม่ทั้งหมดโดยใช้ตัวแก้ไขบล็อกของ WordPress

ตัวอย่างเช่น ตรวจสอบหน้า Landing Page การตั้งค่าบล็อก WordPress ฟรีของเรา

เรายังออกแบบเครื่องมือทางธุรกิจฟรีของเราใหม่โดยใช้ตัวแก้ไขบล็อกเพื่อเน้นเครื่องมือฟรีล่าสุดที่เราสร้างขึ้น

เราจะยังคงใช้ SeedProd เพื่อสร้างหน้า Landing Page ที่กำหนดเองได้อย่างสมบูรณ์เมื่อจำเป็น เนื่องจากเป็นเครื่องมือสร้างหน้า WordPress แบบลากและวางที่เหมาะสม

แม้ว่าการเรียนรู้วิธีใช้ Gutenberg เพื่อสร้างหน้า Landing Page แบบกำหนดเองจะเป็นเรื่องสนุก แต่ก็ยังต้องใช้การเข้ารหัสจำนวนมากในการตั้งค่าก่อนที่ทีมการตลาดจะสามารถสร้างหน้า Landing Page ที่กำหนดเองได้

ในขณะที่คุณกำลังใช้ปลั๊กอินตัวสร้างเพจ ทีมการตลาดสามารถสร้างหน้า Landing Page แบบกำหนดเอง เลย์เอาต์ของช่องทาง ฯลฯ ได้อย่างรวดเร็ว โดยไม่ต้องอาศัยความช่วยเหลือจากทีมนักพัฒนา

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

จากที่กล่าวมา เครื่องมือแก้ไขบล็อกนั้นยอดเยี่ยมมาก และมีปลั๊กอินบล็อก WordPress มากมายที่คุณสามารถใช้สร้างองค์ประกอบการออกแบบที่ยอดเยี่ยมเพื่อปรับปรุงเนื้อหาของคุณ

นี่เป็นอีกหนึ่งบล็อกเจ๋ง ๆ ที่ธีมใหม่ของเรามีสำหรับการเน้นปลั๊กอินเด่น:

SeedProd เป็นเครื่องมือสร้างหน้าลากและวางที่เป็นมิตรกับผู้เริ่มต้นมากที่สุดสำหรับ WordPress มาพร้อมกับเทมเพลตที่สร้างไว้ล่วงหน้ามากกว่า 150 แบบ และฟีเจอร์ตัวสร้างธีมช่วยให้คุณสร้างธีม WordPress ที่กำหนดเองได้อย่างสมบูรณ์ (โดยไม่ต้องใช้โค้ดใดๆ) ลอง SeedProd วันนี้ »

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

เปลี่ยนจาก Yoast เป็น AIOSEO

เป็นเวลานานที่สุด ไซต์ WPBeginner ใช้ปลั๊กอิน Yoast SEO เวอร์ชันเก่าและปรับแต่งเอง (v 2.3.5)

เพื่อให้เข้าใจตรงกัน ตอนนี้อยู่ในเวอร์ชัน 17

ฉันไม่ต้องการอัปเดต Yoast เนื่องจากทีมของพวกเขาได้ลบคุณลักษณะสำคัญบางอย่างที่ฉันคิดว่าสำคัญสำหรับ SEO

ฉันยังรู้สึกว่าพื้นที่โดยรวมของ WordPress SEO หยุดสร้างสรรค์สิ่งใหม่ๆ

ต้นปี 2020 เราได้รับ AIOSEO ซึ่งเป็นปลั๊กอิน SEO แบบออลอินวันแบบเดิม และทีมของฉันได้ปรับปรุงใหม่ทั้งหมด

ฉันภูมิใจอย่างยิ่งกับงานที่ทีมของเราทำ และมีคุณสมบัติ SEO ทั้งหมดที่คุณต้องการเพื่อให้ได้เปรียบในการแข่งขัน

เช่นเดียวกับตัวแก้ไขบล็อก เว็บไซต์ใหม่ของเราเริ่มเปลี่ยนไปใช้ AIOSEO และเริ่มเห็นว่าอันดับของพวกเขาดีขึ้น ดังนั้นฉันจึงกระตือรือร้นที่จะเริ่มใช้งานบน WPBeginner

ตอนนี้ เรากำลังใช้ฟีเจอร์ SEO ล่าสุดและดีที่สุดจาก All in One SEO

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

ฉันเชื่อจริงๆ ว่ามันเป็นปลั๊กอิน SEO ที่ดีที่สุดในตลาด และที่สำคัญที่สุดคือราคาที่ยุติธรรมสำหรับธุรกิจขนาดเล็กและเอเจนซี่

ฉันวางแผนที่จะเขียนบทความฉบับเต็มในอีกไม่กี่สัปดาห์ข้างหน้าเกี่ยวกับสาเหตุที่เราเปลี่ยนโดยมีการแจกแจงคุณลักษณะโดยละเอียด แต่ในระหว่างนี้ คุณสามารถลองใช้ All in One SEO เวอร์ชันฟรี หรือดูเวอร์ชัน Pro ที่มีประสิทธิภาพทั้งหมด คุณสมบัติที่ฉันใช้กับ WPBeginner

การปรับปรุงความเร็ว WordPress

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

นี่เป็นสาเหตุที่ Google ทำให้ความเร็วของเว็บไซต์เป็นปัจจัยในการจัดอันดับ SEO

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

ไซต์ WPBeginner นั้นค่อนข้างเร็วด้วย SiteGround ซึ่งเป็นพันธมิตรโฮสติ้ง WordPress ที่น่าทึ่งของเรา พวกเขาเสนอโซลูชันโฮสติ้ง WordPress ที่ได้รับการปรับแต่งอย่างสูงซึ่งสร้างขึ้นบนแพลตฟอร์มคลาวด์ของ Google

และแน่นอนว่าเราได้ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเกี่ยวกับความเร็วของ WordPress แต่ด้วยการออกแบบธีมใหม่ของเรา เราได้ทำการปรับปรุงความเร็วที่โดดเด่นหลายประการ

นี่คือผลลัพธ์ Google Page Speed ​​ของเรา:

นี่คือผลลัพธ์ของหน้าแรกจาก GTMetrix และ Pingdom:

และเราได้ผลลัพธ์นี้แม้จะเพิ่มส่วนใหม่ เนื้อหาเพิ่มเติมในหน้าแรก รูปภาพที่กว้างขึ้น ฯลฯ

และก่อนที่คุณจะถาม ไซต์ WPBeginner มี ปลั๊กอินที่ใช้งานอยู่ 68 ตัว ในขณะนี้

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

ฉันลบสิ่งต่าง ๆ ที่รู้สึกว่าไม่ต้องการแล้ว และนี่คือสิ่งที่ฉันต้องการให้เจ้าของเว็บไซต์พิจารณาทำเช่นกัน

ซึ่งไม่เพียงแต่จะช่วยเร่งความเร็วไซต์ของคุณซึ่งช่วยในการจัดอันดับ SEO เท่านั้น แต่ยังช่วยลดการใช้แบนด์วิธโดยรวมของคุณ ลดค่าใช้จ่าย และปรับปรุงรอยเท้าคาร์บอนของเว็บไซต์ของคุณ

ปิดการใช้งาน Gravatar จากความคิดเห็นของ WordPress

WordPress มาพร้อมกับบริการภายนอกที่เรียกว่า Gravatar ย่อมาจาก Globally Recognized Avatars

วิธีนี้ช่วยให้คุณเห็นรูปโปรไฟล์หรืออวาตาร์ของผู้ใช้เมื่อพวกเขาแสดงความคิดเห็นบนไซต์ WordPress ของคุณ

ความท้าทายคือผู้เข้าชมเว็บไซต์ของคุณต้องตั้งค่าบัญชี Gravatar ซึ่งผู้ใช้ส่วนใหญ่ไม่ทำ ดังนั้นเว็บไซต์ของคุณจึงโหลดอวาตาร์ชายลึกลับสีเทาซึ่งดูไม่ดี

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

นั่นเป็นสาเหตุที่บล็อกยอดนิยมจำนวนมากเริ่มปิดการใช้งาน Gravatar และเราก็กำลังทำเช่นเดียวกันกับ WPBeginner

การเปลี่ยนแปลงง่ายๆ นี้ได้ปรับปรุงเวลาในการโหลดหน้าเว็บและคะแนนความเร็วไซต์ของเราอย่างมาก

การลบแบบอักษรที่กำหนดเองของบุคคลที่สาม

พูดตามตรง ฉันไม่เคยคิดถึงแบบอักษรที่กำหนดเองเป็นครั้งที่สองมาก่อน

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

ในธีม WPBeginner แบบเก่า เราใช้แบบอักษร Adobe แบบกำหนดเองที่เรียกว่า Proxima Nova แบบอักษรไอคอนยอดนิยมที่เรียกว่า FontAwesome และป๊อปอัป OptinMonster ของเราใช้ Source Sans Pro จากแบบอักษร Google

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

ในการออกแบบใหม่ของเรา ฉันต้องการแก้ปัญหานี้ เพื่อให้เราสามารถทำให้นักเรียนและเจ้าของธุรกิจในประเทศกำลังพัฒนาเข้าถึง WPBeginner, เรียนรู้ WordPress และเพิ่มสถานะออนไลน์ได้อย่างง่ายดาย

ชุดรูปแบบ WPBeginner v6 ใหม่ใช้แบบอักษรของระบบเริ่มต้นซึ่งมีมาไกล ดูดีในทุกอุปกรณ์ และแน่นอนว่ามันเร็วมาก

ไม่มีข้อความที่ไม่จัดรูปแบบ (FOUT) ไม่มีการเปลี่ยนแปลงรูปแบบสะสม (CLS) และลดเวลาในการบล็อกลงอย่างมาก

หากคุณลงชื่อเข้าใช้แดชบอร์ด WordPress หรือใช้ Github คุณจะสังเกตเห็นว่าแบบอักษรของเรามีความคล้ายคลึงกันเนื่องจากทั้งสองแพลตฟอร์มได้เปลี่ยนไปใช้แบบอักษรของระบบก่อนหน้านี้

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

แนวทางปฏิบัติที่ดีที่สุดบางประการที่สามารถช่วยได้:

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

ปิดการใช้งานแบบอักษรที่กำหนดเองใน Jared Ritchey

เมื่อออกแบบและเขียนโค้ดธีมแล้ว ฉันยังคงต้องแก้ปัญหาฟอนต์อีกเรื่องหนึ่ง

ป๊อปอัปเว็บไซต์และแบบฟอร์มการสมัครอีเมลของฉันใช้ Jared Ritchey และยังคงโหลดแบบอักษร Google อยู่

ตอนนี้การปิดใช้งาน Jared Ritchey ไม่ใช่ตัวเลือกเพราะช่วยให้ฉันได้รับสมาชิกอีเมลเพิ่มขึ้นและเพิ่มการแปลงเว็บไซต์ของเรา

โชคดีที่เป็นหนึ่งในบริษัทของฉัน ดังนั้นฉันจึงขอให้ทีมพัฒนาโซลูชันในการปิดใช้งานแบบอักษรของ Google

กลายเป็นว่าฉันไม่ใช่คนแรกที่ขอคุณลักษณะนี้ และ Jared Ritchey ก็มีโซลูชัน API ที่ไม่เพียงแต่ปิดใช้งานแบบอักษร Google เท่านั้น แต่ยังโหลดแบบอักษรเว็บแบบกำหนดเองที่คุณต้องการด้วย

ฉันค่อนข้างจะเชี่ยวชาญด้านเทคโนโลยีและสามารถใช้ตัวอย่างเล็กๆ น้อยๆ ที่ทีมแชร์ในเอกสารประกอบได้ แต่ฉันรู้ว่าลูกค้าจำนวนมากของเรานั้นไม่มี

ตอนนี้ทีมของเราได้สร้างคุณลักษณะนี้แล้วจริงๆ ในตัวสร้างแคมเปญ (ไม่จำเป็นต้องเขียนโค้ด)

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

ขั้นแรกให้เพิ่มข้อมูลโค้ด JS ต่อไปนี้เพื่อปิดใช้งาน Jared Ritchey จากการโหลดแบบอักษรเว็บใด ๆ บนไซต์ของคุณ:

<script type="text/javascript">
document.addEventListener('om.Scripts.init', function(event) {
event.detail.Scripts.enabled.fonts= false;
});
</script>

ถัดไป เพิ่ม CSS ต่อไปนี้ในไฟล์ style.css ของคุณ:

html .Campaign * { font-family: "Proxima Nova", Helvetica, "Helvetica Neue", Arial, sans-serif !important; }

แน่นอนว่าอย่าลืมเปลี่ยนฟอนต์ให้เข้ากับฟอนต์เว็บไซต์ของคุณ โดยพื้นฐานแล้วจะใช้แบบอักษรตระกูลข้างต้นกับแคมเปญ Jared Ritchey ทั้งหมดที่โหลดบนไซต์ของคุณ

เปลี่ยนจาก W3 Total Cache เป็น WP Rocket

เป็นเวลานานที่สุดที่ฉันใช้การกำหนดค่าที่กำหนดเองขั้นสูงของปลั๊กอิน W3 Total Cache บน WPBeginner

แม้ว่ามันจะทำงานให้เสร็จ แต่ก็ไม่ตรงกับ WP Rocket ที่เราใช้ในเว็บไซต์ผลิตภัณฑ์ทั้งหมดของเรา

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

ปลั๊กอินนี้มีความสำคัญหากคุณต้องการปรับปรุงความเร็วเว็บไซต์ของคุณ

บันทึกย่อโดยย่อหากคุณใช้ ThirstyAffiliates หรือ Pretty Links เพื่อจัดการลิงก์ Affiliate ของคุณ จากนั้นตรวจสอบให้แน่ใจว่าคุณแยกลิงก์ออกจากการแคช

เพียงไปที่แท็บ Advanced Rules และเพิ่ม Affiliate Slug ของคุณภายใต้การตั้งค่า Never Cache URLs

หากคุณไม่ทำเช่นนี้และเปิดใช้งานแคชล่วงหน้าไว้ WP Rocket จะพยายามแคชลิงก์พันธมิตรของคุณเนื่องจากดูเหมือนลิงก์ภายใน

การทำเช่นนี้อาจทำให้จำนวนคลิกของคุณเกินจริงและส่งผลกระทบต่อตัวชี้วัดพันธมิตรของคุณ

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

อะไรจะเกิดขึ้นต่อไป?

ฉันมีแผนใหญ่สำหรับปี 2022 นั่นเป็นเหตุผลที่ฉันต้องการให้การออกแบบไซต์ใหม่ใช้งานได้จริงก่อนสิ้นปีนี้

เรากำลังวางแผนที่จะเปิดตัวส่วนใหม่ทั้งหมดใน WPBeginner ที่คุณหลายคนถามถึงในช่วง 2 ปีที่ผ่านมา

เร็วๆ นี้ และฉันหวังว่าจะเปิดตัวภายในต้นไตรมาสที่ 2 ปี 2022

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

นอกจากนั้น คอยดูช่อง YouTube ของเราในขณะที่เรากำลังจะทำสิ่งที่ยอดเยี่ยมจริงๆ ในปี 2022

และเช่นเคย ฉันอยากจะขอบคุณทุกท่านที่ให้การสนับสนุนและข้อเสนอแนะอย่างต่อเนื่องตลอดหลายปีที่ผ่านมา

ขอแสดงความนับถือ
ไซอิด บัลคี
ผู้ก่อตั้ง WPBeginner