วิธีบีบอัด HTML และโค้ดเว็บไซต์อื่นๆ

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

>> การเพิ่มประสิทธิภาพความเร็วหน้าเว็บ: วิธีปรับปรุงเวลาในการโหลดของคุณ <<

ทำไมต้องบีบอัดรหัสเว็บไซต์

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

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

ตัวอย่างเช่น สำหรับ Amazon ยักษ์ใหญ่ด้านอีคอมเมิร์ซ เวลาในการโหลดที่ล่าช้า 100 มิลลิวินาทีจะทำให้ยอดขายลดลงประมาณ 1% คาดการณ์ตลอดทั้งปีงบประมาณ ซึ่งจะส่งผลให้มีค่าใช้จ่ายประมาณ 245 ล้านดอลลาร์ ตัวเลขเหล่านี้แสดงผลกระทบอย่างมากต่อความเร็วในการโหลดของเว็บไซต์

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

สามารถปรับปรุงเวลาในการโหลดได้อย่างมาก ตัวอย่างเช่น โดยใช้เทคโนโลยีการบีบอัด Gzip หรือ Deflate ช่วยประหยัดเงินและแบนด์วิธ

เป็นไปได้ไหมที่จะบีบอัด HTML, CSS และ JavaScript?

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

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

การบีบอัดรหัสเว็บไซต์ทำงานอย่างไร

หากต้องการถ่ายโอนข้อมูลที่บีบอัด เบราว์เซอร์ของลูกค้าต้องร้องขอการส่งข้อมูลที่ถูกบีบอัดก่อน ดำเนินการผ่านคำขอ HTTP ที่มีข้อกำหนด "ยอมรับการเข้ารหัส: gzip, deflate" สามารถระบุวิธีการบีบอัดเพียงวิธีเดียวหรือหลายวิธีก็ได้ และตัวอย่างยอมรับทั้ง gzip และ deflate ข้อมูลที่บีบอัด

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

ประมาณ 90% ของเบราว์เซอร์ทั้งหมดรองรับการบีบอัด มักจะไม่มีอิทธิพลต่อการตั้งค่า “ยอมรับการเข้ารหัส” หรือวิธีการบีบอัดที่อนุญาตของเบราว์เซอร์ เบราว์เซอร์รองรับการบีบอัดข้อมูลหรือไม่รองรับ

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

การบีบอัดรหัสเว็บไซต์เปิดใช้งานอย่างไร

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

รูปที่ 1: ไดอะแกรมของการบีบอัด Gzip

การเปิดใช้งานการบีบอัดโค้ดโดยใช้ .htaccess

บนเว็บเซิร์ฟเวอร์ที่สอดคล้องกับ NCSA (เช่น Apache ซึ่งเป็นเว็บเซิร์ฟเวอร์ที่ใช้กันอย่างแพร่หลาย) การบีบอัด Gzip สามารถติดตั้งได้โดยใช้ไฟล์การกำหนดค่า .htaccess ในการดำเนินการนี้ ต้องใส่รหัสต่อไปนี้ลงในไฟล์ .htaccess:

<IfModule mod_deflate.c>
<FilesMatch "\\.(js|css|html|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

ขั้นแรก ใช้ “<IfModule mod_deflate.c>” เพื่อทำการทดสอบเพื่อดูว่ามีการติดตั้งโมดูลส่วนขยาย mod_deflate หรือไม่ ถ้าใช่ การใช้ “<FilesMatch”\\.(js|css|html|xml)$”>” จะกำหนดประเภทไฟล์ที่ควรใช้ตัวกรอง

ตัวอย่างตัวกรองสำหรับไฟล์ JavaScript, CSS, HTML และ XML ด้วย “SetOutputFilter DEFLATE” จะเป็นการพิจารณาว่าไฟล์ทั้งหมดที่ตรงกับรูปแบบที่ระบุก่อนหน้านี้จะถูกส่งออกไปพร้อมกับตัวกรอง DEFLATE ต่อจากนั้น การจับคู่และแบบสอบถามของโมดูลจะถูกปิดอีกครั้ง

ในทางทฤษฎี ตัวกรองนี้สามารถนำไปใช้กับข้อมูลประเภทอื่นๆ ได้ (เช่น ไฟล์รูปภาพ .jpg, .gif หรือ .png) การจับคู่ไฟล์จะต้องได้รับการดัดแปลงดังนี้:

“<FilesMatch”\\.(js|css|html|xml|png|jpg|gif)$”>”

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

การเปิดใช้งานการบีบอัดโค้ดโดยใช้ PHP

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

<?php ob_start("ob_gzhandler"); ?>

หากเป็นไปได้ ควรวางฟังก์ชันนี้ไว้หน้าโค้ด HTML แรก

ตัวอย่าง:

<?php ob_start ( "ob_gzhandler" ); ?>
<html>
<body>
<p>ควรเป็นหน้าที่บีบอัด</p>
</body>
</html>

5 ข้อผิดพลาดของการบีบอัดรหัสเว็บไซต์

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

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

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

3. การบีบอัดควรใช้กับไฟล์ที่มีขนาดเหมาะสมเท่านั้น สำหรับไฟล์ที่มีขนาดเพียงไม่กี่ไบต์ การบีบอัดอาจทำให้ไฟล์มีขนาดใหญ่กว่าไฟล์ต้นฉบับ

4. ระหว่างขั้นตอนการกดทับ ระวังอย่ากดมากเกินไป บ่อยครั้ง มีความแตกต่างเพียงเล็กน้อยในขนาดไฟล์ระหว่างไฟล์ที่อ่อนแอ ไฟล์ปกติ และไฟล์ที่ถูกบีบอัดอย่างหนัก อย่างไรก็ตาม การบีบอัดข้อมูลในระดับปานกลางหรือมากนั้นต้องการพลังประมวลผลที่มากกว่าอย่างเห็นได้ชัด

5. เนื่องจากกระบวนการบีบอัดจะแทนที่สตริงที่เหมือนกันหรือซ้ำกัน การใช้ตัวแปรและชื่อคลาส (เช่น ในไฟล์ CSS และ HTML) ส่งผลให้การบีบอัดทำได้สำเร็จมากกว่าการตั้งชื่อตัวแปรและคลาสทั้งหมด ดังนั้นจึงมีศักยภาพน้อยที่จะ ให้การบีบอัด

มาตรการเพิ่มประสิทธิภาพเพิ่มเติมสำหรับรหัสที่บางเฉียบ

การลดขนาด HTML และกลยุทธ์อื่นๆ

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

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

แม้ว่าไฟล์ต้นฉบับของเฟรมเวิร์กในเวอร์ชัน 2.1.4 จะมีขนาดประมาณ 242kb (jQuery 2.1.4.js (ไม่บีบอัด)) แต่ขนาดไฟล์ที่ลดลงหลังจากลบอักขระและความคิดเห็นที่ไม่จำเป็นออกจะมีเพียง 82kb (jQuery 2.1.4.1) min.js (บีบอัด)) การลดขนาดไฟล์เท่านั้น - กล่าวคือโดยการลดอักขระที่ไม่จำเป็น - ขนาดไฟล์จะลดลงประมาณ 66% ผลลัพธ์ที่น่าทึ่ง

ซอร์สโค้ดก่อนและหลังกระบวนการย่อขนาด

การลดขนาดใช้ได้กับไฟล์ HTML, CSS และ JavaScript

ยิ่งไปกว่านั้น ไฟล์ jQuery ที่ถูกลดขนาดยังสามารถลดลงได้อีก 65% โดยใช้การบีบอัด Gzip จากเดิมที่ 242kb เหลือเพียง 29.5kb เท่านั้น

เครื่องมือสำหรับลดโค้ด CSS และ JavaScript

เพื่อลดโค้ด CSS คุณสามารถใช้ ตัวอย่างเช่น YUI Compressor หรือ cssmin.js นอกจากนี้ยังมีเครื่องมือหลายอย่างที่สามารถใช้ลดโค้ด JavaScript ได้ Google PageSpeed ​​Insights ขอแนะนำ Closure Compiler, JSMin หรือ YUI Compressor

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

การรวมไฟล์ CSS และ JavaScript

มักเป็นกรณีที่ไฟล์ CSS และ JavaScript หลายไฟล์ถูกโหลดในส่วนหัว HTML ของเว็บไซต์ ทุกครั้งที่เรียกสิ่งเหล่านี้ นี่คือคำขอ HTTP ที่เบราว์เซอร์ต้องประมวลผล เบราว์เซอร์สมัยใหม่สามารถรองรับคำขอ HTTP ได้ 2-8 รายการจากโดเมนเดียวกันในเวลาเดียวกัน – คำขออื่นๆ ทั้งหมดจะต้องรอ

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

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

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

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

สรุปการบีบอัดรหัสเว็บไซต์

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

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

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

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

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