3 เทคนิคเพิ่มความเร็วเว็บ HTML
56 | | . | HTML and CSS, ความรู้ HTML
บทความเรื่อง เพิ่มความเร็วเว็บ HTML นี้ จะมาพูดถึงกระบวนการทำงานของ HTML ว่ามีขั้นตอนอย่างไร สามารถเพิ่มความเร็วเว็บได้ด้วยวิธีใด ซึ่งเราสามารถนำเทคนิคนี้ไปช่วยปรับปรุงแก้ไขเว็บ HTML ของตนเองได้ และยังสามารถนำไปเพิ่มความเร็ว WordPress ได้ด้วยนะครับ
โครงสร้าง HTML
ก่อนที่เราจะมาพูดถึงวิธีการปรับความเร็วเว็บกัน เราจะมารู้จักโครงสร้าง HTML ที่จำเป็นของการเพิ่มความเร็วเว็บกันก่อนนะครับ จากโค้ดหน้า index.html ด้านล่าง เวลาเราเขียน HTML เราจะมีในส่วนของการประกาศ HTML มีส่วนหัว (Head) ส่วนเนื้อหา (Body) และส่วนท้าย (Footer) ของเว็บ หลังจากนั้นเราจำเป็นที่จะต้องมีการออกแบบหน้าตาเว็บ (StyleSheet) และเพิ่มลูกเล่น (JavaScript) เช่น สไลเดอร์ (Slider) ให้กับเว็บไซต์ของเราตามลำดับ
<!doctype html>
<html>
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://localhost/html/css/bootstrap.css">
<link rel="stylesheet" href="http://localhost/html/css/owl.carousel.min.css">
<link rel="stylesheet" href="http://localhost/html/css/owl.theme.default.min.css">
<link rel="stylesheet" href="http://localhost/html/style.css" type="text/css" media="all">
<style>
.bg-0 {
color: #000;
}
</style>
<title>This is test</title>
</head>
<body>
<section id="section-one" class="container mt-1 position-relative">
<h1 class="bg-0">
<p>Content of the document....</p>
</h1>
<h1 class="bg-0"><!-- Set up your HTML -->
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
</h1>
</section>
</h2>
<footer class="footer-line mystle">
This is footer.
</footer>
<script src="https://localhost/html/js/jquery.js"></script>
<script src="https://localhost/html/js/bootstrap.js"></script>
<script src="jquery.min.js"></script>
<script src="https://localhost/html/js/owl.carousel.js"></script>
<script type="text/javascript" src="https://localhost/html/script.js"></script>
</body>
</html>เราจะเห็นว่าตำแหน่งการเรียกใช้งานทั้ง Stylesheet (CSS) และ JavaScript (JS) ในโค้ดจะวางในตำแหน่งที่แตกต่างกันไป คือ การเรียกใช้ Style (ดูแท็ก <link> และ <style>) จะถูกทำการเรียกที่ส่วนของหัว (Head) แต่การเรียกใช้ของ Script (ดูแท็ก <script>) นั้นจะถูกวางไว้ที่ตำแหน่งท้ายสุดหลังส่วนท้าย (Footer)
การวางตำแหน่งโค้ดลักษณะนี้จะทำให้เว็บของเรามีความเร็วมากกว่าการนำในส่วนของ Script ไปวางไว้ที่ส่วนหัว (Header) เพราะเวลาระบบทำการรันโค้ดจะทำการอ่านตั้งแต่บรรทัดแรกไล่ลงมาโดยจะทำการแสดงผลทีละส่วน เช่น แสดงผลในส่วนของโครงสร้างเว็บก่อน แล้วมาออกแบบเว็บ (Style) เช่นใส่สี ใส่ขนาดฟอนต์ หลังจากนั้นจึงจะไปทำงานในส่วนของลูกเล่นต่างๆ
ถ้าเรานำในส่วนของแท็ก <script> ไปวางไว้ด้านบนร่วมกันกันแท็ก <style> ระบบจะทำการประมวลผลในส่วนของ Script ก่อน ซึ่งไม่มีความจำเป็นที่จะต้องทำการเรียกใช้ตั้งแต่แรก เพราะมันเป็นลูกเล่นของเว็บที่สามารถประมวลผลหลังสุดได้และจะทำให้การแสดงผลโครงสร้างของเว็บในส่วนของ HTML ทำงานช้าลง เพราะต้องรอให้ทำการประมวลผลในส่วนของ Script ให้เสร็จสิ้นก่อนครับ
นอกจากเทคนิคเบื้องต้นแล้ว คราวนี้มาทำความรู้จักกับเทคนิคเพิ่มเติมในแต่ละแท็กที่จำเป็นต้องรู้กันบ้างนะครับ
เพิ่มความเร็วเว็บด้วย Inline Style
เมื่อโค้ดที่ความซับซ้อนมากขึ้น การเขียนเว็บในหน้า HTML จะทำการแยกไฟล์เป็นประเภทของไฟล์ที่แตกต่างกัน เช่น HTML, CSS, JS ก็จะเซฟไฟล์ที่นามสกุลแตกต่างกันเพื่อให้เราสามารถอ่านไฟล์ได้ง่ายขึ้น แล้วทำการใช้แท็ก <link> เพื่อดึงข้อมูลในหน้านั้นออกมา เช่น
<link rel="stylesheet" href="http://localhost/html/style.css" type="text/css" media="all">
จะเห็นได้ว่าจากโค้ดด้านบน HTML จะทำการเรียกไฟล์ที่ชื่อ style.css ที่อยู่นอกเหนือจากหน้า index.html นี้ มาใช้งาน ซึ่งทำให้เสียเวลาในการไปเรียกไฟล์ดังกล่าว หากเราเขียนด้วยการใช้ Inline Style คือ ทำการใส่แท็ก <style> ลงไปหน้านั้นเลย ก็จะทำให้เว็บเร็วขึ้นกว่าการไปเรียกไฟล์ที่อยู่ภายนอก HTML เช่น
<style>.bg-0 { color: #000; } </style>ทั้งนี้การใช้เทคนิคนี้จะต้องดูความเหมาะสมของการใช้งานด้วย ว่าโค้ดจะอ่านแล้วยุ่งยากหรือไม่ด้วยนะครับ
เพิ่มความเร็วเว็บด้วย Defer & Async
แท็กถัดมาเป็นเรื่องของแท็ก <Script> ที่ก่อนหน้านี้เราแนะนำว่าให้อยู่ส่วนท้ายของหน้า HTML แต่ในบางครั้งผู้พัฒนาเว็บพยายามที่จะใส่แท็ก <script> เข้าไปในส่วนต้นของหน้าเว็บของเรา ยกตัวอย่างเช่น โค้ดของ Google Analytics, Facebook Pixel โค้ดเหล่านี้อาจทำให้หน้าเว็บของเราช้าได้ เราจึงต้องเพิ่ม attribute พิเศษเข้าไป ได้แก่
Defer
Defer คือ การแจ้งให้ Script ของเว็บไซต์ทำงานดีเลย์ และให้ HTML ทำงานก่อนจนกระทั่ง HTML ดำเนินการเสร็จสิ้นค่อยมาทำในส่วนของ Script อีกครั้ง ตัวอย่างเช่น ทำการรันในส่วนของ jquery.js ก่อน ถึงจะสามารถทำงานในส่วน Slider ได้มักจะใช้การทำงานในลักษณะ Defer เพราะสคริปต์ที่ใช้งานนั้นมีความต่อเนื่องกัน
Async
Async คือ การทำงานพร้อมกัน ทั้งในส่วนของ Script และ HTML ยกตัวอย่างเช่น โค้ด Google Analytics ที่สามารถทำงานได้ตลอดเวลา เพราะมันเป็นโค้ดที่เป็น Stand Alone สามารถทำงานได้โดยไม่สนใจโค้ดตัวอื่น
เพิ่มความเร็วด้วย Preload, Prefetch, Prerender, Preconnect และ DNS Prefetch
การเพิ่มความเร็วที่แท็ก <link> นั้น จะใช้วิธีการใส่คำสั่งลงบน rel attribute เพื่อบอกให้ทราบว่า ไฟล์ที่เราต้องการใช้งานมีความสัมพันธ์แบบใด จะให้ดึงหรือเก็บข้อมูลแบบใดก่อนจะเรียกใช้งานจริง โดยมี 5 คำสั่งที่เราสามารถใช้งานได้ ได้แก่ Preload, Prefetch, Prerender, Preconnect และ DNS Prefetch
Preload
Preload คือ การแจ้งให้เบราว์เซอร์ทำการดาวน์โหลดและเก็บแคชสำหรับไฟล์ของเราไว้ก่อนแล้วเรียกใช้งานเมื่อต้องการ สามารถเรียกใช้งานได้ทั้งในส่วนของ Style, Script, Font หรือการดึงข้อมูลแบบ Fetch
ตัวอย่างการเรียกใช้งาน
<link rel="preload" href="/style.css" as="style" />
ตัวอย่างการเรียก Preload ของ Font ที่อยู่ใน Stylesheet
<!-- index.html -->
<link rel="preload" href="fa-solid-900.woff2" as="font" />
/* index.css */
@font-face {
src: url('fa-solid-900.woff2') format('woff2');
}จากโค้ดด้านบน ถ้าเราไม่มีแท็ก <link> ที่มี Preload อยู่ การเรียกใช้งานฟอนต์ ‘fa-solid-900.woff’ นั้นจะถูกเรียกเมื่อถึงไฟล์ไฟล์ index.css แต่ถ้าเรามีในส่วนของ Preload ฟอนต์นี้จะถูกเรียกเก็บไว้ก่อน ซึ่งเมื่อถึงไฟล์ index.css ก็สามารถเรียกใช้งานได้ในทันที
Prefetch
Prefetch คือ การแจ้งให้เบราว์เซอร์ทำการโหลดเก็บแคชไว้ก่อน ที่จะทำการเรียกใช้ไฟล์นั้นในหน้าถัดไป เป็นลักษณะของการทำงานเบื้องหลัง Prefetch สามารถเรียกใช้งานได้ทั้งในส่วนของ Style, Script, Font และ Fetch เช่นเดียวกัน
ตัวอย่างที่จะเห็นได้ชัด เช่น ในกรณีที่เรามีเว็บแบบ Ecommerce และมีผู้ใช้งานถึง 50% ที่จะเข้าหน้าแรกของเว็บไซต์แล้วไปยังหน้าสินค้า เราสามารถที่จะทำการดึงในส่วนของ CSS ของหน้าสินค้ามาเก็บไว้ก่อนได้ ซึ่งเมื่อผู้ใช้งานเปิดไปยังหน้าสินค้าจริงก็จะทำให้เว็บมีความเร็วที่เพิ่มขึ้น เนื่องจากเบราว์เซอร์จะให้ความสำคัญกับ Prefetch น้อยในหน้าแรก ทำให้ไม่มีผลกระทบกับความเร็วในการโหลดหน้าแรกครับ
ตัวอย่างการเรียกใช้งาน
<link rel="prefetch" href="/style.css" as="style" />
Preconnect
Preconnect คือการที่ให้เบราว์เซอร์ทำการเชื่อมต่อกับโดเมนล่วงหน้า การใช้งานในส่วนของคำสั่งนี้จะช่วยให้เราสามารถลดเวลาการเชื่อมต่อเริ่มต้นได้ โดยส่วนใหญ่แล้วจะใช้กับเว็บ Third Party เช่น การโหลดฟอนต์จากเว็บ Google Fonts การเรียกใช้งาน JSON จากเซิฟเวอร์ API เป็นต้น
ตัวอย่างการเรียกใช้งาน
<link rel="preconnect" href="https://themevilles.com" />
DNS Prefetch
DNS-Prefetch คือการให้เบราว์เซอร์ทำการเชื่อมต่อกับ Domain Name Server ล่วงหน้า ส่วนใหญ่ใช้กับเว็บ Third Party เช่นเดียวกัน จะใช้เมื่อเรารู้ว่า เราจำเป็นที่จะต้องใช้งานเว็บนั้นในไม่ช้า
ตัวอย่างการเรียกใช้งาน
<link rel="dns-prefetch" href="https://themevilles.com" />
ความแตกต่างระหว่าง Preconnect และ DNS-Prefetch คือ DNS-Prefetch จะทำหน้าที่ในการเชื่อมต่อเฉพาะ DNS resolution แต่ Preconnect จะทำหน้าที่ทั้งในส่วนของ DNS resolution + TCP handshake + TLS handshake
DNS resolution ทำหน้าที่ในการหา IP Address ของเซิฟเวอร์สำหรับโดเมนที่ถูกระบุ เช่น 216.58.215.78
TCP handshake ทำหน้าที่ในการสร้างการเชื่อมต่อ TCP connection ไปยังเซิฟเวอร์ และดำเนินการส่งข้อความจาก Client > Server > Client เพียง 1 รอบเท่านั้น
TLS handshake ทำหน้าที่คล้ายกับ TCP handshake แต่ทำ Round Trip จำนวน 2 รอบได้แก่ Client > Server > Client > Server > Client ใช้เฉพาะในส่วนของการเชื่อมต่อ TLS connection ที่มีความปลอดภัยสูง
หมายเหตุ ปัจจุบันมีการแก้ไขปัญหานี้ด้วยวิธีการใช้โปรโตคอล HSTS (HTTP Strict Transport Security) ซึ่งจะทำให้เกิดการเรียกแบบ Round Trip เพียงรอบเดียว ทั้งนี้ขึ้นอยู่กับโฮสติ้งที่ใช้งานว่ามีบริการนี้หรือไม่
Prerender
Prerender คือ เทคนิคการโหลดหน้าเว็บทั้งหมดเก็บไว้ในแท็บที่มองไม่เห็น และเมื่อผุ้ใช้งานทำการคลิ๊กลิงก์เปิดไปหน้านั้นก็จะแสดงผลในทันที การใช้ Prerender นั้นจะต้องมั่นใจว่าผู้ใช้งานนั้นจะเปิดหน้านั้นแน่ๆ และเราต้องการให้แสดงผลเร็วขึ้นด้วย แต่ในปี 2019 นั้น การใช้คำสั่ง Prerender ยังไม่ได้การสนับสนุนการทำงานถึงแม้ว่าจะเป็นเบราว์เซอร์หลักก็ตาม
ตัวอย่างการเรียกใช้งาน
<link rel="prerender" href="https://themevilles.com/about.html" />
เป็นอย่างไรกันบ้างครับกับเทคนิคเพิ่มความเร็ว HTML นี้ หวังว่าจะมีประโยชน์ไม่มากก็น้อยนะครับ
หมายเหตุ อ้างอิงเอกสาร Preload, prefetch and other <link> tags
