รายการตรวจสอบการเพิ่มประสิทธิภาพ WordPress

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

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

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

การทดสอบที่ Amazon เปิดเผยผลลัพธ์ที่คล้ายกัน: ทุกๆ 100 ms เวลาในการโหลดที่เพิ่มขึ้นของ Amazon.com ลดยอดขายลง 1% (Kohavi และ Longbotham 2007)

ที่มา: https://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

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

แต่เว็บไซต์ของฉันโหลดเร็วมาก!

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

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

มีหลายสิ่งที่ต้องทำที่สามารถปรับปรุงความเร็วของเว็บไซต์ WordPress ของคุณได้ มาเริ่มกันเลย

สคริปต์ย่อขนาด

เว็บไซต์ WordPress เป็นการผสมผสานระหว่าง HTML, CSS, JavaScript และภาพ โค้ด HTML จะถูกโหลดก่อน จากนั้นจะมีข้อมูลเกี่ยวกับไฟล์อื่นๆ ของสไตล์ชีต CSS, ไฟล์ JavaScript และรูปภาพ

แต่ละไฟล์จะถูกโหลดตามลำดับ โดยปกติเบราว์เซอร์จะมีขีดจำกัด "ไพพ์" 2-4 ไฟล์ ซึ่งหมายความว่าเบราว์เซอร์จะโหลดไฟล์ได้ไม่เกิน 2-4 ไฟล์ พร้อมกัน จากเซิร์ฟเวอร์ที่โฮสต์ไฟล์ไว้

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

ในบางกรณี ปลั๊กอินจะฉีดสไตล์ JavaScript หรือ CSS ลงใน HTML โดยตรง นักพัฒนาปลั๊กอิน WordPress หรือผู้เขียนธีมส่วนใหญ่ฉลาดพอที่จะไม่ทำเช่นนี้

นี่เป็นเพียงตัวอย่างจากเว็บไซต์ WordPress ทั่วไป โค้ด HTML มีลิงก์ไปยังไฟล์อื่นๆ หลายไฟล์ ในตัวอย่างง่ายๆ นี้ ไฟล์ JavaScript 4 ไฟล์ถูกโหลด ทีละไฟล์

<script type=”text/javascript” src=”https://domain.com/wp-includes/js/jquery/jquery.js?ver=1.7.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/themes/Trim/js/socialite.min.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js?ver=3.4.2″></script >

WordPress มีฟังก์ชันภายในที่ช่วยให้ผู้เขียนปลั๊กอินและธีมสามารถฝังไฟล์ JavaScript และ CSS ที่จำเป็นได้

wp_enqueue_script() และ wp_enqueue_style() ชื่อของฟังก์ชันต่างๆ ให้เบาะแสที่ชัดเจนถึงสิ่งที่พวกเขาทำ ด้วยการใช้อย่างใดอย่างหนึ่งเหล่านี้เพื่อฝังไฟล์ที่จำเป็น ผู้เขียนปลั๊กอินและธีมจะจัดคิวไฟล์ของตนพร้อมกับปลั๊กอินอื่นๆ ทั้งหมดและแม้แต่ WordPress เอง

นอกจากนี้ยังสามารถสั่งการทำงานของการพึ่งพาใด ๆ ของไลบรารีอื่น ๆ โดยปกติไฟล์รวม JavaScript ขึ้นอยู่กับ jQuery ที่จะโหลดก่อน

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

ปลั๊กอินย่อขนาดมักจะไม่รวมการตั้งค่าสำหรับไฟล์บางไฟล์ที่เล่นได้ไม่ดีเมื่อโหลดร่วมกับไฟล์อื่น หรือสำหรับเปลี่ยนตำแหน่งที่จะโหลดไฟล์ ในส่วนหัวหรือส่วนท้ายของเอกสาร

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

หมายเหตุ: ในตัวอย่างโค้ด ฉันเก็บ url ของธีมไว้ในตัวแปรแล้วแยกวิเคราะห์ไปที่ฟังก์ชัน wp_enqueue_script ซึ่งจะช่วยลดจำนวนการเรียก PHP และ/หรือฐานข้อมูลที่จำเป็น ส่งผลให้ความเร็วเพิ่มขึ้น

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

หลังจากติดตั้งปลั๊กอินย่อขนาดแล้ว สไตล์ชีต JavaScript และ CSS จะถูกรวมเข้ากับการเรียก HTTP ที่น้อยลง

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

รวม 4 ไฟล์เป็น "ไฟล์" / คำขอสำหรับเบราว์เซอร์ของคุณ

ฉันเจอเว็บไซต์ที่ใช้ WordPress ซึ่งโหลดไฟล์ 22 .css และ 15 .js ทั้งหมดอยู่เบื้องหน้า การเปลี่ยนแปลงของความเร็วนั้นน่าทึ่งมาก หากคุณสามารถลดจำนวนไฟล์ภายนอกได้

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

เพิ่มประสิทธิภาพ header.php

header.php ในธีมของคุณถูกเรียกในแต่ละหน้าบนเว็บไซต์ WordPress ของคุณ ไฟล์นี้มักจะมีองค์ประกอบมากมายที่สามารถปรับให้เหมาะสมได้

ตัวอย่างคลาสสิกคือ bloginfo('template_directory') ซึ่งปกติจะเรียกหลายครั้งในส่วนหัวเพื่อส่งคืน URL ของธีมเพื่อรวมไฟล์ภายนอก

วิธีที่มีประสิทธิภาพมากขึ้นคือการส่งคำขอเดียวสำหรับ url แล้วเก็บเป็นตัวแปร

$template_directory = get_bloginfo('template_directory'); 

ตอนนี้ URL ของไดเร็กทอรีธีมถูกเก็บไว้ในตัวแปร $template_directory

ตัวอย่างเพิ่มเติมเกี่ยวกับวิธีการปรับปรุงประสิทธิภาพของ header.php สามารถอ่านได้ในบล็อกโพสต์ WordPress header.php เคล็ดลับการเพิ่มประสิทธิภาพ

ลดจำนวนปลั๊กอิน

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

อย่างไรก็ตาม การมีปลั๊กอินจำนวนมากที่ทำงานอยู่สามารถลดความเร็วของเว็บไซต์ WordPress ของคุณได้ ปลั๊กอินจำนวนมากมีฟังก์ชันเดียวที่สามารถจัดการได้ง่ายๆ ด้วยโค้ดที่ใส่ใน functions.php ของคุณ

ในหลายกรณี คุณอาจต้องใช้เพียงฟังก์ชันเดียว แต่ปลั๊กอินที่คุณใช้มีตัวเลือกอื่นๆ ที่คุณไม่เคยใช้

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

อย่าใช้รูปภาพ – ใช้ CSS3

การออกแบบเว็บไซต์ใช้รูปภาพเพื่อช่วยในการสร้างส่วนต่อประสานกับผู้ใช้

หลังจากการแนะนำ CSS และโดยเฉพาะอย่างยิ่ง CSS3 เอฟเฟกต์มากมายที่ใช้สำหรับเว็บอินเตอร์เฟสสามารถเลียนแบบได้โดยใช้โค้ด CSS และ HTML

[กล่อง]หมายเหตุ: เอฟเฟกต์เหล่านี้ส่วนใหญ่เข้ากันไม่ได้กับทุกเบราว์เซอร์ โดยเฉพาะ Internet Explorer รุ่นเก่า (ใช่ มักเป็นปัญหาสำหรับนักพัฒนาเว็บทุกคน) หากคุณต้องการปรับความเร็วเว็บไซต์ของคุณให้เหมาะสม การใช้เอฟเฟกต์ CSS อาจเป็นวิธีแก้ปัญหาที่รวดเร็วและรวดเร็ว แต่ไม่ใช่ตัวเลือกที่ดีหากผู้ชมหลักของลูกค้าใช้เบราว์เซอร์ที่ล้าสมัย[/box]

หากคุณกำลังทำงานให้กับลูกค้าที่กำหนดเป้าหมายไปที่ B2C (ธุรกิจถึงผู้บริโภค) คุณควรตรวจสอบ Google Analytics ของพวกเขาหรือถามพวกเขาเกี่ยวกับประเภทของลูกค้าที่พวกเขามี (หรือต้องการกำหนดเป้าหมาย) สิ่งนี้สามารถมีผลหากคุณใช้เอฟเฟกต์ CSS3 ได้หากผู้ชมของลูกค้าโดยทั่วไปใช้เบราว์เซอร์ที่ล้าสมัย

เมื่อ Elegantthemes.com ออกเวอร์ชันใหม่ของปลั๊กอินรหัสย่อ มันส่งผลกระทบอย่างมากต่อเวลาในการโหลดสำหรับลูกค้าของฉัน เนื่องจากเอฟเฟกต์ CSS3 และการวางรูปภาพหลายรูปไว้ในสไปรต์เดียว

โฟลเดอร์รหัสย่อ/รูปภาพ ซึ่งเคยมี 90 ภาพ ขณะนี้มีสไปรท์ PNG ตัวเดียว โดยลดขนาดโดยรวมลงจาก 140kb เป็น 15kb!
(นั่นคือการลดขนาดลงประมาณ 90%)

รูปภาพเพื่อสไปรท์

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

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

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

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

SpriteMe.org เป็นแหล่งข้อมูลที่ยอดเยี่ยมสำหรับการสร้างสไปรท์ วิธีที่ดีที่สุดคือการวางแผนล่วงหน้าและสร้างสไปรท์ของคุณก่อน แต่ถ้าคุณต้องการแก้ไขเว็บไซต์ที่มีอยู่ ไซต์ spriteme.org มี bookmarklet ที่ทำให้กระบวนการนี้ง่ายมาก

ตัวอย่างสไตล์ CSS ร่วมกับสไปรท์:

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

สไตล์ CSS แต่ละสไตล์อ้างอิงไฟล์เดียวกัน แต่ตำแหน่งพื้นหลังต่างกัน โดยแสดงส่วนต่างๆ ของรูปภาพ

แจกจ่าย – ใช้ CDN

มีประโยชน์หลักสองประการสำหรับการใช้ CDN (Content Distribution Network) สำหรับการโฮสต์ไฟล์ธีมและองค์ประกอบของ WordPress

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

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

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

เซิร์ฟเวอร์ที่เหมาะสมสำหรับเว็บไซต์ของคุณ

เซิร์ฟเวอร์ที่โฮสต์เว็บไซต์จะต้องอยู่ใกล้กับกลุ่มเป้าหมาย ดังนั้น หากเว็บไซต์มีเป้าหมายไปที่ตลาดเยอรมัน วิธีที่ดีที่สุดคือหาเซิร์ฟเวอร์ที่มีบริษัทโฮสติ้งในเยอรมนี หรืออย่างน้อยก็ในยุโรปกลาง

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

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

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

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

แก้ไขข้อผิดพลาด 404

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

เคล็ดลับ: ลองดูโค้ดนี้เพื่อเปลี่ยนเส้นทาง 301 ไม่พบหน้าเปลี่ยนเส้นทางโดยอัตโนมัติ

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

เทคนิคบางส่วนหรือส่วนใหญ่จะใช้งานยาก เว้นแต่คุณจะเป็นนักพัฒนา แต่ทุกเทคนิคจะทำให้ไซต์ WordPress ของคุณทำงานเร็วขึ้น
[/กล่อง]

รายการตรวจสอบ

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