เหตุใดเราจึงสร้างเว็บไซต์ของเราขึ้นมาใหม่จากรอยขีดข่วน
มุมมองภายในเกี่ยวกับวิวัฒนาการที่จําเป็นของเราและบทเรียนที่ได้รับระหว่างกระบวนการออกแบบใหม่
ไม่มีรายละเอียดบัตร
1) ทำไมเราจึงสร้างเว็บไซต์ใหม่และไม่สามารถ "เปลี่ยนธีม" ได้
เมื่อเราพบเห็นความจำเป็นในการเปลี่ยนแปลงเป็นครั้งแรก ดูเหมือนว่างานนี้จะง่าย: “เปลี่ยนบล็อกด้านบนและทำให้การเรียกร้องให้ดำเนินการมีประสิทธิภาพมากขึ้น” หากดูเผินๆ อาจดูเหมือนเป็นการแก้ไขปัญหาอย่างรวดเร็ว แต่ในไม่ช้า เราก็ตระหนักได้ว่างานเล็กๆ น้อยๆ นี้เผยให้เห็นปัญหาพื้นฐานที่ใหญ่กว่ามากเกี่ยวกับโครงสร้างและการออกแบบของไซต์ ปัญหาไม่ได้อยู่ที่บล็อกเดียว แต่เป็นสถาปัตยกรรมทั้งหมดของไซต์ที่จำเป็นต้องได้รับการปรับปรุง
เว็บไซต์ของเราถูกสร้างขึ้นมาตามกาลเวลา โดยมีการเพิ่มหน้าต่างๆ เข้ามาโดยใช้การออกแบบและเลย์เอาต์ที่หลากหลาย โดยไม่มีธีมหรือเทมเพลตที่เชื่อมโยงกัน แต่ละหน้ามีการออกแบบที่ไม่เหมือนกัน ซึ่งอาจฟังดูสร้างสรรค์ แต่กลับนำไปสู่ปัญหาสำคัญอย่างหนึ่ง นั่นคือ ความไม่สอดคล้องกัน หากเราเดินหน้าต่อไปและสร้างการออกแบบใหม่สำหรับบล็อกด้านบนเท่านั้นในขณะที่ยังคงรักษาส่วนที่เหลือของเว็บไซต์ไว้ตามเดิม นั่นหมายความว่าเราต้องอัปเดตบล็อกนั้นด้วยตนเองในกว่า 700 หน้าและโพสต์ต่างๆ ที่แย่กว่านั้นก็คือจะต้องทำซ้ำขั้นตอนด้วยตนเองนี้ทุกครั้งที่ต้องการเปลี่ยนแปลงในอนาคต ลองนึกภาพว่าการต้องค้นหาหน้าต่างๆ หลายร้อยหน้าเพื่อให้แน่ใจว่าแต่ละหน้ามีการอัปเดตล่าสุดนั้นไร้ประสิทธิภาพเพียงใด ในไม่ช้าก็ชัดเจนขึ้นว่าการทำงานกับเว็บไซต์เดิมต่อไปนั้นไม่ยั่งยืน
นอกเหนือจากการจัดการด้านลอจิสติกส์ในการอัปเดตแต่ละหน้าแล้ว เรายังต้องพิจารณาถึงประสบการณ์โดยรวมของผู้ใช้ด้วย ผู้ใช้ในปัจจุบันคาดหวังประสบการณ์ที่ราบรื่นและเชื่อมโยงกันเมื่อเข้าชมเว็บไซต์ หากเลื่อนลงมาในหน้าหนึ่งและพบว่าการออกแบบไม่สอดคล้องกัน โดยแต่ละบล็อกใช้รูปแบบที่แตกต่างกัน ก็จะให้ความรู้สึกไม่ต่อเนื่องและไม่เป็นมืออาชีพ และแย่กว่านั้น เมื่อผู้ใช้เลื่อนจากหน้าหนึ่งไปยังอีกหน้าหนึ่งและสังเกตเห็นว่าเค้าโครงและการออกแบบแตกต่างกันโดยสิ้นเชิง ก็จะยิ่งทำให้รู้สึกไม่เป็นระเบียบมากขึ้น
ความไม่สอดคล้องกันขยายออกไปเกินขอบเขตของเค้าโครง รูปภาพจำนวนมากบนเว็บไซต์นั้นล้าสมัย มีสไตล์ที่ไม่ดี หรือแม้แต่สร้างขึ้นโดยเครือข่ายประสาทที่ไม่เหมาะสม รูปภาพเหล่านี้ไม่เป็นไปตามมาตรฐานการออกแบบสมัยใหม่ และการหารูปภาพใหม่มาแทนที่ก็เป็นอีกงานที่น่ากังวล การใช้รูปภาพที่ไม่ดีนั้นสะท้อนถึงคุณภาพโดยรวมของเว็บไซต์ในทางลบ ทำให้ผู้ใช้มีความประทับใจเชิงลบต่อผลิตภัณฑ์หรือบริการที่เรานำเสนอ
ไม่มีวิธีง่ายๆ ในการอัปเดตไซต์อย่างครอบคลุมโดยใช้เครื่องมือเช่น Elementor แต่ละหน้าและบล็อกมีสไตล์อินไลน์ของตัวเอง ซึ่งหมายความว่าไม่สามารถเปลี่ยนแปลงได้ทั่วโลก หากเราต้องการอัปเดตสไตล์ของไซต์ เราจะต้องผ่านทุกหน้าและอัปเดตแต่ละบล็อกด้วยตนเอง ซึ่งจะใช้เวลานานและไม่มีประสิทธิภาพ ด้วยเหตุนี้ จึงเห็นได้ชัดว่าทางออกเดียวของเราคือการสร้างเว็บไซต์ใหม่ตั้งแต่เริ่มต้น สิ่งนี้จะช่วยให้เราสามารถถ่ายโอนเนื้อหาทั้งหมดในขณะที่ยังคงรักษา URL เดียวกัน แต่มีการออกแบบใหม่ สม่ําเสมอ และอัปเดตได้ง่าย
2) ทําไมเราตัดสินใจไม่ใช้ Elementor
Elementor เป็นหนึ่งในเครื่องมือสร้างเพจที่ได้รับความนิยมมากที่สุดสําหรับ เวิร์ดเพรส● ดูเผินๆ ดูเหมือนเป็นเครื่องมือที่ยอดเยี่ยมที่ช่วยให้สร้างเพจได้ง่ายและรวดเร็ว อย่างไรก็ตาม หลังจากทํางานอย่างกว้างขวางแล้ว เราพบข้อจํากัดหลายประการที่ทําให้เราตัดสินใจย้ายออกจาก Elementor และเลือกใช้เว็บไซต์ที่สร้างขึ้นเองแทน
Elementor’s ข้อจํากัดและความท้าทาย:
- ข้อบกพร่องและข้อบกพร่อง: ในขณะที่ Elementor มีคุณสมบัติที่มีประโยชน์มากมายก็ไม่ได้โดยไม่มีปัญหาทางเทคนิค ตัวอย่างเช่น เมื่อเราคัดลอกเพจและพยายามแก้ไข เพจใหม่มักจะดูแตกต่างจากหน้าเดิม ก่อนที่จะทําการเปลี่ยนแปลงใดๆ เสียด้วยซ้ํา มีข้อบกพร่องบ่อยครั้งเกี่ยวกับวิธีการแสดงองค์ประกอบต่างๆ เช่น คุณสมบัติ “ความกว้างสูงสุดของภาพ” ทํางานไม่ถูกต้อง ข้อบกพร่องเหล่านี้ทําให้ยากต่อการรับประกันการจัดสไตล์ที่สม่ําเสมอทั่วทั้งหน้า
- เสรีภาพในการสร้างสรรค์มากเกินไป นําไปสู่ความไม่สอดคล้องกัน: หนึ่งใน Elementor’s จุดขายที่สําคัญคือความสามารถในการปรับแต่งทุกอย่าง อย่างไรก็ตาม ความยืดหยุ่นนี้อาจเป็นดาบสองคม โดยเฉพาะอย่างยิ่งเมื่อบรรณาธิการหลายคนทํางานบนเว็บไซต์ เป็นเรื่องง่ายสําหรับผู้ที่ไม่ใช่มืออาชีพที่จะสร้างเพจที่มีการออกแบบที่ไม่สอดคล้องกันโดยไม่ได้ตั้งใจ ตัวอย่างเช่น เราเห็นตัวอย่างของผู้แก้ไขที่ใช้ข้อความสีชมพูบนปุ่มสีชมพู หรือเพิ่มรูปสามเหลี่ยมสีส้มบินเป็นพื้นหลัง ส่งผลให้การออกแบบรกและสับสน หากไม่มีระบบการออกแบบที่เข้มงวด ก็ไม่สามารถรักษาเอกลักษณ์ทางภาพที่เหนียวแน่นได้
- การปรับแต่งที่จํากัดสําหรับฟังก์ชันการทํางานขั้นสูง: ในขณะที่ Elementor เก่งในการสร้างหน้าขั้นพื้นฐานที่มีข้อความและภาพ, มันจะกลายเป็นความท้าทายมากขึ้นเมื่อคุณต้องการที่จะเพิ่มฟังก์ชั่นที่กําหนดเอง เรามักจะพบว่าตัวเองถูกจํากัดอยู่ในบล็อกในตัว ซึ่งยากต่อการปรับแต่งสําหรับคุณสมบัติที่ซับซ้อนมากขึ้น เมื่อความต้องการของเราเติบโตเกินกว่าเค้าโครงพื้นฐาน ข้อจํากัดของ Elementor’s ก็ชัดเจนมากขึ้น
- รหัสป่องและปัญหาประสิทธิภาพ: Elementor’s วิธีการสร้างหน้าแนะนําการซ้อนมากเกินไปขององค์ประกอบ ตัวอย่างเช่น Elementor จะสร้างหลายรายการโดยอัตโนมัติ
ภาชนะบรรจุภายในอื่นๆองค์ประกอบแต่ละอย่างมีสไตล์ของตัวเอง ส่งผลให้เกิดโครงสร้างที่บวมซึ่งส่งผลเสียต่อความเร็วในการโหลด ประสิทธิภาพของเพจ และท้ายที่สุดคือการจัดอันดับ SEO ของเว็บไซต์ เมื่อเราทําการทดสอบความเร็ว ผลลัพธ์ที่ได้ก็ย่ําแย่อย่างต่อเนื่อง และโค้ดจํานวนมากที่สร้างโดย Elementor ก็เป็นสาเหตุส่วนใหญ่ - ไม่มีความสามารถในการทดสอบ A/B: ในภูมิทัศน์ดิจิทัลในปัจจุบัน การทดสอบ A/B เป็นสิ่งจําเป็นสําหรับการเพิ่มประสิทธิภาพประสบการณ์ผู้ใช้ อย่างไรก็ตาม Elementor ไม่สามารถแสดงไซต์เวอร์ชันต่างๆ ให้กับผู้ใช้ที่แตกต่างกันได้ ทุกคนเห็นไซต์เดียวกัน ซึ่งจํากัดความสามารถของเราในการทดสอบและปรับแต่งองค์ประกอบการออกแบบ เช่น สี รูปร่างปุ่ม และภาพพื้นหลัง หากไม่มีฟังก์ชันนี้ เราไม่สามารถเพิ่มประสิทธิภาพไซต์ตามพฤติกรรมผู้ใช้จริงได้
- ฐานข้อมูล Bloat: บางทีหนึ่งในข้อเสียที่สําคัญที่สุดของ Elementor คือวิธีการจัดการกับรูปแบบและเนื้อหา Elementor เก็บรูปแบบโครงสร้างซ้อนและแท็กที่ไม่จําเป็นอื่น ๆ ผสมกับเนื้อหาในฐานข้อมูล สิ่งนี้นําไปสู่ฐานข้อมูลที่บวมซึ่งไม่ได้รับการล้างข้อมูลแม้ว่า Elementor จะถูกปิดใช้งานหรือถอนการติดตั้งก็ตาม เป็นผลให้การเปลี่ยนไปใช้ธีมหรือเฟรมเวิร์กใหม่ไม่สามารถแก้ปัญหาได้ – สไตล์เหล่านั้นยังคงฝังอยู่ในหน้าต่างๆ และทําให้เกิดปัญหาต่อไป
เมื่อคํานึงถึงความท้าทายทั้งหมดนี้ เห็นได้ชัดว่าเราต้องการวิธีแก้ปัญหาที่แข็งแกร่งกว่านี้ เราได้ตัดสินใจสร้างเว็บไซต์อิสระใหม่โดยไม่มี Elementor โดยเลือกใช้แนวทางที่ยั่งยืนและยืดหยุ่นมากขึ้น
3) วิธีการสร้างหน้าบนเว็บไซต์ใหม่
การสร้างไซต์ใหม่ตั้งแต่ต้นทำให้เรามีโอกาสสร้างกระบวนการสร้างเพจที่เรียบง่ายและคล่องตัว ในระบบใหม่ การสร้างเพจเป็นเรื่องง่าย:
- เข้าสู่ระบบแผงควบคุมผู้ดูแลระบบ WordPress และคลิก หน้า -> เพิ่มหน้าใหม่
- คุณจะเห็นตัวแก้ไข WordPress มาตรฐานซึ่งคุณสามารถเขียนหรือวางข้อความ เพิ่มลิงก์ และอัปโหลดรูปภาพได้
กระบวนการนี้ง่ายแต่ยืดหยุ่น แทนที่จะอาศัยระบบบล็อกที่ซับซ้อน Elementor’s ตัวแก้ไขเนื้อหาใน WordPress นั้นสะอาดกว่ามาก ช่วยให้สามารถอัปเดตได้อย่างรวดเร็วและปรับแต่งได้ง่าย ด้านล่างตัวแก้ไขมีการตั้งค่าสําหรับ ฟิลด์ที่กําหนดเองขั้นสูง (ACF) ซึ่งได้รับการกําหนดค่าให้รักษาความสอดคล้องทั่วทั้งไซต์แล้ว
ACF ช่วยให้เราสร้างส่วนเนื้อหาที่ยืดหยุ่นได้ โดยใช้บล็อก เช่น เนื้อหา 1…เนื้อหา 15 ซึ่งคุณสามารถกำหนดชื่อ ข้อความ รูปภาพ และป้ายชื่อปุ่มสำหรับแต่ละส่วนของหน้าได้อย่างง่ายดาย บล็อกเหล่านี้จะสลับตำแหน่งของรูปภาพและข้อความโดยอัตโนมัติ ทำให้เค้าโครงยังคงดึงดูดสายตาโดยไม่ต้องปรับแต่งด้วยมือ
สำหรับรูปภาพ เราได้นำระบบจับคู่สีมาใช้ซึ่งจะทำการไล่เฉดสีให้กับสีหลักของเว็บไซต์โดยอัตโนมัติ วิธีนี้จะช่วยให้รูปภาพทั้งหมดสอดคล้องกับรูปลักษณ์โดยรวม สำหรับโลโก้หรือภาพหน้าจอที่จำเป็นต้องคงสีไว้ จะมีตัวเลือก "คงสีไว้" ที่จะแทนที่การไล่เฉดสี
ระบบนี้ช่วยลดความซับซ้อนในการจัดการเนื้อหาในขณะที่ยังคงความสอดคล้องของการออกแบบในทุกหน้า
4) วิธีการสร้างโพสต์ใหม่
การสร้างโพสต์บนไซต์ใหม่จะปฏิบัติตามกระบวนการเดียวกันกับการสร้างเพจ โดยมีความแตกต่างที่สำคัญบางประการดังนี้:
- โพสต์จะมี URL ที่รวมถึง ../blog/.. ซึ่งจะทำให้แตกต่างจากหน้าอื่นๆ
- ในแถบด้านข้างทางขวา บล็อกจะแสดงบทความสามบทความล่าสุดโดยอัตโนมัติ ช่วยให้บล็อกมีชีวิตชีวาและน่าสนใจ
เทมเพลตสำหรับโพสต์ทั้งหมดอยู่ในไฟล์ template-parts/content/content-single.php ซึ่งจัดการโครงสร้างและเค้าโครงของโพสต์บล็อกแต่ละโพสต์ เทมเพลตที่สอดคล้องกันนี้ช่วยให้อัปเดตได้ง่ายและรับรองว่าโพสต์ทั้งหมดปฏิบัติตามแนวทางการออกแบบเดียวกัน
5) ฟิลด์ที่กำหนดเองขั้นสูง (ACF)
ACF เป็นส่วนสำคัญในการพัฒนาเว็บไซต์ใหม่ของเรา ช่วยให้เราสร้างฟิลด์ที่กำหนดเองได้ ซึ่งสามารถจัดการได้ง่ายผ่านแผงควบคุมผู้ดูแลระบบ WordPress ฟิลด์เช่น content_1 จะถูกอ้างอิงในโค้ด PHP ช่วยให้เราดึงเนื้อหาที่ถูกต้องสำหรับแต่ละหน้าและโพสต์ได้อย่างไดนามิก
ความยืดหยุ่นนี้เป็นสิ่งสำคัญเพื่อให้แน่ใจว่าเราสามารถจัดการและอัปเดตไซต์ได้อย่างมีประสิทธิภาพ ในขณะที่ยังคงมีพื้นที่สำหรับการปรับแต่งเมื่อจำเป็น
6) การทดสอบ A/B
การปรับปรุงที่สำคัญที่สุดอย่างหนึ่งที่เราทำกับไซต์ใหม่คือการใช้การทดสอบ A/B การทดสอบ A/B ช่วยให้เราเปรียบเทียบไซต์สองเวอร์ชันเพื่อดูว่าเวอร์ชันใดทำงานได้ดีกว่ากับผู้ใช้ ซึ่งอาจรวมถึงการทดสอบสี รูปร่างปุ่ม พื้นหลัง หรือแม้แต่เลย์เอาต์ที่แตกต่างกัน
เราใช้งานฟังก์ชันนี้โดยใช้ พารามิเตอร์ GET ใน URL ตัวอย่างเช่น สามารถสร้างแคมเปญโฆษณาที่เหมือนกันสองแคมเปญได้ แต่มี URL ที่แตกต่างกัน:
https://www.conveythis.com/?param=1
https://www.conveythis.com/?param=2
เมื่อผู้ใช้คลิกลิงก์เหล่านี้ พารามิเตอร์จะถูกบันทึกในคุกกี้ โดยเว็บไซต์จะแสดงหน้าเว็บในเวอร์ชันต่างๆ เช่น สีปุ่มหรือรูปภาพพื้นหลังที่แตกต่างกัน ขึ้นอยู่กับค่าของพารามิเตอร์ วิธีนี้ช่วยให้เราสามารถรวบรวมข้อมูลอันมีค่าเกี่ยวกับการตั้งค่าและพฤติกรรมของผู้ใช้ได้
เหตุการณ์ทั้งหมดถูกบันทึกไว้ใน .csv ไฟล์ดังกล่าวรวมถึงฐานข้อมูล MySQL ช่วยให้เราวิเคราะห์ข้อมูลและตัดสินใจอย่างรอบรู้เกี่ยวกับการปรับปรุงเว็บไซต์ได้
7) ไฟล์ functions.php
- ประเภทโพสต์ที่กำหนดเองและอนุกรมวิธาน
หนึ่งในการใช้งานหลักของไฟล์ functions.php คือการสร้างประเภทโพสต์และอนุกรมวิธานแบบกำหนดเอง ซึ่งช่วยให้เราจัดระเบียบเนื้อหาได้อย่างมีประสิทธิภาพมากขึ้น แทนที่จะใช้โครงสร้าง WordPress เริ่มต้นเพียงอย่างเดียว (หน้าและโพสต์) เราได้นำประเภทแบบกำหนดเองมาใช้กับเนื้อหาเฉพาะ เช่น กรณีศึกษา คำรับรอง หรือคุณลักษณะของผลิตภัณฑ์ ซึ่งไม่เพียงแต่ช่วยให้เนื้อหาของเราเป็นระเบียบมากขึ้นเท่านั้น แต่ยังช่วยปรับปรุงประสบการณ์การใช้งานของผู้ใช้ด้วยการทำให้การนำทางและการค้นหาข้อมูลที่เกี่ยวข้องง่ายขึ้นอีกด้วย
ตัวอย่างเช่น หากต้องการสร้างประเภทโพสต์แบบกำหนดเองสำหรับกรณีศึกษา เราได้เพิ่มโค้ดต่อไปนี้ใน functions.php :
ฟังก์ชัน create_case_study_post_type() {
register_post_type('กรณีศึกษา',
อาร์เรย์(
'ป้ายกำกับ' =>อาร์เรย์(
'ชื่อ' => __( 'กรณีศึกษา' ),
'singular_name' => __( 'กรณีศึกษา' )
),'สาธารณะ' => จริง,
'has_archive' => จริง,
'เขียนใหม่' => อาร์เรย์('slug' => 'กรณีศึกษา')
)
);
}
add_action('init', 'สร้าง_กรณีศึกษา_โพสต์_ประเภท');
ซึ่งจะสร้างประเภทโพสต์ใหม่ที่เรียกว่า "Case Studies" ซึ่งมีลักษณะคล้ายคลึงกับโพสต์ทั่วไป แต่มีโครงสร้างไฟล์เก็บถาวรและอนุกรมวิธานของตัวเอง
- การโหลดสคริปต์และรูปแบบภายนอก
การใช้งานที่สำคัญอีกประการหนึ่งของ functions.php คือการโหลดสคริปต์และรูปแบบภายนอก เพื่อให้แน่ใจว่าเว็บไซต์ของเรามีไลบรารีและเฟรมเวิร์กที่จำเป็นทั้งหมด ตัวอย่างเช่น เราได้รวมไลบรารีอย่าง Slick.js สำหรับสไลเดอร์และ AOS (Animate on Scroll) เพื่อสร้างแอนิเมชั่นที่ราบรื่น โดยการโหลดทรัพยากรเหล่านี้เฉพาะเมื่อจำเป็นเท่านั้น (เช่น บนหน้าหรือเทมเพลตเฉพาะ) เราลดความไม่จำเป็นและเพิ่มความเร็วในการโหลดหน้า
นี่คือวิธีที่เราจัดการการโหลดสไตล์และสคริปต์:
ฟังก์ชัน load_custom_scripts() {
// โหลดสไลเดอร์ Slick สำหรับเทมเพลตเฉพาะ
ถ้า( is_page_template('template-slider.php') ) {
wp_enqueue_style('slick-css', get_template_directory_uri() . '/css/slick.css' );
wp_enqueue_script('slick-js', get_template_directory_uri() . '/js/slick.min.js', array('jquery'), '', true );
} // โหลดแอนิเมชั่น AOS ทั่วทั้งไซต์
wp_enqueue_style('aos-css', get_template_directory_uri() . '/css/aos.css' );
wp_enqueue_script('aos-js', get_template_directory_uri() . '/js/aos.js', array('jquery'), '', true );
}
เพิ่มการดำเนินการ('wp_enqueue_scripts', 'load_custom_scripts');
โดยใช้การตรวจสอบแบบมีเงื่อนไข (เช่น เป็นเทมเพลตหน้าเพจ()) เรามั่นใจว่าสคริปต์ที่ไม่จำเป็นจะไม่ถูกโหลดลงทั่วทั้งไซต์ จึงทำให้ประสิทธิภาพการทำงานดีขึ้น
- รหัสย่อที่กำหนดเอง
เพื่อปรับปรุงความยืดหยุ่นให้กับผู้ใช้ที่ไม่ใช่ช่างเทคนิคในการจัดการเนื้อหาไซต์ เราได้เพิ่มรหัสย่อแบบกำหนดเองผ่าน functions.php รหัสย่อเหล่านี้ช่วยให้ผู้ใช้สามารถแทรกฟังก์ชันที่ซับซ้อนหรือองค์ประกอบที่มีรูปแบบต่างๆ ได้อย่างง่ายดายโดยไม่ต้องแตะต้องรหัส ตัวอย่างเช่น เราได้สร้างรหัสย่อสำหรับเพิ่มปุ่มแบบกำหนดเองที่ใดก็ได้ในไซต์:
[ข้อมูลปกปิด]
ชอร์ตโค้ดนี้ช่วยให้บรรณาธิการสามารถเพิ่มปุ่มที่มีข้อความและ URL ที่กำหนดเองได้อย่างง่ายดาย ช่วยให้ปรับเปลี่ยนได้อย่างรวดเร็วโดยไม่ทำลายการออกแบบ
8) การจัดการ SEO และความเร็วของเว็บไซต์
จุดสนใจหลักในระหว่างการยกเครื่องเว็บไซต์คือการปรับปรุง SEO และประสิทธิภาพของไซต์โดยรวม ไซต์ดั้งเดิมที่สร้างขึ้นโดยใช้ Elementor มีปัญหาเกี่ยวกับเวลาในการโหลดที่ช้าและแนวทางปฏิบัติ SEO ที่ไม่ดีนักเนื่องจากโค้ดที่ป่องและรูปภาพที่ไม่ได้รับการปรับให้เหมาะสม
การปรับปรุง SEO
เพื่อให้แน่ใจว่าไซต์ใหม่ของเราเป็นมิตรกับ SEO เราได้นำแนวทางปฏิบัติที่ดีที่สุดหลายประการมาใช้ตั้งแต่เริ่มต้น:
-
HTML แบบความหมาย : เราจัดโครงสร้าง HTML ของเว็บไซต์อย่างรอบคอบด้วยการใช้แท็กส่วนหัวอย่างเหมาะสม (
-ฯลฯ) เพื่อให้แน่ใจว่าเครื่องมือค้นหาสามารถวิเคราะห์และทำความเข้าใจลำดับชั้นของเนื้อหาได้อย่างง่ายดาย ซึ่งถือเป็นสิ่งสำคัญโดยเฉพาะอย่างยิ่งสำหรับการจัดอันดับ SEO และการเข้าถึง - เมตาแท็กและข้อมูลโอเพ่นกราฟ : เราใช้ประโยชน์จากปลั๊กอิน Yoast SEO เพื่อจัดการเมตาไตเติล คำอธิบาย และข้อมูลโอเพ่นกราฟสำหรับการแชร์บนโซเชียล ด้วยการใช้ Yoast เรามั่นใจได้ว่าแต่ละเพจและโพสต์มีเมตาเดตาที่ปรับให้เหมาะสม ซึ่งมีความสำคัญต่อการมองเห็นในเครื่องมือค้นหาและอัตราการคลิกผ่านจากแพลตฟอร์มโซเชียลมีเดีย
- มาร์กอัปโครงร่าง : เราใช้ไฟล์ functions.php เพื่อเพิ่มมาร์กอัปโครงร่างแบบกำหนดเองสำหรับข้อมูลที่มีโครงสร้าง ซึ่งช่วยปรับปรุงวิธีที่เครื่องมือค้นหาแสดงหน้าต่างๆ ของเราในผลการค้นหา ตัวอย่างเช่น เราได้รวมโครงร่างสำหรับบทความ กรณีศึกษา และผลิตภัณฑ์ ซึ่งช่วยให้เครื่องมือค้นหาจัดหมวดหมู่เนื้อหาของเราได้ดีขึ้น
ฟังก์ชัน add_schema_markup() {
เสียงสะท้อน '
{
"@บริบท": "http://schema.org",
"@type": "องค์กร",
"ชื่อ": "ConveyThis",
"url": "https://www.conveythis.com",
"logo": "https://www.conveythis.com/logo.png",
"เหมือนกัน": [
"https://www.facebook.com/conveythis"
"https://twitter.com/conveythis"
-
-
-
-
เพิ่มการดำเนินการ('wp_head', 'add_schema_markup');
การเพิ่มประสิทธิภาพความเร็วไซต์
ประสิทธิภาพเป็นปัจจัยสำคัญไม่เพียงแต่สำหรับประสบการณ์ของผู้ใช้เท่านั้น แต่ยังรวมถึงการจัดอันดับ SEO ด้วย เราได้ดำเนินการหลายขั้นตอนเพื่อปรับปรุงความเร็วของไซต์:
- การเพิ่มประสิทธิภาพรูปภาพ : เราใช้รูปแบบรูปภาพสมัยใหม่ เช่น WebP ซึ่งมีอัตราการบีบอัดที่ดีกว่ารูปแบบดั้งเดิม เช่น PNG และ JPEG รูปภาพทั้งหมดมีขนาดที่เหมาะสมตามความละเอียดหน้าจอของผู้ใช้ ทำให้โหลดได้เร็วแม้ในอุปกรณ์พกพา
- การโหลด แบบ Lazy Loading : การโหลดแบบ Lazy Loading สำหรับรูปภาพช่วยให้มั่นใจได้ว่าจะโหลดเฉพาะรูปภาพที่มองเห็นได้บนหน้าจอของผู้ใช้เท่านั้นในตอนแรก รูปภาพเพิ่มเติมจะโหลดขึ้นเมื่อผู้ใช้เลื่อนหน้าจอ ทำให้เวลาในการโหลดหน้าเริ่มต้นลดลง
- การแคชและการย่อขนาด: เราใช้ WP Rocket สําหรับการแคช การย่อขนาด และการบีบอัดไฟล์ HTML, CSS และ JavaScript WP Rocket ช่วยให้เราโหลดได้เร็วขึ้นโดยการลดขนาดไฟล์โดยรวมและให้บริการหน้าเว็บเวอร์ชันแคชแบบคงที่ให้กับผู้เยี่ยมชมซ้ํา
9) การเพิ่มประสิทธิภาพและการล้างฐานข้อมูล
เว็บไซต์เก่าได้รวบรวมข้อมูล “junk” จํานวนมาก เนื่องจาก Elementor’s บวมและโครงสร้างฐานข้อมูลไม่มีประสิทธิภาพ เพื่อให้แน่ใจว่าไซต์ใหม่ทํางานได้อย่างราบรื่น เราได้ดําเนินการล้างข้อมูลและการเพิ่มประสิทธิภาพฐานข้อมูลอย่างละเอียด
- การลบข้อมูลเก่า Elementor
ดังที่ได้กล่าวไว้ก่อนหน้านี้ แม้จะปิดใช้งาน Elementor แล้ว สไตล์และการตั้งค่าก็ยังคงฝังอยู่ในฐานข้อมูล เราใช้แบบสอบถามที่กําหนดเองเพื่อลบข้อมูลส่วนเกินนี้และล้างฐานข้อมูล นอกจากนี้ เรายังลบไฟล์สื่อที่ไม่ได้ใช้ การแก้ไขโพสต์ และชั่วคราวที่หมดอายุซึ่งสะสมอยู่ตลอดเวลา
- การจัดทำดัชนีฐานข้อมูล
นอกจากนี้ เรายังเพิ่มประสิทธิภาพฐานข้อมูลด้วยการเพิ่มดัชนีลงในคอลัมน์ที่ค้นหาบ่อยครั้ง เพื่อให้แน่ใจว่าการค้นหาฐานข้อมูลจะเร็วขึ้นและมีประสิทธิภาพมากขึ้น ตัวอย่างเช่น การเพิ่มดัชนีลงใน วันที่โพสต์ คอลัมน์นี้ช่วยเร่งความเร็วในการค้นหาที่เกี่ยวข้องกับโพสต์ล่าสุด เพื่อปรับปรุงประสิทธิภาพของหน้าบล็อกของเรา
บทสรุป
การตัดสินใจสร้างเว็บไซต์ใหม่ตั้งแต่เริ่มต้นได้รับแรงผลักดันจากข้อจํากัดและความไร้ประสิทธิภาพของไซต์เก่า การสลับธีมเพียงอย่างเดียวไม่ใช่ตัวเลือกที่ใช้ได้ เนื่องจากความไม่สอดคล้องกันของการออกแบบ สไตล์ที่บวม และปัญหาด้านประสิทธิภาพที่เกิดจาก Elementor ด้วยการสร้างไซต์ใหม่ที่มีการพัฒนาแบบกําหนดเองและฟิลด์แบบกําหนดเองขั้นสูง เราได้รับเว็บไซต์ที่มีประสิทธิภาพ สอดคล้องกัน และเป็นมืออาชีพมากขึ้น ซึ่งช่วยเพิ่มประสบการณ์ผู้ใช้ในขณะเดียวกันก็เปิดใช้งานการอัปเดตที่คล่องตัวและฟังก์ชันการทดสอบ A/B ไซต์ใหม่นี้เป็นรากฐานที่มั่นคงสําหรับการเติบโตและการปรับปรุงในอนาคต
สรุปโพสต์นี้ด้วย:
พร้อมที่จะเริ่มต้นหรือยัง?
การแปลเป็นมากกว่าแค่การรู้ภาษา แต่เป็นกระบวนการที่ซับซ้อน
โดยทําตามเคล็ดลับของเราและใช้ ConveyThis, หน้าที่แปลของคุณจะสะท้อนกับผู้ชมของคุณ, รู้สึกพื้นเมืองกับภาษาเป้าหมาย
แม้ว่าจะต้องใช้ความพยายาม แต่ผลลัพธ์ก็คุ้มค่า หากคุณกําลังแปลเว็บไซต์ ConveyThis สามารถประหยัดเวลาได้หลายชั่วโมงด้วยการแปลด้วยเครื่องอัตโนมัติ
ทดลองใช้ ConveyThis ฟรี 3 วัน!
CONVEYTHIS