แชร์ประสบการณ์การเพิ่มความเร็วเว็บ 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 รูปนิดหน่อย
How to use responsive images in Ghost themes
Ghost themes support automatic image resizing, allowing you to use a minimal handlebars helper to output different image sizes.
  • รูป 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">
GitHub - eddiesigner/liebling: Beautiful and clean Ghost theme that is easy and comfortable to use. To get the latest version please head over the releases page 👉🏼
Beautiful and clean Ghost theme that is easy and comfortable to use. To get the latest version please head over the releases page 👉🏼 - GitHub - eddiesigner/liebling: Beautiful and clean Ghost theme…
  • เรื่องของ JS - บางส่วนก็ไม่สามารถปรับได้ เช่น stripe หรือ บาง script ที่เป็น default มาจาก ghost core

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

Happy Coding ❤️


รวม links สำหรับ compress และลดขนาด ปรับแต่งรูป ฟรี บางเว็บก็แปลงเป็น WebP, PNG, JPG ได้ตามที่เราต้องการ

Squoosh
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.
Compressor.io - optimize and compress JPEG photos and PNG images
Optimize and compress your jpeg and png images online. Compressor is a lossy and lossless photo compression tool.
TinyPNG – Compress WebP, PNG and JPEG images intelligently
Make your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG images by 50-80% while preserving full transparency!
Intelligent image compression and optimization app | TinyIMG
TinyIMG app is an intelligent image compression and optimization tool. Improve your image SEO for Shopify store or compress PNG and JPG files online!

Tags

Chai Phonbopit

เป็น Web Dev ทำงานมา 10 ปีหน่อยๆ ด้วยภาษา JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจ Web3, Crypto และ Blockchain เขียนบล็อกที่ https://devahoy.com