กรณีศึกษา: เว็บ one2car กับปัญหาการแสดงผลในการเชื่อมต่อช้า “ตามหาหญิงคนรักรอบโลก เพื่อจะพบว่าเธออยู่ข้างบ้านนี่เอง”

1:20 am by warong

กรณีศึกษาครั้งนี้ เราเข้าไปแก้ปัญหาให้ลูกค้าเว็บไซต์รถมือสองเจ้าดัง one2car.com สิ่งที่น่าสนใจคือปัญหาของเว็บ one2car เป็นเรื่องที่เจ้าของเว็บหลายๆ ท่านอาจจะไม่ให้ความสนใจนัก แต่ในเงื่อนไขธุรกิจที่แตกต่างกันไปของผู้ประกอบการแต่ละราย ทำให้จำเป็นต้องให้ความสนใจรายละเอียดที่ต่างกัน

หน้่าเว็บ one2car.com เว็บไซต์รถมือสองยอดนิยม

รูปแบบธุรกิจของ one2car

ท่านที่สนใจซื้อขายรถมือสองโดยใช้ช่องทางเว็บไซต์ น่าจะคุ้นเคยกับเว็บ one2car.com เป็นอย่างดี เว็บไซต์นี้เป็นการยกระดับธุรกิจรถมือสอง จากการประกาศโฆษณาทางสิ่งพิมพ์ (เช่นนิตยสาร) มาสู่ช่องทางอินเทอร์เน็ท ความต้องการพื้นฐานก็คือการเชื่อมถึงกันระหว่างเต๊นท์รถกับลูกค้าที่ต้องการซื้อรถมือสอง

พลังของการเชื่อมต่อและกระจายข้อมูลทางอินเทอร์เน็ท นอกจากจะมีประสิทธิภาพกว่าสิ่งพิมพ์อย่างมากแล้ว เมื่อเพิ่มการพัฒนาโปรแกรมเข้าไป เพื่อความสามารถทางการจัดการข้อมูลรถ การแสดงรูปภาพ การค้นหา การเรียงลำดับรถ ทำให้ช่องทางเว็บไซต์สามารถตอบสนองความต้องการทั้งของเต๊นท์รถและลูกค้าที่ต้องการซื้อรถได้มากกว่าสื่อสิ่งพิมพ์อย่างมหาศาล

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

  • การเข้าถึงรถที่ลูกค้่าต้องการได้โดยเร็ว โดยกรองตามประเภทรถ รุ่น สี ราคา
  • การแสดงภาพประกอบในมุมต่างๆ ของรถให้ครบถ้วนที่สุด

เว็บ one2car.com ได้ปรับปรุงพัฒนาความสามารถเรื่อยมา และเพื่งจะปรับโฉมไปเมื่อไม่นานมานี้ การออกแบบและการสร้างหน้าตาเว็บเป็นไปตามวิธี XHTML/CSS ซึ่งเป็นวิธีที่ทรงพลังและได้รับความนิยมในการสร้างเว็บสมัยใหม่ และเปี่ยมด้วยประสิทธิภาพในการค้นหารถและแสดงภาพรถ

one2car.com หน้าการแสดงรถโดยแบ่งตามประเภท รุ่น สี ช่วงราคา ฯลฯ ตามความต้องการของลูกค้า

ปัญหาที่พบในเครื่องที่เชื่อมต่ออินเทอร์เน็ทช้า

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

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

one2car.com เมื่อใช้การเชื่อมต่อที่ช้า ปัญหาการเรียกหน้าแรกแล้วเป็นจอขาว โดยใช้ Firebug จับเวลา

การทดสอบและแก้ปัญหา

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

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

  • โค้ด HTML อันเป็นโค้ดในการแสดงหน้าตาของเว็บโดยตรง
  • โค้ด javascript คือโค้ดเพื่อเสริมทำงาน ทำให้หน้าเว็บมีลูกเล่นมากขึ้นกว่าเดิม
  • โค้ดฝั่งเครื่องเซิร์ฟเวอร์ของ one2car.com คือโค้ดที่เขียนขึ้นที่เครื่องเซิร์ฟเวอร์ประมวลผลของ one2car.com ซึ่งมีความเป็นไปได้ที่จะทำให้เกิดความล่าช้าเช่นกัน
  • ตัวเซิร์ฟเวอร์ของ one2car.com เอง

และคุณเม่นเองคาดเดาว่าปัญหาอาจจะมาจากการประกอบโค้ด HTML ที่ไม่เหมาะสม จึงวางแผนสร้างหน้า HTML ให้ใหม่หมดด้วย 8-O

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

แต่หากทดสอบจนขั้นตอนสุดท้ายก็ยังไม่พบวิธีแก้ นั่นก็คงเข้าใกล้หายนะเช่นกัน :(

อย่างไรก็ดี ภายใต้ข้อจำกัดของความไม่รู้เหล่านี้ เราก็ได้แต่ทดสอบไปตามแผนที่วางเอาไว้ ด้วยใจระทึก :D

การแก้ปัญหาที่เปรียบเสมือนการตามหาหญิงคนรักด้วยการเดินทางตามหาไปรอบโลก

เราทดลองหาวิธีตามแผนการ เริ่มต้นด้วยการหาตัวจำลองให้การเชื่อมต่อของเราเป็นการเชื่อมต่อที่ช้า และโชคดีมากที่พบตัวแจกฟรีอยู่ตัวหนึ่ง ชื่อว่า Sloppy

Sloppy โปรแกรมสำหรับจำลองการเชื่อมต่อช้า

หลังจากนั้นเราก็เริ่มปรับเปลี่ยนตำแหน่งของโค้ดต่างๆ เพื่อหาดูว่า ส่วนใดเป็นสาเหตุของการหน่วงการแสดงผล โดยใช้ Sloppy เป็นตัวปรับความเร็วการเชื่อมต่อ และใช้ Firebug ช่วยในการจับเวลา

one2car.com การทดสอบจับเวลาโดยใช้ Sloppy ร่วมกับ Firebug จับเวลาในแถบด้านล่าง

เราทดลองปรับโค้ด HTML ปรับแล้ว ปรับเล่า ก็เพิ่มความเร็วได้เพียงเล็กน้อยเท่านั้น จึงลองเปลี่ยนไปศึกษา javascript ดู ก็ยังคงพบว่า javascript ที่เขียนขึ้นนั้น ไม่ใช่ต้นเหตุแห่งความช้าอยู่ดี

ครั้นลองขยับไปตรวจโค้ดฝั่งประมวลผลของ one2car.com ก็พบว่าช่วยเพียงจุดไม่ใช่นัยสำคัญ เช่นเดียวกันกับการตรวจสอบเซิร์ฟเวอร์เช่นกัน

ขณะที่ีทดลองมาจนครบตามแผน ก็ยังไม่พบสาเหตุ (และเวลาก็งวดเข้าทุกที :-?) แผนการที่ผ่านมา เกิดจากประสบการณ์ที่เคยพบ ดังนั้น เมื่อไม่พบปัญหาจากการทดสอบเหล่านี้ แสดงว่าเป็นปัญหาใหม่ ขั้นตอนต่อไปในการทดสอบ ก็ต้องใช้วิธีสังเกตเอาจากลักษณะที่ไม่เคยพบมาก่อน

บางครั้งเราถึงกับเปรียบเปรยว่า เราสุ่มทดลองแก้ปัญหา เหมือนการตามหาหญิงสาวคนรักไปรอบโลก

สาเหตุของปัญหา: เมื่อการตามหาหญิงคนรักรอบโลก แล้วพบว่าเธออยู่ข้างบ้านนี่เอง

เมื่อต้องเลิกยึดหาสาเหตุตามประสบการณ์ที่คาดมา เราก็ต้องมานั่งดูกราฟแสดงการโหลดอย่างละเอียด ไม่ให้คลาดสายตาในทุกๆ ส่วนประกอบ แล้วในที่สุด เราก็พบลักษณะที่น่าตื่นเต้น! :o

one2car.com ในที่สุดก็พบปัญหา จาก Firebug เมื่อใดโหลดส่วน <head>...</head> เสร็จ เมื่อนั้นเว็บขึ้นโครงหน้า

กราฟจาก Firebug แสดงให้เห็นว่าส่วนหน้าเว็บจะเรื่มขึ้นโครงเมื่อโหลดไฟล์ต่างๆ ในส่วน <head>…</head> หมดนั่นเอง

เมื่อลองเปรียบเทียบโค้ดในส่วน <head>…</head> เราก็จะพบว่า ไฟล์ในหน้าแรก one2car.com ประกอบด้วยไฟล์จำนวนไม่น้อย อันได้แก่ไฟล์ stylesheet และ ไฟล์ javascript

1
2
3
4
5
6
7
8
9
10
<link href="App_Themes/default/ie.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/default/stylesheet.css" type="text/css" rel="stylesheet" />

<script src="/js/form.js" type="text/javascript"></script>
<script src="/js/hover.js" type="text/javascript"></script>
<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/main.js" type="text/javascript"></script>
<script src="/js/vscrollarea.js" type="text/javascript"></script>
<script src="/js/ErrorLogFile.js" type="text/javascript"></script>
<script src="/js/jpage.js" type="text/javascript"></script>

เพราะการมีไฟล์จำนวนมากเช่นนี้ นอกจากจะมีขนาดใหญ่ อันนำมาซึ่งการเสียเวลาโหลดนานแล้ว ยังทำให้เกิดการหน่วงเวลาพยายามโหลดพร้อมกันด้วย ดังนั้น เมื่อลองพยายามปรับแก้ ให้มีการโหลดในส่วน <head>…</head> ให้น้อยลง โดยพยายามให้เกิดการโหลดพร้อมๆ กัน (concurrent) ได้มากที่สุด เราก็พบว่า หากเราแบ่งไฟล์ stylesheet ออกเป็นสองไฟล์ แล้วย้ายส่วน javascript ไปไว้ในส่วน <body>…</body> ไกลไกล เว็บก็ขึ้นโครงได้ด้วยเวลาที่น้อยลงกว่า 3 เท่า!

1
2
3
<link href="App_Themes/default/ie.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/default/style.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/default/stylemore.css" type="text/css" rel="stylesheet" />

สรุปการเรียนรู้

จะเห็นได้ว่า การแก้ปัญหานั้นง่ายแสนง่าย เพียงแบ่งไฟล์ stylesheet เป็นสองไฟล์ และย้ายตำแหน่งการโหลด javascript ไปไว้ในส่วน <body>…</body> เท่านั้นเอง

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

และต้องถือว่าเราโชคดีที่พบลูกค้าที่เข้าใจกระบวนการเหล่านี้ มากกว่าจะตัดพ้อว่าเป็นการแก้ปัญหาที่แสนง่าย :)

เด็กหนุ่มชาวธอร์ซา ผู้เดินทางออกจากหมู่บ้านเล็กๆ ของตนเพื่อเสาะหาภรรยา เขาใช้เวลาหลายปีเพื่อเดินทางไปทั่วโลกเพื่อค้นหาหญิงสาวผู้สมบูรณ์แบบ แต่ก็หาไม่พบ ท้ายที่สุด เขากลับมายังหมู่บ้านตัวคนเดียว ระหว่างทางกลับมานั้น เขาเห็นผู้หญิงคนหนึ่ง และว่า “อา.. ฉันพบภรรยาของฉันแล้ว”

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

ท่านนิ่งคิดอยู่ครู่หนึ่ง ก่อนจะพยักหน้า และว่า “แปลได้หลายอย่าง อาจจะถูกทั้งสองทางก็ได้”

บางตอนจากหนังสือ วิถีแมนเดลา


5,022 views

18 Responses to “กรณีศึกษา: เว็บ one2car กับปัญหาการแสดงผลในการเชื่อมต่อช้า “ตามหาหญิงคนรักรอบโลก เพื่อจะพบว่าเธออยู่ข้างบ้านนี่เอง””

  1. mk says:

    ให้ผมเขียนบล็อกนี้คงเป็นบทความเทคนิค แต่สำหรับท่านจ๋งแล้ว มันเป็นเช่นบทกวี

    • Warong Lupaiboon says:

      เย้ย ผมว่าหลังๆ คุณ mk ก็เขียนอะไรแนวนี้นะครับ – -”

  2. p1i3c1h says:

    ชอบๆครับ มาแอบดู

  3. Rerng®IT says:

    อยากกด like ให้ความเห็น mk จริงๆ :-D

  4. khajochi says:

    เขียนได้ดีครับ

    ผมแอบมาพบคนรักเก่าที่เว็บ one2car ด้วย T__T
    พอดีเพิ่งขายรถคันที่ขับมา 10 กว่าปีไป แล้วมาเจอที่นี่พอดี คิดถึงโฮก

  5. joeyjoy says:

    ได้ความรู้มากๆ ขอบคุณค่ะ

  6. เว็บ จ็อบพัทยา โหลดช้ามาก หาวิธีทำให้เว็บเร็ว

  7. 13ankster says:

    เขียนได้สนุก และน่าติดตามจริงๆ ครับ ได้ความรู้อีกต่างหาก

  8. Somprasong says:

    ขอบคุณในความรู้ ที่มอบให้

  9. joomla lover says:

    ท่านจ๋ง กวีโดยแท้ ไม่ได้เจอกันเลย สบายดีไหม

  10. สุดยอดของ เทพคือ เทพที่แบ่งปัน ความรู้และประสบการณ์

  11. Paisan says:

    ผมชอบเข้าเว็บone2car เหมือนกันครับ คุณพอชอบเปิดดูรถมือ2 แต่ไม่ได้ซื้อนะครับ เปิดดูเฉยๆ ฮ่าๆๆ

    ขอบคุณที่มาแบ่งปันความรู้กันนะครับ

Leave a Reply