HTML บีบอัดทำงานอย่างไรและทำไมคุณอาจต้องการมัน

HTML บีบอัดทำงานอย่างไรและทำไมคุณอาจต้องการมัน

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





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



การบีบอัดเทียบกับการลดขนาด

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





การลดขนาด

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

ตัวอย่างหน้า HTML:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

ขนาดเดิม: 354. ขนาดย่อเล็กสุด: 272. ประหยัด: 82 (23.16%).

นักพัฒนาเว็บและเจ้าของเว็บไซต์จำนวนมากสงวนการลดขนาดไฟล์สำหรับ JS และ CSS เท่านั้น แต่แนวทางปฏิบัติที่ล้าสมัยนี้เป็นความผิดพลาด การลดขนาด HTML ก็มีความสำคัญเช่นกัน



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

การบีบอัด

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



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

รูปแบบการบีบอัดที่พบบ่อยที่สุดคือ GZIP ซึ่งเป็นรูปแบบไฟล์ที่ใช้ a อัลกอริธึมการบีบอัดแบบไม่สูญเสีย เรียกว่า DEFLATE

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

พิจารณาสตริงข้อความเช่นนี้ (ตัวอย่างที่นำมาจากเว็บไซต์ GZIP):

Blah blah blah blah blah.

อัลกอริทึมรับรู้การทำซ้ำต่อไปนี้:

B{lah b}{lah b}{lah b}{lah b}lah.

เหตุการณ์แรกคือการอ้างอิงของเรา ดังนั้นปล่อยให้เป็น:

Blah b{lah b}{lah b}{lah b}lah.

การเกิดขึ้นครั้งที่สองหมายถึงการเกิดขึ้นครั้งแรก ซึ่งมีอักขระตามหลังห้าตัวและมีความยาวห้าอักขระ:

Blah b[5,5]{lah b}{lah b}lah.

แต่ในกรณีนี้ อัลกอริธึมจะรับรู้ว่าการเกิดขึ้นครั้งต่อไปเป็นลำดับของอักขระเดียวกัน ดังนั้นจึงขยายความยาวอ้างอิงอีกห้า:

Blah b[5,10]{lah b}lah.

และอีกครั้ง:

Blah b[5,15]lah.

และอัลกอริทึมก็ฉลาดพอที่จะรู้ว่าอักขระสามตัวถัดไปคืออักขระสามตัวแรกในการอ้างอิง ดังนั้นจึงขยายได้อีกสามตัว:

Blah b[5,18].

ตอนนี้ให้นึกถึงไฟล์ HTML ทั่วไปและจำนวนการทำซ้ำภายใน เกือบทุกแท็กเช่น

มีแท็กปิดที่สอดคล้องกันเช่น

. นอกจากนี้ ยังมีแท็กหลายแท็กซ้ำตลอด เช่น

,

,

,

  • , ฯลฯ คุณสมบัติยังถูกทำซ้ำบ่อย ๆ รวมทั้ง

    class

    ,

    href

    , และ

    src

    . ง่ายต่อการดูว่าทำไมการบีบอัด GZIP จึงมีประสิทธิภาพด้วย HTML

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

    ทำไมคุณควรบีบอัดและลดขนาด

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

    โหลดหน้าได้เร็วขึ้น

    โดยเฉลี่ย ตัวย่อ HTML สามารถลดขนาดไฟล์ได้ประมาณ 3 เปอร์เซ็นต์ด้วยการตั้งค่าพื้นฐาน ด้วยการตั้งค่าขั้นสูงที่เป็นตัวเลือก ไฟล์ HTML จะลดลงอีก 3 ถึง 7 เปอร์เซ็นต์ ซึ่งอาจลดลงได้ถึง 10 เปอร์เซ็นต์ สิ่งนี้แปลโดยตรงเป็นการโหลดหน้าเว็บที่เร็วขึ้น

    ใช้แบนด์วิดท์น้อยลง

    สมมติว่าคุณมี 10 ไฟล์ โดยแต่ละไฟล์ย่อจาก 50 KB เป็น 45 KB สำหรับการย่อขนาดทั้งหมด 50 KB และสมมติว่าเว็บไซต์ของคุณมีผู้เข้าชมโดยเฉลี่ย 1,000 คนทุกวัน โดยที่การเข้าชมแต่ละครั้งมีค่าเฉลี่ย 10 หน้า การลดขนาด HTML เพียงอย่างเดียวจะลดการใช้แบนด์วิดท์ของคุณลง 50 MB ต่อวัน (1.5 GB ต่อเดือน)

    การบีบอัด + การลดขนาด

    อย่างที่คุณเห็น การลดขนาด HTML มีประโยชน์ในตัวมันเอง โดยเฉพาะอย่างยิ่งเมื่อไซต์ของคุณมีขนาดใหญ่ขึ้น ไฟล์มีขนาดใหญ่ขึ้น และปริมาณการใช้งานเพิ่มขึ้น สังเกตว่า หลักเกณฑ์ PageSpeed ​​ของ Google แนะนำให้ย่อ HTML ดังนั้นหากคุณไม่แน่ใจ ก็ปล่อยให้มันเป็นอย่างอื่น

    ดาวน์โหลดเกมฟรีไม่มีโฆษณา

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

    โดยเฉลี่ย คุณสามารถคาดหวังให้การบีบอัด GZIP ย่อขนาดไฟล์ HTML ลง 70 ถึง 90 เปอร์เซ็นต์ จากตัวอย่างด้านบนโดยใช้ค่าประมาณการบีบอัดแบบระมัดระวัง ไฟล์ HTML ที่ย่อขนาดแล้วจะเปลี่ยนจาก 45 KB เป็น 13.5 KB ต่อไฟล์ โดยรวมการย่อขนาด 365 KB แบนด์วิดท์ไซต์ของคุณลดลง 365 MB ต่อวัน (11 GB ต่อเดือน) เมื่อเทียบกับแบบไม่บีบอัด/ไม่บีบอัด

    และนอกจากการประหยัดแบนด์วิดท์แล้ว แต่ละหน้ายังโหลดได้เร็วกว่ามาก เนื่องจากเบราว์เซอร์ของผู้ใช้ต้องดาวน์โหลดเพียง 13.5 KB เทียบกับ 50 KB ต่อหน้าเท่านั้น

    วิธีบีบอัดและย่อ HTML

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

    ปลั๊กอิน WordPress

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

    ปลั๊กอินแคชส่วนใหญ่ทำมากกว่าแค่หน้าแคช ตัวอย่างเช่น, WP แคชที่เร็วที่สุด และ W3 แคชทั้งหมด ทั้งสองแบบมีการตั้งค่าแบบคลิกเดียวที่ให้คุณเปิดการลดขนาด HTML และการบีบอัด GZIP รวมถึงคุณสมบัติอื่นๆ ที่ช่วยเพิ่มความเร็วในการโหลดหน้าเว็บและลดการใช้แบนด์วิดท์

    ถ้าคุณ เท่านั้น ต้องการลดขนาด เราขอแนะนำ ลดขนาด HTML เสียบเข้าไป. เรียบง่าย รองรับ HTML/CSS/JS และให้คุณปรับแต่งวิธีการย่อเล็กสุดได้เล็กน้อย (เช่น จะลบหรือไม่

    http:

    และ

    https:

    จาก URL)

    ตัวย่อ HTML แบบคงที่

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

    หากต้องการลดขนาด ให้ใช้เครื่องมือเหล่านี้:

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

    เปิดใช้งานการบีบอัด GZIP

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

    เชื่อมต่อกับเว็บเซิร์ฟเวอร์ของคุณโดยใช้ FTP จากนั้นสร้างไฟล์ชื่อ

    .htaccess

    ในไดเรกทอรีราก แก้ไขไฟล์ .htaccess เพื่อให้มีการตั้งค่าต่อไปนี้:


    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.*


    SetOutputFilter DEFLATE

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

    เพื่อประสิทธิภาพสูงสุด คุณควร เรียนรู้เกี่ยวกับวิธีการตรวจสอบ ทำความสะอาด และเพิ่มประสิทธิภาพ CSS . ของคุณ .

    แบ่งปัน แบ่งปัน ทวีต อีเมล คุณควรอัปเกรดเป็น Windows 11 ทันทีหรือไม่

    Windows 11 กำลังจะมาในเร็วๆ นี้ แต่คุณควรอัปเดตโดยเร็วที่สุดหรือรอสองสามสัปดาห์ ลองหา

    อ่านต่อไป     หัวข้อที่เกี่ยวข้อง
    • การเขียนโปรแกรม
    • HTML
    • การพัฒนาเว็บ
    เกี่ยวกับผู้เขียน โจเอล ลี(ตีพิมพ์บทความ 1524)

    Joel Lee เป็นบรรณาธิการของ MakeUseOf ตั้งแต่ปี 2018 เขามีปริญญาตรี ในสาขาวิทยาการคอมพิวเตอร์และประสบการณ์การเขียนและแก้ไขอย่างมืออาชีพกว่าเก้าปี

    เพิ่มเติมจาก Joel Lee

    สมัครรับจดหมายข่าวของเรา

    เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

    คลิกที่นี่เพื่อสมัครสมาชิก