Technology

arnondora.in.th 5.0 ยกเครื่องใหม่ หนีไปซบ Ghost

By Arnon Puitrakul - 23 June 2020 - 3 min read min(s)

arnondora.in.th 5.0 ยกเครื่องใหม่ หนีไปซบ Ghost

หลาย ๆ คนที่ติดตามเรามานาน เข้าเว็บมาเมื่ออาทิตย์ก่อนก็อาจจะงงว่า เอ๊ะ นี่เว็บเดียวกันมั้ยฮ่า ๆ ด้วยหน้าตาที่เปลี่ยนไปแบบ วิบวับ ต่างกันมากเลยก็ทำให้ งง ได้

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

เว็บเก่าเจอปัญหาอะไรบ้าง

arnondora5

เว็บตัวก่อนหน้านี้ เรื่องของ Interface ณ ตอนที่เราทำเราก็ว่ามันสวยดีนะ แต่พอไปคุยกับเพื่อน ๆ พี่ ๆ ก็พบปัญหาหลายอย่างของการออกแบบเว็บที่อยู่มานาน แต่เราไม่ได้สังเกตุเลย ตัวอย่างเช่น เราเจอ Stat ว่าผู้อ่านไม่ค่อยมี Comment อะไรกับเราเลย ไม่สิ จริง ๆ แล้วก็คือ เขาเลื่อนไม่ถึงด้านล่างเลย อ่าน Content จบแล้วก็จากไปอะไรแบบนั้น ทำให้มี Exit Rate จากหน้า Content ที่สูง และ จาก Google Analytics ทำให้รู้อีกว่า คนที่เข้ามาส่วนใหญ่เข้ามาจาก Search Engine พออ่านจบแล้วก็ออกไปเลย

เลยถามต่อว่า เอ๊ะ ทำไมถึงเป็นแบบนั้นได้ละ จนมาได้คำตอบจากพี่คนนึงที่ไปคุยด้วยว่า พอเลื่อน ๆ ไปจนสุด Content ก็นึกว่าหมดหน้าแล้ว เลยทำให้ไม่ได้เลื่อนไปถึงตรง Recommendation ด้านล่าง นั่นเอง พอเข้าไปดูลึก ๆ อีก มันเป็นที่ Design มากกว่า ว่า มันทำให้ดูเหมือนกับหน้ามันหมดแล้ว เลยไม่ได้เลื่อนต่อ

อีกหน้าที่มี Exit Rate สูงมาก ๆ ก็คือ หน้าแรก นั่นเอง หน้าแรก เราจะวาง Content ตามเวลาในการลง ซึ่งจริง ๆ แล้วกลุ่มคนที่เข้ามาหน้าเว็บเราทุก ๆ วันมันไม่ได้เยอะเลย แต่คนมักจะเข้ามาด้วย Topic ที่คิดไว้แล้ว อย่างการ Search ผ่าน Search Engine เข้ามา หรือ จาก Facebook Page เอง นั่นทำให้การแสดง Post ตามเวลาการลง อาจจะไม่ตอบโจทย์ทั้งหมด เปิดเข้ามา ก็จะ งง ๆ ว่า แล้วจะอ่านอะไรได้ ไม่เจอก็เลยออกไป นั่นคือสิ่งที่คาดการณ์จากข้อมูล

และปัญหาในฝั่งของหลังบ้านเองก็มีเหมือนกัน เพราะเราไม่มีหลังบ้าน เอ๊ะ ฮ่า ๆ งง ใช่ม่ะ ก่อนหน้านี้เราใช้ Gatsby ซึ่งเป็น JAM Stack และ Host อยู่บน Firebase ในตอนแรก และสุดท้ายหนีไป Netlify เพราะเขาให้ Bandwidth ต่อเดือนที่เยอะกว่ามาก

ข้อดีของเว็บพวกนี้คือ เร็วมาก เพราะมันไม่มีการ Process อะไรเลย Server ทำหน้าที่แค่ Serve File ตรง ๆ เท่านั้น และทำให้การทำ Caching บน Cloudflare ทำได้ดีขึ้นด้วย

arnondora5
ดึงมาจากบทความรีวิว iMac 27-inches 2019 ว่าเรา Build Blog ณ ช่วงเวลานั้น แต่ถึงตอนจะเปลี่ยนเว็บก็ไม่ได้เปลี่ยนอะไรมาก มีแต่เพิ่มขึ้น เวลาอะ เพิ่มขึ้น

แต่เพราะมันไม่มีหลังบ้านนี่แหละ ทำให้การจัดการ Content เป็นเรื่องลำบากมาก เราจะต้องเขียนบน Markdown และ Build เว็บทุกครั้งที่จะมีการ เพิ่ม หรือ แก้ไขบทความ ซึ่งการ Build แต่ละทีมันกินเวลามาก เพราะเว็บเราใหญ่กว่าเมื่อก่อนเยอะมาก ที่นานที่สุด เห็นจะเป็นการ Optimise พวก Image ต่าง ๆ อีกที่ Gatsby มันทำให้เรา สุดท้ายแล้ว ณ ก่อนที่เราจะย้ายมาเว็บใหม่นี้ เราใช้เวลา Build บน iMac ที่รัน Core i9 ใช้เวลาเกือบ 45 นาทีด้วยกัน

45 นาทีนี้คือ จริง ๆ มันก็ครั้งเดียวแหละที่มันทำการ Optimise พวกไฟล์รูปทั้งหมด แต่ถ้ารอบหน้ามันก็ใช้เวลาไม่เกิน 5 นาทีเท่านั้น แต่ก็นะ อยู่ ๆ มันอยาก Optimise ใหม่มันก็ทำ ยังไม่นักปัญหาเมื่อเราทำงานกับเครื่องอื่นอีกนะ เพราะเว็บที่มัน Build อะ มันทำบนเครื่องนั้น ๆ เลย ถ้าเราเปลี่ยนเครื่อง อย่างเช่น เราทำบน iMac และ ย้ายมาที่ Macbook Pro มันก็เหมือต้อง Build ใหม่ เพราะไฟล์มันอยู่คนละเครื่องอีก

arnondora5

นอกจากนั้น การ Sync Content ระหว่างเครื่อง มันก็ทำได้ยากมาก ๆ ตอนนั้นเราใช้ Google Drive นี่แหละ ก็คือ เอาพวก Content ทั้งหมดยัดลง Google Drive ไปเลย พอเราแก้ที่เครื่องนึงมันก็จะ Sync ขึ้นไป และพอเปิดอีกเครื่องมันก็จะ Download ลงไปทับเลยให้ Concept ดูง่ายเนอะ แต่จริง ๆ แล้วมันใช้เวลาอยู่พอสมควร ยังไม่นับว่า ถ้าอนาคต เรามี Editor หลาย ๆ คนก็จะยุ่งยากเข้าไปใหญ่เลย

ถามว่า ตอนนั้นที่เลือก Stack ของเว็บนี้ ไม่ได้คิดถึงเรื่องนี้เหรอ เอาจริง ๆ ก็คิดถึงแหละ แต่ไม่คิดว่าเว็บมันจะมี Content เพิ่มขึ้นเยอะได้เร็วขนาดนี้ ประกอบกับ ถ้าเราไปใช้ Solution อื่นอย่าง Wordpress (ซึ่งเว็บตัวก่อนหน้านี้โน้นเลยก็ใช้) เราก็ไม่อยากไป Host เสียเงิน ประกอบกับ เว็บตัวเก่าก่อนหน้านี้พอใช้ไปนาน ๆ แล้วรู้สึกว่ามันช้าลงเรื่อย ๆ ง่าย ๆ มันกินสเปกของ Database หนักอยู่เหมือนกัน ส่วนตอนนั้นก็มี Ghost ออกมาแล้ว

แต่ Ghost มันรันผ่าน Node.js ทำให้ถ้าเราจะใช้เราจะต้องใช้ Shared Hosting ที่เป็น Node.js ซึ่งในไทยไม่มี หรือถ้าเราต้องไปเช่า Cloud ราคาก็ไม่เป็นมิตรต่อเว็บเราที่ตั้งแต่วันนั้นจนวันนี้ก็ยังไม่มีลูกค้าเข้า แน่นอนว่า ถ้าลูกค้าจะเข้าก็ยินดีนะครับ

สุดท้ายเลยจบที่การใช้ Gatsby และทน Build อย่างยาวนานกันไป จนตอนนี้มันก็นานเกิ้นนนน กับเรามี NAS ที่รันเป็น Server ได้ เปิดตลอดอยู่แล้วถ้าเราจะเอามาทำเป็นเว็บก็ดีเลยสิ จะ Host อะไรก็ Host ได้เลย

Self-Hosted Server

arnondora5

จุดเริ่มต้นของ Project นี้คือนั่งคุยกับเพื่อนว่า เออ อยากเปลี่ยนเว็บใหม่ เริ่มรำคาญกับการที่เราต้องมา Build เว็บทุกครั้งที่แก้แล้ว มันเสียเวลามาก อยากเปลี่ยนเว็บมาก อาจจะไปใช้พวก CMS อะไรแบบนั้น กับตอนนั้นเรามี NAS ที่เปิดเครื่องทิ้งไว้ตลอดเวลาด้วย ถ้าเอามาเปิดเป็น Web Server ได้จะดีมาก

แต่ปัญหาของเน็ตบ้านคือ เราไม่มี IP Address เพื่อจะผูกกับ Domain Name ของเราเอง หลักการมันคือ เราต้องมี Public IP Address เพราะปกติแล้ว ISP จะให้มาเป็น Private IP ดังนั้นถ้าจะทำ เราต้องมี Public IP Address มา อาจจะ งง ไปอ่านเรื่องของ DNS ในเว็บเราได้

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

แน่นอนว่า เมาท์ถูกที่มาก จนเพื่อนเราบอกว่า เออ เอา IP Address ไปมั้ย เซ็ตจาก Router  Mikrotik ได้เลย ตอนนั้นก็เออ น่าสนใจแฮะ เลยมานั่ง Settings  กัน แน่นอนว่า ตอนนั้นเราก็ไม่รู้เลยว่า มัน Remote เข้ามาเซ็ตอะไรบ้าง ฮ่า ๆ เข้าใจว่าเป็น EoIP ที่เป็น Protocol เฉพาะของ Mikrotik อีก ฮ่า ๆ

เข้าสู่ช่วงขายของตรง ๆ ช่วยเพื่อนขายของ IP Address ที่เราใช้อยู่มาจาก Hostify เขาเป็นบริการ Hosting, VPS ยาวไปถึง Co-Location กันเลยทีเดียว ถ้าสนใจก็เข้าไปดูได้ใน Website ได้เลย

arnondora5
อันนี้ 2 ใบเก่าที่เป็น PCIe 2.0 1x เสียบออกเป็น SATA 4 Port (ด้านบน) กับ 6 Ports (ด้านล่าง)

เอาหล่ะทีนี้หมดเรื่อง Network ไป ก็มาที่เครื่องกันบ้าง เครื่องที่เราใช้ Hardware มันก็เป็นแบบ Home-Used Hardware ไม่ได้เป็นระดับ Server แต่อย่างใด แต่การเปิดเป็น Web Server ที่ต้อง Online 24/7 เราต้องมั่นใจพอสมควรว่า Hardware ที่เราใส่อยู่มันทำงานไหว เลยตัดสินใจเปลี่ยน HBA Card ที่ต่อกับ HDD ใน NAS อยู่ เพราะ Card ที่ใช้อยู่มันอันละไม่กี่ร้อย เราไม่มั่นใจในความเสถียรเท่าไหร่ เลยเปลี่ยนเป็นของ LSI ที่เราเชื่อถือ

arnondora5

ส่วนเรื่องของ Network ในเครื่อง จากเดิมที่เราใช้ NIC ที่ Built-in มากับ Motherboard แค่รูเดียว เราก็กลัวว่า ถ้าเรา Transfer File ไปด้วย มันจะทำให้ Gigabit NIC ที่มีแค่รูเดียวมันเต็ม ทำให้เว็บโหลดช้าได้ เลยซื้อเป็น Gigabit NIC มาตัวนึงที่มี 2 Port

ตอนแรกจะใช้ Dynamic Link Aggregation แต่มันต้องเข้าไป Config ใน Router ด้วย แน่นอนว่า ทำไม่เป็น เลยกลับไปโหมด Adaptive load balancing ซึ่งน่าจะเหมาะกับการใช้งานของเรามากกว่าด้วยซ้ำที่ มันจะ Load Balance ทำให้เวลาเรา Transfer File เต็มเครื่องนึง ถ้ามีคนเข้าเว็บมันก็จะไปออกโดยใช้อีกเส้นนึง

พอมี NIC มาเสียบเพิ่ม ทำให้ทั้งเครื่องเสียบทั้งหมด 3 ช่อง แต่เราไม่มีช่องเสียบในบ้านที่ต่อตรงเข้า Router ทำให้ต้องเสียบกับ Switch ซึ่งเอาจริง ๆ คือ ถ้าเสียบ Switch ที่เป็น Gigabit ทำให้เสียบ 3 Port ไปสุดท้าย ถ้าเราอยู่นอก Switch Link Speed สูงสุดที่เราจะได้ก็แค่ 1 Gbps เท่านั้น แล้วจะเสียบ 3 ช่องเพื่อ !!!

arnondora5

เลยต้องเดินสายในบ้านเพิ่มอีก ไหน ๆ ก็เดินไปแล้ว เอาไปเลยทั้งหมด 8 เส้น ทำให้ Switch ที่อยู่ใน Router Mikrotik RB4011 ของเราไม่พอแน่ ๆ เลยต้องไปซื้อ Switch อีกตัวนึงมาเพิ่ม แต่ไหน ๆ ก็ทำ Switch แล้วก็เลยคิดว่า งั้นก็เอามาทำเป็น Core Switch ไปเลยละกัน เอาเป็น Unmanaged แบบง่าย ๆ คือ TP-Link TL-SG1016D ที่เรารีวิวไปก่อนหน้านี้

ส่วนเรื่องของพลังงาน ถือเป็นเรื่องสำคัญมาก เพราะถ้าเราใช้บริการ Server จริง ๆ พวกนั้นเขาการันตี SLA มีเครื่องปั่นไฟ ระบบสำรองไฟที่ดี แต่ถ้าเป็นบ้าน เรียกได้ว่าหายนะเลยก็ว่าได้ เพราะระบบไฟฟ้าในครัวเรือนบ้านในไทยเอาจริง ๆ นั้นไม่ได้ดีเท่าไหร่ บางทีฝนตก ๆ อ้าวไฟดับบ้างแหละ ไฟตกบ้างแหละ คือเอาแน่เอานอนไม่ได้เลย

arnondora5

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

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

Ghost : The Minimal Blogging Platform

arnondora5

เพื่อจะแก้ปัญหาที่เราเจอจาก Gatsby อันโหดร้ายที่ต้อง Build ทุกครั้งที่เราจะอัพเดทหน้าเว็บ หรือเพิ่มบทความต่าง ๆ ประกอบกับเรา Self-Hosted แล้วเราจะใช้อะไรก็ได้ ซึ่ง CMS ที่เราหยิบมาใช้คือ Ghost

Why Ghost?

นั่นเพราะ เราต้องการ CMS ที่ทำงานกับมันง่าย ไม่ได้ต้องการ Workflow ที่ซับซ้อน และ Multiple Editor ที่ต้องการ Permission อะไรมากมาย เพราะเราเอาจริง ๆ ก็ทำอยู่คนเดียว ที่สำคัญต้องมี Performance ที่ดีด้วย ซึ่ง Ghost ตอบโจทย์เรามาก ๆ ด้วยการที่มันถูกออกแบบมาให้เป็น Blogging Platform ตั้งแต่ต้น ทำให้เราไม่ต้องมานั่ง Customise มากมายเหมือนกับ Wordpress ที่เป็น CMS อเนกประสงค์ไปแล้ว

ส่วนเรื่องของ การพัฒนาหน้าเว็บ ก็ยิ่งง่าย เพราะใน Ghost มันมีชุดเครื่องมือเพื่อช่วยเราในการพัฒนาในตัวอยู่แล้ว เช่นพวก Development Server ที่ใช้งานผ่าน Command Line ได้อย่างง่ายดาย ประกอบกับ การพัฒนาหน้าเว็บที่มี Handlebar เข้ามาช่วยงานที่มันยากให้ง่ายขึ้นมากเลยทีเดียว

arnondora5

มันง่ายขนาดว่า เราใช้เวลาเรียนรู้การใช้งาน Handlebar และ เขียนเว็บนี้ออกมาโดยใช้เวลาแค่ 2 วันเต็ม ๆ เท่านั้นเอง ถือว่าง่ายมาก

ข้อเสียของ Ghost เองก็มี ด้วยความที่มัน Miminal ไปหน่อย ทำให้ Feature บางอย่างมันไม่ได้ Implement มา ก็..... ยากละ ต้องนั่งทำเอง ตัวอย่างเช่น การทำ Lazy Load ที่ไม่มีให้, Next-Gen Image อย่าง Webp ก็ไม่มี และ Auto Compress Image ก็ไม่มี ซึ่งถ้าเป็น Wordpress เราสามารถจบได้ที่ Plugin ที่มีเยอะมาก ไว้จะมาเล่าอีกทีกับการแก้ปัญหานี้

กับอีกปัญหาคือ ความปลอดภัย ในเว็บเราหลังบ้าน มันปลอดภัยแน่นอน เพราะมันไม่มีไง !!! แต่ตอนนี้เรามีหลังบ้านแล้ว เราก็ต้องมานั่ง Secure หลังบ้านให้ปลอดภัยด้วยหลาย ๆ วิธี ก็สร้างความยุ่งยากอยู่พอตัวเลย

Brand New Design

arnondora5

อย่างที่ทุกคนเห็นว่าเว็บมีการเปลี่ยนไปเรียกได้ว่า ใหม่หมดจดเลย รอบนี้เรียกได้ว่าหมดจดกว่าที่เคยมาก่อน แต่ก็ยังคงออกแบบตามพฤติกรรมของผู้อ่านอยู่ดี แต่สิ่งที่ทำให้การออกแบบครั้งนี้เปลี่ยนไปมาก เพราะโจทย์ที่เปลี่ยนไปว่า เว็บเราจะไม่ใช่ Blog ที่เป็น Personal Blog แล้ว เราจะเปลี่ยนบทบาท มาเป็น Publisher มากขึ้น การ Design เว็บ และแนวทางหลาย ๆ อย่างก็ค่อย ๆ เปลี่ยนไป Content ที่มีคุณภาพสูงขึ้นก็จะมาเรื่อย ๆ เหมือนกัน

แต่ในแง่ของการ Design ในสำหรับ Publishing เราได้เรียนรู้มาเลยว่า เออ มันค่อนข้างต่างกันอยู่ในหลาย ๆ จุด เพราะจุดประสงค์ของการเข้าเว็บมันไม่เหมือนกันซะทีเดียว ส่วนที่เหมือนกัน น่าจะเป็นเรื่องของการเข้ามาอ่านเรื่องที่เราสนใจแหละ แต่ต่อจากนั้นละ มันจะเริ่มไม่เหมือนกันแล้ว

arnondora5

เรายกตัวอย่างง่าย ๆ เช่น การแสดง List ของ Content ในหน้าเว็บเรา เมื่อก่อน เราจะแสดงเป็นการเรียงตามเวลาในการ Publish ออกไป นั่นเพราะ เราบอกว่าเราเป็น Blog ไง เดิมทีพวกนี้มันเป็นเหมือนสมุดบันทึกเล่าเรื่องราวที่เราไปเจอมา แล้วอยากจะมาแชร์กัน มันจะเหมาะกับการเริ่มต้นที่ดีเลยละ เพราะถ้าไม่มี Content เยอะ หลากหลาย การแสดงแบบนี้ มันทำให้เราดูเหมือนมี Content ในเว็บเยอะได้

arnondora5

แต่ในหน้าเว็บใหม่เราเปลี่ยนไป เป็นการแสดงเป็น Tag แยกเป็นเรื่อง ๆ ไป ส่วนนึงมาจากปัญหาที่เราไปคุยกับรุ่นพี่ที่เข้ามาดูหน้าเว็บเรา บอกว่า เว็บเราพี่เขาจะเข้าจากบทความที่เราแชร์ไป แล้วพอเราอ่านจบ เรากลับไปหน้าแรกมันกลับไม่มีอะไรที่เราสนใจเลย เราเลยงั้น ลองทำเป็นเหมือนเว็บข่าวเลย ที่มีการแสดงข่าวในแต่ละด้านออกมาแยก ๆ กัน ถ้าเราสนใจเรื่องไหน เราก็คลิกเข้าไปดูด้านนั้น ๆ ได้เลย การแสดง Content แบบนี้ มันจะเหมาะกับเว็บที่โตมาหน่อย มี Content ที่จำนวนมาก และ หลากหลาย เริ่มต้องการจัดระเบียบมันมากขึ้น เพื่อให้ค้นหา หรือ Personalise ได้มากขึ้นนั่นเอง

ถ้าเล่าให้ตรงกับที่คิดมากขึ้นคือ เรามีการ Design User Persona ซึ่งตรงนี้ เราจะอ้างอิงจาก Stat ของเว็บเช่นพวก Demographic เช่น อายุ และการเวลาในการเปิดดูเว็บ เพื่อระบุคร่าว ๆ ว่า น่าจะมีกี่ Persona

จากนั้น เราจะลองมาทำ User Journey Map ดูว่า ในแต่ละ Persona นั้น มีลักษณะการใช้งานอย่างไร ตรงไหนชอบ ตรงไหนไม่โอเค ซึ่งข้อมูลนี้เราก็ลองเอาไปถาม คนที่มีลักษณะที่คล้ายกับ Persona ที่เราตั้งไว้มา ดูสิ๊ว่า แต่ละ Persona มีความแตกต่างอย่างไร เพื่อที่เวลาเรา Design จะได้ทำให้เข้ากับ ทุก Persona ที่สุดเท่าที่จะเป็นไปได้ เพราะเราไม่สามารถ Personalise ให้เข้ากับแต่ละกลุ่มได้เลย ต้องทำออกมากลาง ๆ ละกันง่ายดี

ตัวอย่างที่เราได้มาจากการทำ User Persona และ User Journey คือ มันตอบคำถามเราว่า ทำไม Exit Rate ของหน้าอ่าน Content ถึงสูงได้ขนาดนั้น นั่นเป็นเพราะ เขาอ่านจบแล้ว เลื่อน ๆ ไป ก็เหมือนจะไม่มีอะไรแล้ว ก็เลยปิดไปเลย ไม่ก็กดหน้า Home เพื่อคาดหวังว่า เออจะมีอะไรอ่านต่อ ซึ่งก็อย่างที่เล่าไปว่า ไม๊มีอ๊าาา เสียง Ads พริกไทยมา !

มันเลยทำให้หน้า Content มี Exit Rate ที่สูงเป็นอันดับ 2 และหน้าแรกเป็นอันดับ 1 ไป แต่จากข้อมูลก็ทำให้เรารู้อีกว่า ถ้าหน้าแรกเป็น First Hop ไม่ว่าจะจาก Source ไหนก็ตาม เช่น Social Media หรือ Direct Link จะมีจำนวน Hop ที่มากกว่า 2 สูงถึง 70% เลยทีเดียว

พอเราลองดูให้ลึกขึ้นเข้าไปอีก 80% กว่า ๆ ของ 70% เมื่อกี้ กดปุ่ม Older Article เพื่อให้มันแสดงบทความที่เก่าขึ้น และ จะกดอยู่ไม่เกิน 5 ก็หยุดแล้ว (จริง ๆ มีอีก แต่ถ้าดูทางสถิติแล้วมันเป็น Outliner เลยตัดออกจากการคำนวณ) ทำให้ต้องคิดละว่า จะแก้ปัญหานี้ยังไงได้บ้าง ซึ่งก็เลยมาจบที่การ เอาหลาย ๆ หมวดหมู่เอามาอยู่ในหน้าแรกให้หมด เพื่อเป็นการ Filter เบื้องต้นก่อนว่า กลุ่มคนเหล่านี้อยากอ่านอะไร มันจะต่างจากกลุ่มคนที่รู้อยู่แล้วว่าจะอ่านอะไร เลยกดเข้ามาที่บทความเลย

arnondora5
ด้านล่างจะเป็น Related Posts สำหรับการแสดงบทความที่อยู่ในหมวดหมู่เดียวกัน

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

การใส่ Content ลงไปเยอะ ๆ ในหน้าแรก ใช่แหละมันทำให้คนอ่านมรู้สึกว่า ตัวเองมีตัวเลือกเยอะขึ้นแน่นอน มันจะเหมือนกับ ตอนที่เราไม่รู้จะดูอะไรใน Netflix ม่ะ ที่เรา แบบเลื่อน ๆ ไปเรื่อย ๆ เพื่อหาอะไรที่เราอยากดู ในทางของการออกแบบ มันมีกฏที่เรียกว่า Hick's Law อยู่ มันว่าด้วย ความสัมพันธ์ของ จำนวนตัวเลือกที่มี กับเวลาในการเลือก จากประสบการณ์เราเห็นเลยว่า ถ้าเรามี เวลาในการเลือกที่สูง สุดท้ายเราจะเลิกไม่เลือกเพราะหมดเวลา มันก็จะไปเข้า Pakinson's Law พอดี ดังนั้นเราว่า จำนวน Content ที่นำมาแสดงเป็นเรื่องสำคัญ มากไป มันก็จะทำให้เลือกยากและจากไป แต่ถ้าเราใส่น้อยไป มันก็จะไม่มีอะไร สุดท้ายก็ไม่เลือก ทำให้เราต้องทดลองกับลองหาคำตอบดูสักพักกว่าจะได้จำนวนที่ถูกใจ ทั้งในฝั่งของ Desktop และ Mobile

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

ส่วนในด้านของการ Design เอง เราก็ยังพยายามใส่ Signature ของงานออกแบบตัวเองลงไปให้ได้มากที่สุด และยังคงใช้ Philosophy เดิมที่ใช้มาตลอดว่า "Every Pixel Matters" เพราะเราเชื่อว่า ทุก Pixel ที่อยู่บนหน้าจอมีความหมาย แม้จะเป็นแค่จุดเล็ก ๆ บนหน้าจอ แต่มันก็สร้างความแตกต่างได้ ดังนั้นการออกแบบหลัก ๆ แล้วเราจะทำให้ Element ทุกอย่างอยู่ในจุดที่มันควรอยู่

ทำให้ในเว็บนี้เราพยายามออกแบบทั้งในด้านของ Experience และ Design ที่ดีขึ้นเพื่อให้มั่นใจว่า ผู้อ่านของเว็บเราจะได้รับประสบการณ์ที่ดีจากเว็บเรา ด้วยทั้ง Content และ Design ของเว็บเราเองที่ทันสมัยนั่นเอง

Migrating Gatsby to Ghost

arnondora5

การ Migrate Content จาก Gatsby ไปที่ Ghost นั้น บอกเลยว่า แสนเข็ญมาก มันไม่มี Library หรือ Adapter ตัวไหนเลย ที่แปลงจาก Markdown File หรือ GraphQL ให้ออกมาเป็นรูปแบบที่ Ghost รับได้ตรง ๆ

ทำให้เกิดความ Challenge Accepted ได้ ๆๆๆ เลยมานั่งเขียน Python Script เพื่อแปลง Content ทั้งหมดออกมา เราจะแยกออกเป็น 3 ส่วนด้วยกันคือ Metadata, บทความ และ รูปภาพประกอบ

Metadata ถือว่าง่ายที่สุดเลย มันมีอยู่แล้วที่หัวไฟล์ เราก็แค่อ่านมาทีละบรรทัดแล้วก็ยัดตาม Field ต่าง ๆ บน Ghost ได้เลย อันนี้ง่าย ถัดไปคือ บทความ อันนี้ก็ง่ายเหมือนกัน เพราะ Ghost มันรองรับการ Import Markdown ลงไปได้ด้วย ทำให้เราสบายขึ้นเยอะมาก

สุดท้ายยากที่สุดคือ รูปภาพ เพราะลักษณะของการเก็บรูปมันไม่เหมือนกันกับ Gatsby เลยที่เราจะแยกรูปเป็น Content ไป แต่ Ghost มันเรียงตาม เดือน และ ปีที่ Upload เข้าระบบไป ทำให้ต้องมานั่งให้ Python Script อ่านไฟล์รูป กับ Metadata ของบทความแล้วย้ายรูปไปยังที่ ๆ ถูกต้อง พร้อมกับ Update Path ในบทความให้ถูกต้องด้วยเช่นกัน

arnondora/gatsby2ghost
Simple python script for converting Gatsby content to Ghost compatible JSON data file - arnondora/gatsby2ghost

ด้วย Script นี้เราจะได้ Folder ที่เรียงรูปไว้หมด พร้อมกับ Backup File ที่พร้อมสำหรับการสั่ง Restore ลงไปใน Ghost ได้เลย รวม ๆ แล้วเราจำไม่ได้แหละว่า เราใช้เวลาเท่าไหร่ แต่จำได้ว่า นานอยู่เหมือนกันซึ่งถ้าใครจะย้ายเราก็ Open Source Python Script อันนี้ให้เอาไปใช้ได้เลย

สรุป

arnondora5

ทั้งหมดที่ทำมา ถือว่าเป็นการอัพเดทเว็บในรอบ 2 ปีที่โคตรเหนื่อย กินเวลาเยอะมาก ตั้งแต่การเตรียมระบบ Network และ Server จนไปถึงการออกแบบหน้าเว็บ และ เขียนออกมาจริง ๆ แต่ถามว่าเบื่อมั้ย เราก็ยังคงตอบเหมือนเดิมว่า ไม่เบื่อ เรามองว่าการมานั่งทำเว็บแบบนี้ มันเหมือนการขัดสนิมสกิลหลาย ๆ ด้านของเรา แถมยังเป็นการลับให้มันคมขึ้นอีก สิ่งนึงที่เราได้จากการนั่งทำเว็บในช่วงนี้ คือ ทำให้เรารู้ว่า เราสนุกกับการแก้ปัญหา และเขียนโปรแกรมมากแค่ไหน เราคงขาดมันไม่ได้แหละทั้งชีวิตนี้

สำหรับคนที่คิดว่า บทความนี้คือ ทั้งหมดของ Journey ของการทำเว็บนี้แล้วบอกว่า ไม่ใช่เลย มันเป็นแค่ 40% ของทั้งหมดเท่านั้น ตอนทำจริง ๆ เราเจอปัญหาหลายอย่างมากกว่านี้ กับเรื่อง Design ที่เราบอกว่า Every Pixel Matters มันยังมีอีกหลายความลับ และ Easter Egg ที่อยู่ใน Design ของเราอีกหลายอันในเว็บ ก็ลองหากันดูได้นะ ~

เข้าสู่ช่วงขายของตรง ๆ ช่วยเพื่อนขายของ IP Address ที่เราใช้อยู่มาจาก Hostify เขาเป็นบริการ Hosting, VPS ยาวไปถึง Co-Location กันเลยทีเดียว ถ้าสนใจก็เข้าไปดูได้ใน Website ได้เลย