ขั้นตอนง่าย ๆ ในการเพิ่มความเร็วให้กับเว็บไซต์ที่หนักหน่วงของภาพ

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

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

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

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

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

1. เพิ่มประสิทธิภาพ HTML-Code และ CSS-, JS-Files

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

วิธีย่อขนาดโค้ดเพื่อเพิ่มความเร็วในการโหลดไซต์

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

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

จัดกลุ่มไฟล์ CSS และไฟล์ JS ประเภทเดียวกัน แอปพลิเคชัน PHP ฟรี เช่น JCH Optimize, Cloudflare หรือ Minify ซึ่งถูกคัดลอกไปยังไดเร็กทอรีแยกต่างหากและส่งผ่านไฟล์ไซต์ทั้งหมด จะช่วยรวมองค์ประกอบต่างๆ เข้าด้วยกัน

2. ลบคำขอ HTTP พิเศษ

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

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

สามารถทำได้หลายวิธี:

• รวมภาพหลายภาพเป็นไฟล์กราฟิกเดียว (CSS sprite);
• ใช้รูปภาพแบบอินไลน์ (inline-pictures) ในสไตล์ชีตของหน้า
• ไฟล์ CSS หรือสคริปต์หลายไฟล์ในหน้าเดียวรวมกันเป็นไฟล์เดียว
• ลดจำนวนสถานการณ์และปลั๊กอินให้น้อยที่สุด

3. จัดเรียง JavaScript และ CSS ในลำดับที่ถูกต้อง

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

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

4. ลดจำนวนสคริปต์ภายนอก

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

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

5. เปิดใช้งาน Flush

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

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

6. แคชหน้า

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

คุณสามารถเปิดใช้งานการแคชโดยเพิ่มส่วนหัวหมดอายุลงในโค้ด HTML ไซต์ WordPress สามารถแคชได้อย่างง่ายดายโดยใช้การติดตั้งปลั๊กอินที่มีฟังก์ชันฟรีหรือฟรีบางส่วน เช่น W3 Total Cache, Cache Enabler หรือ Zen Cach

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

7. ใช้ CDN

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

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

8. เพิ่มประสิทธิภาพกราฟิกและวิดีโอ

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

รูปแบบที่แนะนำสำหรับเนื้อหาเว็บต่างๆ:

• SVG – สำหรับโลโก้เวกเตอร์และองค์ประกอบอินเทอร์เฟซที่เรียบง่าย
• PNG – สำหรับโครงร่างและโลโก้ที่ไม่ใช่เวกเตอร์
• JPG – สำหรับภาพถ่ายและภาพ;
• MPEG4 – สำหรับวิดีโอและแอนิเมชั่น

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

นอกจากนี้ เราทราบด้วยว่ารูปแบบเวกเตอร์ (SVG) อนุญาตให้ปรับขนาดได้โดยไม่สูญเสียคุณภาพกราฟิก

ขั้นตอนการเพิ่มประสิทธิภาพภาพ

ขั้นตอนที่ 1 – การลดขนาดของภาพ

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

เพื่อหลีกเลี่ยงการสูญเสียความเร็วเมื่อโหลดรูปภาพ โปรแกรมแก้ไขกราฟิกที่ติดตั้งใน OS เช่น Preview (Mac) หรือ Microsoft Paint (Windows) รวมถึงบริการออนไลน์ที่มีฟังก์ชันการทำงานที่คล้ายคลึงกันจะช่วยได้ การทำงานกับพวกเขาจะต้องใช้ทักษะเพียงเล็กน้อยในการทำงานกับกราฟิก

ขั้นตอนที่ 2 – บีบอัดไฟล์ก่อนดาวน์โหลด

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

9. ใช้การบีบอัดไฟล์ Gzip

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

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

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

วิธีฝังการบีบอัด Gzip

เพิ่มข้อมูลโค้ดต่อไปนี้ลงในไฟล์การกำหนดค่าเว็บเซิร์ฟเวอร์ ".htaccess"

บนเซิร์ฟเวอร์ Apache

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

บนเซิร์ฟเวอร์ Nginx

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

10. เปลี่ยนโฮสติ้ง

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

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

สิ่งที่สำคัญที่สุดคือ...

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

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

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

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

บทสรุป

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