Render-Blocking Resources คืออะไร?
ปกติแล้วเมื่อมีการเรียกชมเว็บ เบราว์เซอร์จะทำการโหลด โดยอ่านโค้ดจากบนลงล่างไปเรื่อยๆ แต่ในระหว่างที่กำลังโหลดนั้น หากพบไฟล์หรือสคริปต์ CSS กับ JavaScript มันจะหยุดอ่านและทำการวิเคราะห์ว่าไฟล์ว่า ไฟล์นี้จะถูกนำไปใช้ในส่วนใดของเว็บ จากนั้นถึงค่อยทำการโหลดหน้าเว็บต่อไป สคริปต์เหล่านี้จะทำให้เว็บคุณโหลดช้าลง
ยกตัวอย่างเช่น คุณมีโค้ด HTML
<html>
<head>
<title>Test</title>
<script src = "app.js"></script>
</head>
<p> Hello</p>
</html>
มันจะเริ่มอ่านบรรทัดแรกก่อนค่อยๆ ไล่ทีละบรรทัดลงมาตามลำดับ ทีนี้เมื่อมาถึงบรรทัดที่เป็น JavaScript มันก็จะรอให้สคริปต์นี้โหลดให้เสร็จและทำการรันสคริปต์ จากนั้นมันจึงค่อยอ่านบรรทัดต่อไปเรื่อยๆ ซึ่งกว่าจะแสดงผลมันก็ใช้เวลานาน ตรงที่ต้องมานั่งรอโหลดและรันสคริปต์ JavaScript นี่แหละ
แต่สำหรับใครที่พัฒนาเว็บด้วย WordPress หากอยากแก้ปัญหานี้ให้ไปดูที่หัวข้อ
วิธีทำให้เว็บเร็วขึ้น – การแก้ปัญหา Eliminate render-blocking Resources ใน WordPress
แล้ว Render-Blocking Resources ไม่ดีต่อเว็บอย่างไร?
Render-Blocking Resources จะทำให้เว็บของคุณทำงานช้าลง ส่งผลให้โหลดหน้าเว็บช้าลง นอกจากนั้น ยังมีผลกระทบกับ SEO ทำให้ผู้เข้าชมเว็บลดลง อันดับในผลการค้นหาเว็บก็ตกลงอีกด้วย
สำหรับวิธีการแก้ มี 3 วิธี
- วิธีการแก้ Render-Blocking สำหรับ JavaScript
- วิธีการแก้ Render-Blocking สำหรับ CSS
1. วิธีการแก้ Render-Blocking สำหรับ JavaScript
สำหรับ JavaScript มีวิธีการทำเบื้องต้นเลยแนะนำให้เอา สคริปต์ไปวางไว้ในส่วนของ body แทน จากตัวอย่างสคริปต์ด้านบน จะได้
<html>
<head>
<title>Test</title>
</head>
<p> Hello</p>
<script src = "app.js"></script>
</html>
เท่านี้มันก็ไม่หยุดการทำงานแล้ว แต่….อย่าลืมนะคะว่า เว็บ 1 เว็บไม่ได้มีแค่สคริปต์เดียว ซึ่งหากมีหลายๆ สคริปต์ มันก็จะทำงานดังนี้
เริ่มโหลด => รอ => รันสคริปต์ => โหลด => รอ => รันสคริปต์…..
เป็นเช่นนี้ไปเรื่อยๆ จนหมด เว็บก็เลยโหลดช้าไงล่ะ
แต่ในเบราว์เซอร์ก็มีตัวช่วย ในการโหลดสคริปต์นี้ 2 แบบ คือ Async กับ Defer สองตัวนี้ใช้ต่างกันยังไง เรามาดูกัน
- Async เบราว์เซอร์จะโหลด HTML กับสคริปต์มาพร้อมกัน แล้วจะหยุดโหลดเพื่อทำการรันสคริปต์ จากนั้นจึงค่อยโหลดต่อ เช่น
<script async src="app-1.js"></script>- Defer เบราว์เซอร์จะโหลด HTML กับสคริปต์มาพร้อมกัน เมื่อโหลดเสร็จแล้วค่อยรันสคริปต์
<script defer src="app-1.js"></script>
หากสคริปต์มีเยอะ จะเรียกใช้อะไรก่อน?
หากมีการใส่ Async กับ Defer ไว้หลายๆ อัน ลำดับการเรียกใช้เป็นยังไง ยกตัวอย่าง
<script async src="main-app.js"></script>
<script async src="app-1.js"></script>
<script async src="app-2.js"></script>
<script async src="app-3.js"></script>
<script defer src="app-4.js"></script>
<script defer src="app-5.js"></script>
<script defer src="app-6.js"></script>
หากเป็น Async จะไม่สามารถคาดเดาได้เลยว่าจะเรียงลำดับได้เลยว่าจะรันสคริปต์ไหนก่อน เพราะ Async จะรันสคริปต์หลังจากโหลดเสร็จ
แต่ถ้าเป็น Defer เรามั่นใจได้เลยว่าสคริปต์จะรันจาก app-4.js => app-5.js => app6.js ตามลำดับ
แล้วจะใช้อะไรดีระหว่าง Async กับ Defer?
ตรงนี้ไม่มีกฎแน่นอนตายตัว ขึ้นอยู่กับผู้ใช้เลย แต่มีคำแนะนำเล็กๆ น้อยๆ คือ “ให้ใส่ Async ไปก่อน แต่ถ้าไม่เวิร์คให้ใช้ Defer แทน แต่ถ้าหากใช้ทั้ง 2 ตัวแล้วยังไม่เวิร์คก็ไม่ต้องใส่เลย”
2. วิธีการแก้ Render-Blocking สำหรับ CSS
render-blocking CSS เป็นการตั้งค่าให้เว็บแสดงผลตาม Style ที่เรากำหนดไว้ โดยมีรูปแบบการเขียน ดังนี้
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
วิธีการใส่ CSS มี 2 วิธี
- External style sheet เป็นการใส่ Style Sheet ไว้ด้านนอก HTML ซึ่งเป็นไฟล์นามสกุล .css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>- Internal style sheet เป็นการใส่ Style Sheet ไว้ด้านใน HTML โดยจะใส่เป็น tag
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
margin-left: 20px;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
แล้วควรจะใส่ตรงไหนดี?
วิธีการแก้ไขปัญหา Render-Blocking สำหรับ CSS ควรจะใส่โค้ดในส่วนไหนดี ซึ่งหากใส่ในส่วนของ Header อย่างเดียว คงไม่ดีแน่ๆ แถมยังโหลดช้ากว่าเดิมอีก เพราะเบราว์เซอร์จะโหลด style.css ให้สมบูรณ์ก่อน จึงจะแสดงผล
งั้นเอาไปไว้ในส่วนของ Body สิ จะได้ไม่ต้องรอโหลด styles.css อันนี้ก็ไม่ดีเหมือนกัน เพราะเวลาเรียกดูหน้าเว็บมันจะขึ้นหน้าขาวๆ เพราะว่า html นั้นแสดงผลแล้วแต่ยังไม่ได้แสดงในส่วนของ style.css
วิธีแก้ก็คือ นำ <link rel=”stylesheet” href=”styles.css”> ไปวางไว้ในส่วนของ Body แทน
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<link rel="stylesheet" href="styles.css">
</body>
</html>
เมื่อนำไปทดสอบใน Google PageSpeed Insight ปัญหานี้จะหมดไป ดังภาพ
