แชร์ประสบการณ์การเพิ่มความเร็วเว็บ Ghost ให้โหลดเร็วขึ้น

Ghost Apr 3, 2023

สวัสดีครับ เนื่องจากบล็อกแห่งนี้ได้เปลี่ยนมาใช้ Ghost Blogging ในการเขียนบทความ และก็ใช้ Ghost Pro ทำให้ อาจจะไม่สามารถ custom อะไรมากมายในฝั่ง Server ได้ วันนี้ก็เลยพยายามเพิ่ม speed ให้ได้มากที่สุด ในฝั่ง Client + Theme ให้เว็บมันโหลดเร็วขึ้น เลยนำมาเขียนเป็นบทความเทคนิคเล็กๆน้อยๆ

PageSpeed Insights

หลักๆ ที่ปรับแต่งคือ:

ปรับขนาด Image - ถ้ารูปที่เราอัพเอง ก็ใช้พวกบริการ ลดขนาดรูปก่อน เช่น tinypng, tinyimg, compressor, squoosh ถ้าดีสุดก็คือใช้รูปเป็น WebP
Responsive Image - ส่วนนี้ขึ้นอยู่กับ Theme ที่ใช้ว่ารองรับหรือไม่ ซึ่งผมใช้ Liebling รองรับ ก็เลยไม่ต้องทำอะไรมาก มีแค่ปรับขนาด size รูปนิดหน่อย

รูป Unsplash - ต้องบอกว่า ส่วนนี้เป็นปัญหาใหญ่เลย เพราะบางบทความ ผมจะใช้รูปจาก Unsplash เป็น cover image และรูปจาก Unsplash บางทีไม่มี auto crop หรือไม่ responsive ก็จะได้ภาพใหญ่ๆ เต็มๆมาเลย บางรูปขนาด 1-2 MB (เทียบกับปกติ 50-200kB) ถ้ารูปไหนใหญ่มากๆ ผมเลือกใช้วิธี Download รูปนั้นมา ลดขนาด และ compress อัพโหลดเอง แทน
ปรับแต่ง Theme - จริงๆ ตัว Theme เขียนไว้ค่อนข้างดีแล้ว แทบไม่ต้องปรับอะไรมากมาย ทั้ง responsive image, minify css/js, ใช้ cdn มี preload ส่วนนี้ ผมแค่เพิ่ม preload สำหรับ custom fonts ของผม และก็ preconnect ของ cdn cloudflare ที่ไว้โหลด prismjs เท่านั้น

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;500;600&display=swap" rel="stylesheet">

เรื่องของ JS - บางส่วนก็ไม่สามารถปรับได้ เช่น stripe หรือ บาง script ที่เป็น default มาจาก ghost core

สุดท้าย ค่า Speed ที่เทสได้ อยู่ในระดับที่รับได้ ตัวเลขออกมาดีเลย แต่เอาเข้าจริง เวลาเข้าเว็บ ก็ไม่ได้เห็นความแตกต่างมากมายขนาดนั้น เนื่องจากใช้เครื่อง Laptop และก็ Internet Fiber 🤣 ถ้ามือถือและเนตช้าๆ อาจจะเห็นผลอยู่บ้าง ไม่มากก็น้อย