Transcript ว่าทำไม Page Speed ​​ถึงสำคัญบนเว็บไซต์ของคุณ

เผยแพร่แล้ว: 2019-12-18

กลับไปที่พอดคาสต์

การถอดเสียง

John Jantsch: ตอนนี้เป็น Duct Tape Marketing Podcast และนำเสนอโดย pixelz.com คุณต้องทำให้ภาพเหล่านั้นดูดี หากคุณต้องการให้พวกมันโดดเด่น หากคุณต้องการให้พวกมันแสดงผลิตภัณฑ์ของคุณ นี่คือบริการรีทัชเพื่อทำให้ภาพของคุณดูสวยงาม

สวัสดีและยินดีต้อนรับสู่ตอนอื่นของ Duct Tape Marketing Podcast นี่คือจอห์น แจนท์สช์ แขกของฉันวันนี้คือ Lukas Haensch เขาเป็นอดีตผู้จัดการ Google UX และผู้ก่อตั้ง Pathmonk ที่ pathmonk.com

John Jantsch: และเราจะพูดถึงความเร็วหน้าเว็บ ความเร็วในการโหลดเว็บไซต์ ปัจจัย UX ทั้งหมด หากมีคนไปที่เว็บไซต์ของคุณและโหลดช้ามาก นั่นเป็นประสบการณ์ที่ไม่ดี และนั่นเป็นสาเหตุที่สำคัญมาก อันที่จริง Google เป็นปัจจัยสำคัญที่เรียกได้ว่าเป็นปัจจัยการจัดอันดับสำหรับวัตถุประสงค์ SEO ภายนอก ดังนั้น ลูคัส ขอบคุณที่เข้าร่วมกับฉัน

Lukas Haensch: ขอบคุณ John ขอบคุณที่มีฉัน

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

Lukas Haensch: ดีใจมากที่คุณถาม ดังนั้น ฉันคิดว่าอย่างแรกและสำคัญที่สุด ฉันคิดว่าแนวคิดหลักข้อหนึ่งที่ต้องคำนึงถึงคือ ทำไมเราถึงสนใจเรื่องความเร็วของหน้าเว็บด้วย สั้นมาก ทำไมเราถึงสนใจเรื่องนี้? หากคุณเปรียบเทียบสิ่งนี้กับร้านค้าปลีกของคุณ อาจเป็นการเปรียบเทียบที่ดีมากเมื่อเปรียบเทียบกับประตูบานเลื่อนในร้านค้าปลีกของคุณ ถ้านี่เปิด super super super slow กี่คนที่รอถึงจะผ่านจริง?

Lukas Haensch: เพียงแค่เก็บความคล้ายคลึงไว้ในใจของคุณเมื่อคุณทำสิ่งนี้ทั้งหมดในวันนี้ ดังนั้นฟีดหน้าจึงเป็นตัวเปิดประตูให้กับผู้ใช้ของคุณ มีเมตริกมากมายที่นั่น และฉันรู้ว่ามีนักการตลาดจำนวนมากฟังอยู่ โดยพื้นฐานแล้ว ผมจะให้เมตริกหนึ่งแก่คุณ ที่เราใช้ภายใน Google ในขณะที่เรากำลังทำงานกับลูกค้ารายใหญ่ที่สุดของ Google และนั่นคือดัชนีความเร็ว มีเมตริกมากมายที่คุณมีได้ เวลาในการโหลด การโหลดคำแรก เริ่มแสดงผลเมื่อใด

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

Lukas Haensch: และการกระทำอื่น ๆ ทั้งหมดจะไปจากที่นั่น เนื่องจากการเรียกร้องให้ดำเนินการอยู่ที่นั่นแล้ว ภาพลักษณ์ของฮีโร่จะอยู่ที่นั่นแล้ว และจากนั้น ทุกสิ่งทุกอย่างก็แผ่ออกมาจากที่นั่น ดังนั้นดัชนีความเร็วจึงเป็นสิ่งที่คุณสามารถรับได้ง่ายมาก มีเครื่องมือที่เรียกว่าเว็บเพจtest.org สร้างขึ้นจากใน Google จริงๆ ไม่ใช่เครื่องมือของ Google อย่างเป็นทางการในแง่นั้น แต่สร้างขึ้นจากทีมงานภายใน Google เพื่อดูเว็บไซต์ความเร็วของหน้าเว็บ

Lukas Haensch: และถ้าคุณใส่ URL ลงในนั้นแล้วคุณจะได้เมตริกที่เรียกว่าดัชนีความเร็วหน้าเว็บและจะบอกคุณบางอย่างเช่น 3000 หรือ 4,000 และนั่นเป็นมิลลิวินาที ดังนั้น หากคุณมีดัชนีความเร็วหน้าเว็บ 3000 แสดงว่าคุณอยู่ในครึ่งหน้าบน เนื้อหาจะโหลดเต็มหลังจากสามวินาที นั่นเป็นสิ่งที่ดีจริงๆ ที่ควรให้ความสนใจ

John Jantsch: พูดใหม่อีกครั้งนะ เว็บเพจtest.org?

Lukas Haensch: ถูกต้อง Webpagetest.org เป็นเหมือนเว็บไซต์สีน้ำเงินเข้มที่คุณสามารถใส่พารามิเตอร์สองสามตัว คุณสามารถเลือกเครือข่ายได้ ซึ่งเป็นสิ่งสำคัญมากที่จะเลือก คุณต้องเลือกสิ่งที่เหมาะสมสำหรับฐานผู้ใช้ของคุณ ไม่ใช่ทุกคนที่อยู่ใน 5G และไม่ใช่ทุกคนที่อยู่บน 4G อาจฟังดูตลก แต่เมื่อเราทำสิ่งนี้เมื่อประมาณสองปีที่แล้ว หนึ่งปีครึ่งใน Google ที่แล้ว จริงๆ แล้ว เรากำลังทดสอบ 3G ที่เร็วอยู่เรื่อยๆ เพราะฐานผู้ใช้ขนาดใหญ่เช่นนั้นจริง ๆ แล้วช้ากว่าและ อุปกรณ์ปลายล่าง ดังนั้น การทดสอบ wifi ในสำนักงานของคุณอาจไม่ใช่สิ่งที่ดีที่สุดที่ควรทำ

John Jantsch: คุณพบที่ไหนหรือสิ่งที่คุณพบว่าเป็นผู้กระทำผิดที่ใหญ่ที่สุด ฉันหมายความว่าไซต์นั้นทำงานช้า

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

Lukas Haensch: คุณจะเห็นได้ว่าจริง ๆ แล้วถ้าคุณไปที่หน้าเว็บเพจtest.org คุณจะสามารถเห็นได้อย่างชัดเจนเพราะว่าโดยพื้นฐานแล้วเป็นเวอร์ชันที่ช้าลงในการโหลดหน้าเว็บของคุณ คุณจะเห็นในอันที่สอง เรามีหน้าจอสีขาว ในวินาทีที่ 1.5 เรามีหน้าจอสีขาว และอื่นๆ จนกว่าคุณจะแสดงเนื้อหาแรกจริงๆ ดังนั้น สิ่งที่ใหญ่ที่สุดที่ส่งผลกระทบ สิ่งเหล่านี้คือ ทุกสิ่งที่บล็อกการเรนเดอร์ เพราะถ้าคุณบล็อกการเรนเดอร์ คุณมีหน้ากว้าง และนั่นก็มักจะเป็นสองสามสิ่ง

Lukas Haensch: โดยค่าเริ่มต้น สิ่งนี้จะเป็นเช่นนั้นเสมอ เพราะมันเป็นเพียงการบล็อกการแสดงผล เป็น CSS และ JavaScript ของคุณในหน้าของคุณ โดยไม่ต้องลงรายละเอียดมากเกินไป แต่เมื่อใดก็ตามที่คุณมีบางอย่างที่มีจาวาสคริปต์จำนวนมากและสามารถเป็นเครื่องเล่นวิดีโอได้ มันสามารถเป็นภาพหมุนที่คุณมีข้อความทางการตลาดที่พลิกกลับที่ด้านบนของเว็บไซต์ของคุณ ซึ่งมักจะขับเคลื่อนโดยจาวาสคริปต์ .

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

Lukas Haensch: สิ่งสำคัญที่เราได้เรียนรู้และสื่อสารกันภายใน Google ตลอดเวลาคือ คุณไม่จำเป็นต้องทำการเปลี่ยนแปลงครั้งใหญ่เหล่านั้น โดยทั่วไปมีทุกไฟล์ที่คุณโหลดมีศักยภาพที่จะปรับปรุง เป็นไฟล์ CSS หรือไม่ มันอาจจะไม่จำเป็นในเวลานี้ สามารถโหลดได้ในภายหลัง เป็นไฟล์ JavaScript หรือไม่ สามารถเลื่อนออกไปได้ มันเป็นไฟล์ฟอนต์หรือไม่? อาจเป็นรูปแบบฟอนต์เก่า และอื่น ๆ และอื่น ๆ. คุณสามารถอ่านข้อเท็จจริงทั้งหมดและเห็นภาพได้ชัดเจน มีเคล็ดลับสำคัญอย่างหนึ่งที่ฉันคิดว่าเป็นประโยชน์สำหรับรูปภาพจริงๆ

Lukas Haensch: ฉันสามารถพูดได้ แต่ท้ายที่สุดแล้วมันเป็นเรื่องของแต่ละรายการและคุณในฐานะนักการตลาด ถ้าเป็นเช่นนั้น อาจเป็นสิ่งที่คุณไม่ได้ใช้งานตลอดเวลา แค่ไปที่หน้าเว็บtest.org ผ่านใน URL และคุณสามารถดูทีละขั้นตอนได้ ตกลง จริงๆ แล้วอะไรกำลังโหลดอยู่ และฉันจะเห็นอะไรบนหน้าจอของฉันได้บ้าง และนั่นจะทำให้คุณรู้สึกดีกับสิ่งที่เกิดขึ้นบนเพจของคุณ หากมีจาวาสคริปต์จำนวนมาก หากมีรูปภาพจำนวนมาก หากมีการโหลดไฟล์ที่ชื่นชอบในนั้นเป็นเวลานาน ทั้งหมดนั้น

John Jantsch: ฉันหมายถึงบทบาทอะไร ฉันรู้ว่าท้ายที่สุดแล้วมันมีบทบาท แต่โฮสติ้งมีบทบาทอย่างไรในการทำให้ไซต์ช้าลงหรือทำให้โหลดเร็วขึ้น

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

John Jantsch: คุณพบว่าระบบจัดการเนื้อหาบางระบบที่มีอยู่ในปัจจุบัน เห็นได้ชัดว่า WordPress เป็นที่นิยมมากที่สุด สิ่งเหล่านี้เป็นส่วนหนึ่งของปัญหาโดยเฉพาะอย่างยิ่งเมื่อผู้คนเริ่มเพิ่มธีมและปลั๊กอินและสิ่งเหล่านี้หรือไม่?

ลูคัส ฮานช์: 100% ฉันคิดว่าคุณต้องคิดว่าปลั๊กอินคืออะไร ปลั๊กอินนั้นเป็นชุดของ JavaScript ในหลาย ๆ กรณี แน่นอนว่ามันขึ้นอยู่กับว่ามันทำอะไร แต่ถ้ามาพร้อมฟังก์ชั่นเยอะก็ใช่ครับ ตัวอย่างเช่น และมันเป็นตรรกะเดียวกันกับที่ใช้ มาลองใช้ตรรกะของปลั๊กอินจาก WordPress กัน คุณกำลังโหลดปลั๊กอินสองสามตัว บางส่วนคุณไม่จำเป็นต้องมีในหน้านี้ บางรายการคุณจะต้องใช้เฉพาะในหน้าเดียวเท่านั้น หรือบางส่วนที่คุณต้องการเพียงที่ด้านล่างของหน้าของคุณ

Lukas Haensch: สิ่งที่คุณทำได้คือ คุณเป็นได้ และยังมีปลั๊กอินสำหรับเมตาปลั๊กอินประเภทนั้นด้วย แต่คุณยังสามารถเรียกใช้สิ่งนี้ผ่านรหัส คุณสามารถโหลดปลั๊กอินตามเงื่อนไขได้ ดังนั้น ถ้าการย้ายครั้งแรก หน้าจอกำลังโหลด ถ้าหน้าของฉันกำลังโหลด สิ่งที่คุณสามารถทำได้คือใช้ตัวโหลดครีมนวดผมสำหรับปลั๊กอิน แล้วเลือกและเลือกว่าควรโหลดปลั๊กอินใดจริง ๆ

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

Lukas Haensch: ดังนั้นนี่คือที่ที่การตลาดจะต้องนั่งร่วมกับนักพัฒนาและตรวจสอบ โอเค [ไม่ได้ยิน] ไฟล์ Java script จริงๆ ให้ฉันยกตัวอย่างสั้นๆ ให้คุณ คุณมี Java script ที่คุณต้องการในหน้าชำระเงิน JavaScript นั้นไม่จำเป็นต้องใช้เลยในสองสามวินาทีแรก ผู้ใช้ยังต้องไปถึงที่นั่น ดังนั้นจึงเป็นการรวมกัน จริงๆ แล้ว คุณดูที่ปลั๊กอิน [ไม่ได้ยิน 00:10:52] คุณดูที่จาวาสคริปต์ คุณพยายามเลื่อนบางอย่างออกไป และนี่คือวิธีที่คุณหั่นย่อยทีละวินาทีโดยพื้นฐาน

John Jantsch: ฉันได้ทำการทดสอบโดยใช้การทดสอบหน้าเว็บที่คุณแชร์ รวมทั้งข้อมูลเชิงลึกเกี่ยวกับความเร็วหน้าเว็บของ Google แล้ว และดูเหมือนว่าจะมีความแตกต่างกันอย่างมากในการโหลดมือถือกับเดสก์ท็อป อันที่จริง ฉันได้ทดสอบไซต์จำนวนมาก และไม่ค่อยพบไซต์ที่ได้รับคำวิจารณ์ที่เร่าร้อนจาก Google บนมือถือ มีสิ่งที่เราควรทำหรือไม่? ฉันหมายความว่าเราควร [ไม่ได้ยิน] เกือบแยกไซต์หรือแยกประสบการณ์สำหรับมือถือหรือไม่

Lukas Haensch: เป็นคำถามที่ดีมาก ฉันหมายถึง ฉันคิดว่าการโหลดบนมือถือ… ฉันหมายถึง เวลาในการโหลดบนมือถือมีความชัดเจนเป็นพิเศษ เนื่องจากอุปกรณ์ต่างๆ และเรากำลังเชื่อมต่อ ดังนั้นจึงมีจุดแตกหักมากกว่านั้น สมมุติว่า หรือมีจุดอื่นๆ ที่อาจตกอยู่ในอันตราย ทำให้ประสิทธิภาพลดลง ซึ่งหมายความว่า ถ้าฉันดูหน้ามือถือของฉัน ฉันคิดว่า และฉันคิดว่าแม้ใน WordPress คุณสามารถปรับเงื่อนไขการโหลดบางรายการของคุณให้ปฏิเสธ ไม่แสดงสิ่งนี้บนมือถือหรือแสดงบนมือถือ

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

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

Lukas Haensch: หรือเป็นเพียงเพราะการตลาดหรือคนอื่นต้องการมีข้อความหลายฉบับอยู่ที่นั่น? ดังนั้น ฉันจะพิจารณาอย่างแน่นอน โดยดูสิ่งของที่หนักและหนักเป็นพิเศษ เช่น วิดีโอ ฉันไม่ได้บอกว่าจะไม่ใช้วิดีโอ แต่มีวิธีที่ชาญฉลาดกว่าในการแสดงวิดีโอเช่นกัน Carousels รายการประเภทนี้จะเข้มงวดมากในการไม่ใช้งานบนมือถือ เนื่องจากโดยปกติแล้วจะไม่มีค่า UX ที่แข็งแกร่ง และแน่นอนว่าต้องใช้งบประมาณความเร็วเป็นจำนวนมาก

John Jantsch: หากคุณมีเว็บไซต์ หากคุณกำลังขายสินค้าออนไลน์อยู่ในปัจจุบัน คุณทราบดีว่ารูปภาพมีความสำคัญต่อการที่ผู้คนแสดงความคิดเห็นเกี่ยวกับผลิตภัณฑ์และบริการของคุณ pixelz.com ที่เป็น pixel กับ z.com เป็นบริการรีทัชภาพที่สามารถนำภาพทั้งหมดของคุณได้ พวกเขาสามารถรีทัช เพิ่มรูปร่างและสมมาตร กระแทกเรียบ ไหล่ชิด สิ่งต่าง ๆ เช่นนั้น ที่สามารถลดริ้วรอย ที่สามารถลดและลบแท็กผ้า ทุกสิ่งที่ดูเหมือนจะไม่พอดีจริงๆ หาคนทำเพื่อคุณ เร่งเวลาในการออกสู่ตลาดเพราะจะทำการรีทัชภาพของคุณในเช้าวันรุ่งขึ้น ไปที่ pixels.com นั่นคือ PIXELZ.com และค้นหาบริการด้านภาพที่น่าประทับใจ

John Jantsch: คุณช่วยพูดคุยเกี่ยวกับ AMP ในสมการนี้ หน้าเว็บสำหรับอุปกรณ์เคลื่อนที่แบบเร่งความเร็วโดยไม่ทำให้คนสนใจที่นี่ได้ไหม นั่นคือสิ่งที่ผู้คนควรใช้ เพื่อการโหลดที่ดีขึ้น ประสบการณ์ที่ดีขึ้น แต่แล้วคุณมีกราฟิกน้อยลง คุณควบคุมได้น้อยลงหรือไม่? แล้วคุณรู้สึกยังไงกับมัน?

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

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

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

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

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

Lukas Haensch: เช่น คุณสามารถแสดงบางสิ่งที่มีความหมายต่อบุคคลหนึ่งๆ ได้หรือไม่ ซึ่งหมายความว่าพวกเขาจะไม่จากไปเพราะไม่เห็นบางสิ่งบางอย่าง พวกเขาจะจากไปด้วยเหตุผลอื่น ดังนั้น 53% มีตัววัดอื่นๆ อีกเป็นตันเกี่ยวกับวิธีการที่มีตัววัด หากคุณโหลดเร็วขึ้นหนึ่งวินาที อัตรา Conversion จะเพิ่มขึ้นประมาณ 20% หรือมากกว่านั้น การเปิดตัวเป็นเรื่องยากสำหรับฉัน ขึ้นอยู่กับกรณีการใช้งานและปริมาณการใช้งานที่คุณได้รับ แต่ฉันคิดว่า 53% นี้หากคุณไม่ลดการเรียนรู้ให้เร็วกว่าสามวินาที เป็นสิ่งที่ดีจริงๆ ที่คุณควรมีไว้ในใจ ในกรณีของคุณ 100% หรือไม่นั่นเป็นอีกเรื่องหนึ่งเกี่ยวกับเรื่องนั้น

John Jantsch: ฉันคิดว่ามันแสดงให้เห็นเหตุผลเหล่านั้น หลายครั้งที่บางธุรกิจ นักการตลาดมีช่วงความสนใจด้านงบประมาณเท่านั้น เวลาทำงานเกี่ยวกับสิ่งต่างๆ และฉันคิดว่า ฉันคิดว่ามันสำคัญสำหรับพวกเขาที่จะต้องตระหนักว่า เหตุใดสิ่งนี้จึงควรให้ความสำคัญเป็นอันดับแรก และฉันคิดว่านั่นเป็นตัวชี้วัดที่ดีสำหรับเรื่องนั้น

ลูคัส ฮานช์: 100% เช่น ถ้าคุณเปิดร้านขายปลีก ถ้าประตูของคุณไม่เปิด เหมือนกับว่าคุณจะกระโดดเข้าไปทันที

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

Lukas Haensch: ใช่ และหากเป็นเช่นนั้น ก็มักจะเป็นเวอร์ชันแคช เวอร์ชันแคชหรือบน wifi พยายามทำอย่างนั้นจริงๆ ใช้เครื่องมืออย่างเช่น หรือใช้ Chrome แทนก็ได้ แต่ให้ไปที่หน้าเว็บtest.org และทดสอบเพียงเพื่อดูตัวเอง ประสบการณ์ที่คนส่วนใหญ่มีกับเว็บไซต์ของคุณเป็นอย่างไร

John Jantsch: ฉันรู้ว่า Google ไม่จำเป็น ให้รายการปัจจัยทั้งหมดที่พวกเขาใช้ในการจัดอันดับ แต่ฉันคิดว่ามันค่อนข้างเป็นที่ยอมรับกันโดยทั่วไปว่าความเร็วของหน้าหรือความเร็วของหน้าไม่เพียงพอเป็นตัวแปรในการที่หน้าเว็บของคุณมีการจัดอันดับหรือไม่ คุณสามารถพูดกับที่?

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

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

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

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

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

Lukas Haensch: ขอยกตัวอย่างสักหนึ่งหรือสองตัวอย่างที่อาจเน้นเรื่องนี้อย่างมาก หลายคนพยายามปรับภาพลักษณ์ฮีโร่ของตนให้เหมาะสม สิ่งที่คุณสามารถทำได้ง่ายๆ อย่างที่คุณทำได้ คุณถ่ายภาพฮีโร่ของคุณ คุณสามารถถ่ายโอนไปยังสมมติว่าเป็นสตริงของโค้ด มันถูกเรียกว่าฐาน 64 ในการเข้ารหัส และในทันใดคุณสามารถส่งภาพฮีโร่ของคุณด้วยคำขอแรกในไฟล์ HTML ของคุณ ฉันแค่พยายามจะบอกคุณคือ ไม่ต้องทำการเปลี่ยนแปลงครั้งใหญ่

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

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

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

John Jantsch: ในการแนะนำตัว เราได้กล่าวไว้ว่า คุณเพิ่งก่อตั้งบริษัทที่ชื่อว่า Pathmonk ท่านอยากจะเล่าให้เราฟังสักเล็กน้อยว่าพระพุทธองค์ทำอะไรได้บ้าง

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

Lukas Haensch: ดังนั้นเราจึงเห็นว่ามีช่องว่างขนาดใหญ่ในการทำความเข้าใจข้อมูลที่ไม่ระบุตัวตนแบบย้อนหลัง เช่น ข้อมูลการวิเคราะห์ของ Google หรือการดู วิดีโอแผนที่ความร้อน เช่น พฤติกรรมของใครบางคน แต่เราพบว่ามีช่องว่างที่ในเวลาจริง เป็นเรื่องยากสำหรับคนที่จะตอบสนองต่อสิ่งนี้ในทันที จะเกิดอะไรขึ้นหากผู้ใช้ X อยู่ในหน้าเว็บและได้กระทำการที่ดูเหมือนว่าพวกเขาจะเป็นคนที่ทำ Conversion คุณจะตอบสนองต่อตลาดได้หรือไม่ และเราพบว่าตลาดส่วนใหญ่เป็นปัจจุบัน

Lukas Haensch: ดังนั้น เราจึงสร้าง โดยพื้นฐานแล้ว เทคโนโลยีที่เรียกว่าสมาร์ทการ์ด ซึ่งโดยทั่วไปแล้ว จะช่วย โดยอิงจากปัญญาประดิษฐ์โดยอัตโนมัติ เรียนรู้สิ่งที่ผู้ใช้ทำบนหน้าเว็บ รูปแบบที่น่าจะเป็นสำหรับการแปลงคืออะไร ผู้ใช้มีเจตนาใดเมื่ออยู่ในหน้าเว็บ จากนั้นเราจะแสดงเนื้อหาเกี่ยวกับผลิตภัณฑ์ของคุณ เช่น คำถามที่พบบ่อย คำรับรอง กรณีศึกษาเกี่ยวกับสิ่งที่เราเรียกว่าสมาร์ทการ์ดที่มีการเลื่อนและจากด้านล่างหรือด้านบน และโดยพื้นฐานแล้วนี่คือวิธีที่เราปล่อยให้เว็บไซต์ตอบสนองต่อสิ่งที่เกิดขึ้นบนหน้าเว็บตามเวลาจริง โดยที่ผู้เยี่ยมชมแต่ละรายให้ถึงระดับว่าผลิตภัณฑ์หรือคุณลักษณะประเภทใดที่พวกเขาสนใจ

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

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

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

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

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

John Jantsch: อืม ลูคัส ขอบคุณมากที่เข้าร่วมกับเราและพูดคุยเกี่ยวกับความเร็วของหน้า และหวังว่าเราจะพบคุณในไม่ช้านี้บนท้องถนน

Lukas Haensch: ขอบคุณมาก ขอบคุณที่มีฉัน