Tip:
Highlight text to annotate it
X
MAILE OHYE: สวัสดีค่ะ
ฉัน Maile Ohye
ฉันทำงานที่ Google ในตำแหน่ง หัวหน้าด้านเทคโนโลยีโปรแกรม
นักพัฒนาซอฟต์แวร์ของ ทีมสนับสนุนผู้ดูแลเว็บ
วิดีโอนี้เกี่ยวกับ วิธีการหาสิ่งที่ต้องแก้ไขอย่างรวดเร็ว
ที่คุณหรือสมาชิก ทีมฝ่ายเทคนิคของคุณ
สามารถทำตามเพื่อปรับปรุง ประสิทธิภาพไซต์บนอุปกรณ์เคลื่อนที่
ของคุณได้อย่างง่ายดาย
แต่ก่อนที่เราจะพูดถึง วิธีทำให้สิ่งต่างๆ เร็วขึ้น
มาดูสถิติกันก่อน
เป็นความจริงที่ว่าประสิทธิภาพ ส่งผลต่อกำไร
ในการทดลองที่ดำเนินการ โดย Strangeloop
พวกเขาเพิ่มเวลาหนึ่งวินาที สำหรับเวลาในการตอบสนอง
ของหน้าที่แสดงต่อ ผู้ใช้สมาร์ทโฟน
และพบว่า การล่าช้าเพียงหนึ่งวินาที
ทำให้การดูหน้าเว็บ ลดลงกว่า 9%
ยังไม่ต้องพูดถึงอัตราตีกลับ ที่เพิ่มขึ้นมากกว่า 8%
นอกจากนั้น Conversion ยังลดลง 3.5%
สุดท้าย สถานการณ์ดูจะแย่ ลงไปอีกแม้การทดลองจะจบไปแล้ว
นั่นคือ นักช็อป มีแนวโน้มจะไม่กลับมา
ที่ไซต์นั้นอีก
แล้วสถานะปัจจุบัน ของผู้ใช้
และความเร็วของ หน้าอุปกรณ์เคลื่อนที่คืออะไร
จากการวิจัยพบว่า เวลาหนึ่งวินาทีคือช่วงเวลาที่
ผู้ใช้จะไม่ถูกหักเหความสนใจ
ขณะที่ทุกวันนี้ การโหลดหน้าเว็บ บนอุปกรณ์เคลื่อนที่ใช้เวลา
เจ็ดวินาทีโดยเฉลี่ย
ซึ่งหมายถึง เรามี เวลาอีกหกวินาที
เพื่อลองเปิด เว็บไซต์อื่น โดยลืม
งานที่กำลังทำไปสนิท หรือ อาจทำให้เราหงุดหงิด
ฉันขออธิบายเพิ่ม เกี่ยวกับสาเหตุ
ที่เว็บบนอุปกรณ์เคลื่อนที่ ช้ากว่าเดสก์ท็อป
เราจะเปรียบเทียบเวลาในการตอบสนอง ของอุปกรณ์เคลื่อนที่และเดสก์ท็อป
สมมติว่าผู้ใช้แล็ป บน google.com
กำลังจะทำการค้นหา
เมื่อผู้ใช้ป้อนคำค้นหา ขั้นตอนทั้งหมด
ตั้งแต่เบราว์เซอร์ เชื่อมต่อกับ Google
เซิร์ฟเวอร์ของ Google ดำเนินการค้นหา จากนั้น
Google ได้ผลลัพธ์ และแสดงผลในเบราว์เซอร์
ของแล็ปท็อป ทั้งหมดอาจเกิดขึ้น ในเวลาไม่ถึงครึ่งวินาที
อันที่จริง นั่นคือประสิทธิภาพ ที่เราหลายๆ คน
เริ่มคุ้นเคย
แต่บนสมาร์ทโฟน ขั้นตอนทั้งหมดในเวลา
น้อยกว่าครึ่งวินาที ไม่น่าจะเป็นไปได้
นั่นเป็นเพราะ เมื่อผู้ใช้ป้อน
คำค้นหาบนสมาร์ทโฟน ไคลเอ็นต์
ต้องเชื่อมต่อกับ เครือข่ายโทรศัพท์มือถือ
ก่อนจะไปถึงเซิร์ฟเวอร์
เครือข่ายโทรศัพท์มือถือ ไม่ว่าจะกำหนดค่าตามระบบ
3G หรือ 4G สมาร์ทโฟนยังต้อง
ใช้เวลาอย่างน้อย 0.5 วินาทีในการเชื่อมต่อ
กับเซิร์ฟเวอร์อย่าง Google
เมื่อเชื่อมต่อกับเซิร์ฟเวอร์แล้ว หลังจากผ่านไปแล้วครึ่งวินาที
Google ยังต้องดำเนินการค้นหา ส่งกลับผลลัพธ์
และให้สมาร์ทโฟน แสดงผลหน้าเว็บ
บทเรียนสำคัญคือ ผู้เข้าชมด้วยสมาร์ทโฟน
จะต้องใช้เวลาอย่างน้อย 0.5 วินาที เพียงเพื่อ
เชื่อมต่อกับเซิร์ฟเวอร์ของคุณ
จากนั้นอีกประมาณ 0.6 วินาที เมื่อเวลาผ่านไปเกิน
หนึ่งวินาที เป็นไปได้ว่า ผู้เข้าชมของคุณ
จะไปสนใจสิ่งอื่นแล้ว
ดังนั้นมาดูกันว่า เราจะทำให้ สิ่งต่างๆ เร็วขึ้นได้อย่างไร
สำหรับวิดีโอนี้ ฉันจะสาธิตแนวคิด ด้วยการใช้ Google Analytics
กับไซต์อีคอมเมิร์ซ นั่นคือ Google Store
ที่ www.googlestore.com
มาเริ่มกันใน Google Analytics และสร้างกลุ่ม
การเข้าชมบนอุปกรณ์เคลื่อนที่กัน
เริ่มจากสร้างกลุ่มใหม่
เมื่อเดือนก่อน เพื่อนร่วมงานของฉัน ในทีม Page Speed
ได้เปิดตัวคุณลักษณะใหม่ใน Google Analytics ชื่อ "Site Speed"
เราไปดูการจับเวลาของ หน้า Site Speed กัน
เมื่อเราสร้างกลุ่มการเข้าชม บนอุปกรณ์เคลื่อนที่แล้ว
เลือกแท็บ "การกระจาย"
การกระจายจะให้ข้อมูล มุมมองระดับสูง
ของประสิทธิภาพของไซต์
เราจะเห็นว่าเวลา การโหลดหน้าเว็บโดยเฉลี่ย
บนอุปกรณ์เคลื่อนที่สำหรับไซต์ ของฉัน ซึ่งก็คือ Google Store
เกินหกวินาที
เรายังเห็นอีกว่า 46% ของหน้าไซต์
ใช้เวลาสามถึงเจ็ดวินาที ในการโหลดบนอุปกรณ์เคลื่อนที่
ข่าวดีคือเราสามารถ ปรับปรุงอะไรได้มากมาย
ยังอยู่ที่การจับเวลาของ หน้า Site Speed
คลิกแท็บ "สำรวจ"
ที่หน้านี้ ในลำดับการจัดเรียง เริ่มต้นของการดูหน้าเว็บ
เรากำลังดูหน้าที่มีคนเข้าชม มากที่สุดในไซต์ของเรา
คุณจะเห็นความเร็วสัมพัทธ์ ของแต่ละหน้า
ปรากฏว่าหน้าที่ได้รับความนิยม อันดับสาม คือหน้าหมวดหมู่ YouTube
ซึ่งขายของอย่างขวดน้ำ และแม่เหล็กของ YouTube
ใช้เวลาเปิดหน้าช้ามาก โดยช้ากว่าหน้าบนอุปกรณ์เคลื่อนที่
โดยเฉลี่ยของฉัน 350% ซึ่งอย่างที่เราเห็นแล้วก่อนหน้า
เราจะยังไม่เริ่มแก้ไขที่เรื่องนี้
เราสามารถใช้คุณลักษณะนี้ เพื่อทำรายการหน้าที่ช้าซึ่งมีคนดูมาก
เพื่อทำการตรวจสอบ
ตอนนี้ไปกันที่คำแนะนำ เกี่ยวกับความเร็วของไซต์
เพื่อเรียนรู้ว่าเราต้อง ปรับปรุงอะไรบ้าง
เราจะเห็นว่าสำหรับ หน้า YouTube
มีคำแนะนำเกี่ยวกับความเร็วของหน้าอยู่เก้ารายการ
การคลิกที่คำแนะนำ จะเปิดข้อมูลเชิงลึกของ Page Speed
ในหน้าต่างใหม่
ซึ่งเหมือนดูการให้เกรด ด้วยตาของคุณเอง
เมื่อเสร็จแล้ว ไปดูที่ ประสิทธิภาพบนอุปกรณ์เคลื่อนที่
ไม่แปลกใจเลยที่หน้า YouTube ได้คะแนน
55 จากคะแนนเต็ม 100 เมื่อดูจากแนวทางปฏิบัติที่ดีที่สุด
ด้านประสิทธิภาพ
เราได้เกรดเทียบเท่ากับ F เนื่องจากวิดีโอนี้
เกี่ยวกับการแก้ปัญหาด้านประสิทธิภาพ บนอุปกรณ์เคลื่อนที่อย่างรวดเร็ว
เราจะเน้นเรื่องการแก้ไข ส่วนที่ง่ายที่สุด นั่นคือทำตามคำแนะนำ
ที่มีเครื่องหมายอัศเจรีย์สีแดง
คุณอาจรู้สึกคุ้นเคยกับคำแนะนำบางอย่าง แต่บางอย่างก็อาจไม่คุ้นเคย
แต่คุณสามารถขยายเพื่อดูรายละเอียด ของคำแนะนำแต่ละรายการได้
ฉันอยากให้คุณ เข้าใจว่าการทำตาม
คำแนะนำเกี่ยวกับ ประสิทธิภาพเหล่านี้
ทำได้ง่ายและอาจมี ประโยชน์กับคุณมากขนาดไหน
ฉันทำแผนภูมิ ซึ่งมี สองสไลด์
และหวังว่าจะไฮไลต์ คำแนะนำเกี่ยวกับประสิทธิภาพที่ทำได้ง่าย
และให้ความรู้ที่จะนำไปสู่ คำแนะนำที่ทำได้ยากขึ้น
คุณสามารถหยุดวิดีโอชั่วคราวได้ หากต้องการดูอย่างละเอียด
ด้านบนของแผนภูมิ จะบอกสิ่งที่ทำได้ง่าย
และสามารถทำได้ ในไม่กี่ชั่วโมง
โดยนักพัฒนาซอฟต์แวร์หรือ ผู้ที่มีทักษะทางเทคนิค
อย่างแรกคือการเปิดใช้การบีบอัด
การเปิดใช้การบีบอัด คือการซิปทรัพยากร
เพื่อให้ข้อมูลที่ส่งระหว่าง เว็บเซิร์ฟเวอร์และไคลเอ็นต์
มีจำนวนน้อยลง
เป็นการเปลี่ยนการตั้งค่า บนไฟล์การกำหนดค่าของเซิร์ฟเวอร์
ที่ง่ายดาย
การลดขนาดทรัพยากร สามารถทำได้ง่ายๆ
ผ่านเครื่องมือที่มีให้ทุกคนใช้งาน
การใช้สคริปต์อะซิงโครนัส ส่วนใหญ่
คือการคัดลอกและวาง ข้อมูลโค้ด
ใหม่แทนเวอร์ชันเก่า
ในการใช้ประโยชน์จาก การแคชของเบราว์เซอร์ คุณเพียงแค่
เพิ่มส่วนหัว HTTP ที่เหมาะสมลงในทรัพยากร
คำแนะนำเรื่องความเร็ว อย่างสุดท้ายที่ทำได้ง่าย
คือการหลีกเลี่ยงการ เปลี่ยนเส้นทางไปสู่หน้า Landing Page
ในกรณีของหน้าในวงจร การเปลี่ยนเส้นทาง
ซึ่งหมายถึงการแก้ไข URL แหล่งที่มาให้ชี้ไปยัง
เป้าหมายโดยตรง ไม่ใช่ ชี้ไปที่หน้าระหว่างกลาง
เราจะเห็นว่าการแก้ไข การเปลี่ยนเส้นทางที่เกินมา
นั้นมีประโยชน์ โดยดูได้จาก เวลาในการตอบสนองของสมาร์ทโฟน
ในการเปลี่ยนเส้นทางทุกครั้ง ผู้ใช้อุปกรณ์เคลื่อนที่ต้อง
รออย่างน้อยอีก 0.5 วินาที เพื่อที่จะโหลดหน้า
กลับไปที่คำแนะนำ ที่มีความยากในระดับต่ำอีกอย่างหนึ่ง
คือการเปิดใช้การบีบอัด ซึ่งทำได้ง่ายเหมือนการคัดลอกโค้ด
ลงในไฟล์การกำหนดค่า เซิร์ฟเวอร์
มีไฟล์การกำหนดค่า ต้นแบบโอเพนซอร์สอยู่แล้ว
ซึ่งคุณสามารถใช้อ้างอิง หรือคัดลอก
สำหรับการตั้งค่าความปลอดภัยและ ประสิทธิภาพที่เหมาะสม
สำหรับเซิร์ฟเวอร์ของคุณ
คำแนะนำเกี่ยวกับความเร็ว ในหน้าที่สองของแผนภูมินี้
จะยากมากขึ้น สำหรับนักพัฒนาซอฟต์แวร์
คำแนะนำหลายรายการ ไม่สามารถทำได้
ภายในเวลาสองสามชั่วโมง
เพราะต้องใช้ความคิดและ การเพิ่มประสิทธิภาพขั้นตอน
แต่ฉันก็ยังอยากพูดถึง คำแนะนำ
เกี่ยวกับการเพิ่มประสิทธิภาพ รูปภาพสักหน่อย
การเพิ่มประสิทธิภาพ รูปภาพ รวมถึงช่วง
ของการปรับปรุง ตั้งแต่ การบีบอัดแบบไม่สูญเสีย
ไปจนถึงการสร้างและครอบตัด รูปภาพสำหรับ
ไซต์บนอุปกรณ์เคลื่อนที่โดยเฉพาะ
การเพิ่มประสิทธิภาพรูปภาพ ไม่ได้ง่าย
เหมือนคำแนะนำ เกี่ยวกับความเร็วอื่นๆ
ในสไลด์ที่ผ่านมา
แต่สามารถส่งผลอย่างมาก
รูปภาพถือเป็น 65% ของข้อมูลเว็บบนอุปกรณ์เคลื่อนที่
การเพิ่มประสิทธิภาพทรัพยากรนี้ สามารถลดเวลาในการดาวน์โหลด
และทำให้โหลด หน้าต่างๆ ได้เร็วขึ้น
สิ่งสำคัญหลักๆ ของข้อมูลนี้ทั้งหมดคือ
หากคุณมีหน้าบนอุปกรณ์เคลื่อนที่ ที่มีการเข้าชมสูง
และมีคำแนะนำเกี่ยวกับความเร็ว ที่มีเครื่องหมายอัศเจรีย์สีแดงที่แสดง
ความยากสำหรับนักพัฒนาซอฟต์แวร์ อยู่ในระดับต่ำ คุณก็ควรแก้ไข
เพื่อผู้เข้าชมและ ธุรกิจของคุณ
สำหรับแรงบันดาลใจ เพิ่มเติม ลองดู
ที่ WebPageTest.org
ใน Web Page Test เราสามารถป้อนเว็บ
อย่างหน้าหมวดหมู่ YouTube และวิเคราะห์ความเร็วได้
เลือกตัวแทนผู้ใช้อุปกรณ์เคลื่อนที่ เช่นสมาร์ทโฟน iPhone
หรือแอนดรอยด์
เมื่อ Web Page Test วิเคราะห์หน้าที่ช้าเสร็จแล้ว
เราจึงจะเห็นสิ่งที่น่าเจ็บปวด
ฉันดูหน้านี้พร้อมกับเพื่อนร่วมงาน Ilya Grigorik
ซึ่งทำงานหลักๆ ด้าน ประสิทธิภาพ
เขาพูดว่า อื้อหือ
นั่นไม่ใช่น้ำตกที่น่าดูเอาซะเลย
น้ำตกนี้แสดงถึง สาเหตุที่
การโหลดหน้าเว็บ ใช้เวลามากกว่า 15 วินาที
แถบสีฟ้าคือ การดาวน์โหลดเนื้อหา
ที่จำเป็นเพื่อการโหลดหน้า
สำหรับการแสดงผล ของหน้า
จำเป็นต้องใช้เวลาเกือบเจ็ดวินาที
ด้วยประสิทธิภาพตามนี้ ไซต์ของฉันต้องการให้
นักช็อป YouTube รอเจ็ดวินาที
จึงจะได้รับการแสดงผล และรออีกมากกว่า
15 วินาที เพื่อโหลด หน้าทั้งหน้า
หากคุณยังมี แรงบันดาลใจไม่พอที่จะ
ทำการปรับปรุง อย่างรวดเร็วเหล่านี้
โปรดทราบว่า จากข้อมูล "สิ่งที่ผู้ใช้ต้องการ
จากไซต์บนอุปกรณ์เคลื่อนที่วันนี้" ผู้ใช้ 61%
บอกว่าหากพวกเขาไม่พบ สิ่งที่กำลังหา
ทันทีบนไซต์บนอุปกรณ์เคลื่อนที่ พวกเขาจะ
เปลี่ยนไปไซต์อื่นอย่างรวดเร็ว
นั่นคือเหตุผลที่การเปรียบเทียบ หน้าและข้อมูลเชิงลึกเรื่องความเร็ว
ของหน้ากับหน้าที่เทียบเท่า ของคู่แข่งของคุณจึงเป็นเรื่องสนุก
การเล่นกีฬามาตลอด ชีวิตของฉัน
และการเป็นลูกสาวคนสุดท้อง ในบรรดาพี่น้องทั้งสามคน
ฉันพบว่า ฉันจะมีแรงจูงใจ ที่จะปรับปรุงตัวมากขึ้น
หากผู้อื่นทำได้ดีกว่า ในการแข่งขัน
และที่ Web Page Test คุณ สามารถดาวน์โหลดมุมมองชุดภาพ
ในการแสดงภาพหน้า บนอุปกรณ์เคลื่อนที่ของคุณ
ลองเปรียบเทียบชุดภาพ ของคุณ
กับหน้าไซต์ของคนอื่น ในอุตสาหกรรมเดียวกัน
ฉันขอจบด้วยการแนะนำ แหล่งข้อมูลดีๆ
มี Page Speed พร้อมด้วยเครื่องมือ อย่างข้อมูลเชิงลึกของ Page Speed
และบทความต่างๆ
และมีวิดีโอเยี่ยมๆ จาก Ilya
และสมาชิกของทีม Page Speed
สุดท้ายนี้ อย่าลืมลอง เข้าไปที่ WebPageTest.org
ขอขอบคุณที่รับชมค่ะ