อนาคตของฟรอนต์เอนด์อีคอมเมิร์ซและผลกระทบต่อรายได้ของคุณอย่างไร

เผยแพร่แล้ว: 2022-03-02

ด้วยการเพิ่มขึ้นของสมาร์ทโฟนและ LTE ทำให้การซื้อสินค้าผ่านอุปกรณ์พกพามีสัดส่วนมากกว่า 49% ของยอดขายอีคอมเมิร์ซ ในช่วงสุดสัปดาห์ Black Friday/Cyber ​​Monday มูลค่าหลายพันล้านดอลลาร์ของปีที่แล้ว ตัวเลขดังกล่าวพุ่งสูงขึ้นไปอีก โดย 69% ของยอดขายวางบนโทรศัพท์หรือแท็บเล็ต

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

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

ทำไมคุณควรดูแลเกี่ยวกับส่วนหน้า

ด้วยเหตุผลสามประการ:

  • การเลือกเทคโนโลยีฟรอนท์เอนด์ของคุณจะส่งผลต่อความเร็วของเพจบนมือถือของคุณ
  • ความเร็วของหน้าเว็บบนมือถือส่งผลต่ออัตราการแปลงของคุณ และ
  • อัตราการแปลงของคุณส่งผลต่อรายได้ของคุณใน ที่สุด

มาแนบตัวเลขจริงกับสถานการณ์นี้ โดยยกตัวอย่างจาก Neil Patel: สมมติว่าคุณเปิดร้านค้าออนไลน์ที่ดึงตัวเลขหกหลักต่อวัน เราทราบดีว่าการตอบกลับหน้าเว็บล่าช้า 1 วินาทีอาจส่งผลให้ Conversion ลด ลง 7% ตามความเห็นของ Patel “หากเว็บไซต์อีคอมเมิร์ซทำเงินได้ 100,000 ดอลลาร์ต่อวัน ความล่าช้าของหน้าหนึ่งวินาทีอาจทำให้คุณต้องเสียยอดขาย 2.5 ล้านดอลลาร์ทุกปี”

ทำซ้ำ: สูญเสียยอดขาย นับล้านดอลลาร์ทุกปี

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

#cta-visual-fe#<cta-title>The Most Flexbile Frontend in Commerce<cta-title>Shogun Frontend ได้รับการออกแบบมาเพื่อช่วยคุณสร้างร้านค้าออนไลน์ที่มีประสิทธิภาพและเหมาะสมที่สุดสำหรับลูกค้าของคุณ เรียนรู้เพิ่มเติม

ความเร็วส่งผลต่อประสิทธิภาพการทำงานของอุปกรณ์พกพาอย่างไร

กราฟที่แสดงให้เห็นว่าการโหลดหน้าเว็บส่งผลต่อประสิทธิภาพของอุปกรณ์เคลื่อนที่อย่างไร

ตกลง — ความสำคัญของการเพิ่มประสิทธิภาพมือถือเป็นที่รู้จักกันดีของทุกคนที่ทำงานในอีคอมเมิร์ซ

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

นี่คือสถิติที่สำคัญบางส่วน:

  • ผู้ใช้ห้าสิบสามเปอร์เซ็นต์จะละทิ้งไซต์หากใช้เวลาในการโหลดนานกว่าสามวินาที
  • เจ็ดสิบเก้าเปอร์เซ็นต์ของนักช็อปออนไลน์ที่พบว่าเว็บไซต์มีประสิทธิภาพต่ำกล่าวว่าพวกเขาจะไม่กลับมาที่ไซต์นั้นเพื่อซื้ออีก
  • และเพื่อเป็นการเตือนความจำจากก่อนหน้านี้ ความล่าช้าหนึ่งวินาทีในการตอบสนองหน้าเว็บอาจส่งผลให้ Conversion ลดลง 7%

มันคือทั้งหมดที่เกี่ยวกับอัตราตีกลับ เปอร์เซ็นต์ของผู้เข้าชมที่ออกจากเว็บไซต์หลังจากเข้าสู่เว็บไซต์

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

ต่อไปนี้คือข้อมูลอัตราตีกลับและเวลาในการโหลด:

สถิติเกี่ยวกับผลกระทบของเวลาในการโหลดหน้าเว็บที่รวดเร็วในอีคอมเมิร์ซ
  • ระหว่างหนึ่งวินาทีถึงสามวินาที ความน่าจะเป็นที่จะตีกลับเพิ่มขึ้น 32%
  • ‍ระหว่างหนึ่งวินาทีถึงห้าวินาที ความน่าจะเป็นที่จะตีกลับเพิ่มขึ้น 90%
  • ระหว่าง 1 วินาทีถึง 10 วินาที ความน่าจะเป็นที่จะกระเด้งเพิ่มขึ้น 123%

หากคุณกังวลว่าประสิทธิภาพมือถือของคุณอ่อนแอ คุณมีเหตุผลที่จะต้องกังวล

“ข้อมูลของเราแสดงให้เห็นว่าแม้ว่าการเข้าชมเว็บโดยรวมมากกว่าครึ่งหนึ่งมาจากอุปกรณ์เคลื่อนที่ แต่อัตรา Conversion ของอุปกรณ์เคลื่อนที่นั้นต่ำกว่าเดสก์ท็อป” Daniel An อดีตหัวหน้าฝ่ายผลิตภัณฑ์ระดับโลก เว็บบนมือถือของ Google เขียน “โดยย่อ ความเร็วเท่ากับรายได้”

ความเร็วเท่ากับรายได้ — นั่นมาจาก Google

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

แต่ก่อนที่เราจะข้ามไปสู่อนาคตของเทคโนโลยีฟรอนท์เอนด์อีคอมเมิร์ซ เรามาพิจารณาอดีตและปัจจุบันกันก่อน

ภาพกราฟิกของแบรนด์โชกุนฟรอนท์เอนด์

วิธีการสร้างส่วนหน้าของอีคอมเมิร์ซตามธรรมเนียม

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

  1. รหัสที่กำหนดเอง
  2. ธีม
  3. ผู้สร้างเพจ
  4. ผู้จัดการประสบการณ์

มาแยกแต่ละอันกันเถอะ

1. รหัสที่กำหนดเอง

HTML, CSS, อาจเป็น JavaScript เล็กน้อย… นี่คือการสร้างเว็บไซต์ที่กำหนดเองโดยสมบูรณ์

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

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

เว็บไซต์ต้องการการรีเฟรชแบบเต็มหน้าระหว่างการคลิกหน้า — และเมื่อมีการเชื่อมต่อที่จำกัด หรือหากหน้ามีเนื้อหามากเกินไป หรือหากคุณทำการเรียก API จำนวนมาก (เมื่อเว็บไซต์ต้องการดึงข้อมูลจากบุคคลที่สาม เช่นเดียวกับวิดเจ็ตบทวิจารณ์) ความเร็วของหน้าเว็บได้รับผลกระทบในทางลบ

2. ธีม

ธีมคือเทมเพลตโค้ดที่สร้างไว้ล่วงหน้าสำหรับส่วนหน้าของเว็บไซต์ที่สร้างโดยนักพัฒนาหรือหน่วยงานพัฒนา

มันเหมือนกับสมุดระบายสี/สถานการณ์การระบายสีทีละตัวเลข: คุณจะได้โครงร่างของเว็บไซต์และรากฐานที่มั่นคง แม้ว่าคุณจะต้องการนักพัฒนาซอฟต์แวร์หรือผู้ที่มีความรู้ด้าน HTML/CSS ที่เหมาะสมเพื่อปรับแต่งรูปลักษณ์ ธีมได้รับความนิยมจากแพลตฟอร์มอีคอมเมิร์ซ เช่น Shopify, WordPress และ BigCommerce

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

3. ผู้สร้างเพจ

ข้อจำกัดความรับผิดชอบ: มีความลำเอียงอยู่บ้าง เนื่องจากบริษัทของฉัน Shogun มีผลิตภัณฑ์สร้างเพจที่ประสบความสำเร็จอย่างมาก

ผู้สร้างเพจอนุญาตให้ผู้ที่ไม่ใช่ผู้เชี่ยวชาญในการออกแบบและใช้งานเว็บไซต์ การใช้ "ตัวสร้าง" แบบภาพ โดยทั่วไปจะมีไลบรารีขององค์ประกอบต่างๆ (ตัวเลื่อน รูปภาพ ฟีด Instagram ฯลฯ) ผู้ใช้สามารถลากและวางลงบนหน้า แล้วจัดรูปแบบโดยใช้การควบคุมแบบไม่มีโค้ด (ตัวเลือกสี ขนาดฟอนต์ ระยะขอบ ช่องว่างภายใน ฯลฯ)

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

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

4. ผู้จัดการประสบการณ์

ซอฟต์แวร์การจัดการประสบการณ์เป็นซอฟต์แวร์ประเภทหนึ่งที่เน้นส่วนหน้าซึ่งให้บริการทั้งฟังก์ชันการจัดการเนื้อหาและฟังก์ชันประสบการณ์ดิจิทัล การจัดการประสบการณ์ดิจิทัลมักหมายถึงเครื่องมือที่เกี่ยวข้องกับการปรับเปลี่ยนให้เป็นส่วนตัวและการทดสอบหลายตัวแปร (การทดสอบ A/B) ชื่อที่คุณอาจรู้จัก: Sitecore, Acquia และ Episerver เป็นต้น

แม้ว่าซอฟต์แวร์เหล่านี้จะมีประสิทธิภาพสูงสุด แต่ก็ยังมีปัญหามากมาย ได้แก่:

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

ความซับซ้อนของซอฟต์แวร์เหล่านี้ไม่สามารถพูดเกินจริงได้ ฉันได้ยินมาว่าผู้ให้บริการรายใหญ่สามารถรองรับลูกค้าที่ปิดได้เพียง 50% เท่านั้น

#cta-visual-fe#<cta-title>The Most Flexbile Frontend in Commerce<cta-title>Shogun Frontend ได้รับการออกแบบมาเพื่อช่วยคุณสร้างร้านค้าออนไลน์ที่มีประสิทธิภาพและเหมาะสมที่สุดสำหรับลูกค้าของคุณ เรียนรู้เพิ่มเติม

เทคโนโลยีล้ำยุคที่เน้นการช็อปปิ้งบนมือถือ

นี่คือสามสิ่งที่สำคัญ:

  1. แอปพลิเคชั่นมือถือดั้งเดิม
  2. หน้ามือถือเร่ง
  3. แอปพลิเคชั่นเว็บโปรเกรสซีฟ

มาดูทีละอย่างกัน

1. แอปพลิเคชั่นมือถือดั้งเดิม

เราทุกคนต่างคุ้นเคยกับแอพมือถือที่มาพร้อมเครื่อง พวกเราหลายคนมีแอพ Facebook, แอพ Spotify และ อะแฮ่ม, แอพ Amazon ติดตั้งบนโทรศัพท์ของเราแล้ว แอพมือถือเป็นแอพมือถือเฉพาะอุปกรณ์ที่ติดตั้งผ่านตลาดเช่น App Store หรือ Google Play

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

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

แม้หลังจากติดตั้งแล้ว การต่อสู้ยังไม่จบสำหรับแอปมือถือที่มาพร้อมเครื่อง ตัวอย่างเช่น ผู้เข้าชม PWA ของ Flipkart เกือบ 60% เคยถอนการติดตั้งแอปที่มาพร้อมเครื่องเพื่อประหยัดพื้นที่เป็นหลัก

2. หน้ามือถือเร่ง (AMP)

AMP เป็นเฟรมเวิร์กโอเพ่นซอร์สที่พัฒนาโดย Google และมีมาตั้งแต่ต้นปี 2016 หน้าเว็บเหล่านี้โหลดได้แทบจะในทันทีด้วยภาษาเขียนโค้ดที่ไม่ซ้ำกันและโฮสต์อยู่บน CDN ซึ่งส่งเวอร์ชันแคชของหน้า

การค้นพบได้เป็นประโยชน์หลักของ AMP โดยจะปรากฏในภาพหมุนในผลการค้นหาของ Google ในขณะที่ "AMP รองรับเฉพาะเนื้อหาที่มีน้ำหนักเบา" นั่นหมายถึงเวลาในการโหลดที่เร็วขึ้นตาม Instapage

จากที่กล่าวมา สิ่งใด ๆ แบบโต้ตอบที่ต้องใช้ JavaScript ไม่สามารถสร้างโดยใช้เฟรมเวิร์ก AMP ได้ สำหรับ AMP เนื้อหาไดนามิกจะไม่อยู่ในตาราง

AMP ใช้ได้กับหน้า Landing Page ที่มีฟังก์ชันจำกัดมาก แต่ไม่ใช่สำหรับประสบการณ์อีคอมเมิร์ซที่แท้จริงที่มีการโต้ตอบแบบไดนามิกมากขึ้น

3. เว็บแอปพลิเคชันโปรเกรสซีฟ (PWA)

PWAs คือประสบการณ์ร้านค้าออนไลน์บนมือถือที่ออกแบบมาให้ดู สัมผัส และทำงานได้เหมือนที่แอพมือถือดั้งเดิมทำ แต่ในเบราว์เซอร์ ไม่จำเป็นต้องดาวน์โหลด App Store

Google กำหนด Progressive Web App ว่ามีหลักสามประการนี้ ซึ่งจัดโดย BluEnt:

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

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

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

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

หมายเหตุด้านข้าง: แม้ว่า "หัวขาด" อาจดูเหมือนเป็นแนวคิดที่ซับซ้อน แต่โดยพื้นฐานแล้วหมายความว่ามีการใช้เทคโนโลยีที่แตกต่างกันสำหรับส่วนหน้าของร้านค้าออนไลน์ (ซึ่งผู้ซื้อส่วนสามารถมองเห็นได้) มากกว่าจากแบ็กเอนด์ซึ่งโดยทั่วไปสร้างขึ้นบนแพลตฟอร์มอีคอมเมิร์ซ เช่น Shopify, BigCommerce, Salesforce หรือ Magento

แอปพลิเคชันเว็บโปรเกรสซีฟถูกสร้างขึ้นอย่างไร

Progressive Web Application บิวด์เกี่ยวข้องกับองค์ประกอบหลักเหล่านี้:

  1. นักพัฒนาที่รู้จักกรอบงาน JavaScript เช่น React หรือ Vue
  2. เฟรมเวิร์ก SSR เช่น Gatsby หรือ Nuxt
  3. CDN ที่สามารถสร้าง PWAs เช่น Netlify
  4. CMS ที่ไม่มีส่วนหัว เช่น Prismic หรือ Contentful
  5. มิดเดิลแวร์เพื่อเชื่อมต่อข้อมูล Shopify ของคุณ เช่น Nacelle
  6. วิธีเพิ่มการผสานการทำงานกับบุคคลที่สามทั้งหมดด้วยตนเอง เช่น Yotpo หรือ Klaviyo

สำหรับ ผู้อ่านด้านเทคนิค - มาเจาะลึกถึงจุดประสงค์ของกองเทคโนโลยีนี้กัน:

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

สำหรับ ผู้อ่านที่ไม่ใช้เทคนิค — คุณอาจรู้สึกหนักใจเล็กน้อยกับโอกาสที่จะดำเนินการด้านเทคนิคนี้ คุณไม่ได้โดดเดี่ยว! นักพัฒนาเว็บและเอเจนซี่มืออาชีพหลายคนรู้สึกเหมือนกัน

ซึ่งนำฉันไปสู่ความไร้ยางอายสำหรับผลิตภัณฑ์ล่าสุดของโชกุน Shogun Frontend ผู้จัดการประสบการณ์อันทรงพลังและ CMS ที่แสดงส่วนหน้าของร้านค้าของคุณเป็นโปรเกรสซีฟเว็บแอปพลิเคชันย่อยวินาที เราได้นำสถาปัตยกรรมทางเทคนิคที่ซับซ้อนดังกล่าวมาผลิตเป็น SaaS (ซอฟต์แวร์เป็นบริการ) เพิ่มเติมเกี่ยวกับที่ในบิต

แอปพลิเคชั่นเว็บโปรเกรสซีฟ: ผลลัพธ์

บริษัทต่างๆ ที่ดำเนินการ กปภ. ได้เห็นผลลัพธ์ที่น่าประทับใจตลอดเส้นทาง ข้อค้นพบบางส่วนในอุตสาหกรรมต่างๆ (สถิติ H/T Cloud Four และ PWA สำหรับการจัดระเบียบข้อมูลนี้):

  • PWA ของ Petlove พบว่าทั้ง Conversion เพิ่มขึ้น 2.8 เท่า และเวลาที่ใช้ในไซต์ (วิดีโอ) เพิ่มขึ้น
  • PWA ของ West Elm มีรายได้ต่อการเข้าชมเพิ่มขึ้น 9% และเวลาที่ใช้ในไซต์โดยเฉลี่ย (วิดีโอ) เพิ่มขึ้น 15%
  • PWA ของ Flipkart รับผิดชอบ 50% ของการหาลูกค้าใหม่ (ผู้เยี่ยมชมหกสิบเปอร์เซ็นต์ได้ลบแอพเนทีฟก่อนหน้านี้เพื่อประหยัดพื้นที่บนอุปกรณ์ของพวกเขา)
  • Lancome มีการเติบโตอย่างมากหลังจากปรับปรุงเว็บไซต์บนมือถือเป็น PWA ตามกรณีศึกษาของ Google นี้: ผู้ค้าปลีกด้านความงามได้รับ Conversion เพิ่มขึ้น 17% เซสชันอุปกรณ์เคลื่อนที่โดยรวมเพิ่มขึ้น 51% และผลลัพธ์ที่น่าประทับใจอื่นๆ

นี่เป็นเพียงเศษเสี้ยวของผลลัพธ์ที่บริษัทอีคอมเมิร์ซได้เห็นหลังจากสร้างส่วนหน้าร้านค้าออนไลน์ใหม่เป็น Progressive Web Application ฉันชอบติดตามดูกรณีศึกษาขนาดเล็กเกี่ยวกับ Cloud Four และ PWA Stats และในบล็อก Google Developers

คำแนะนำสำหรับการปรับปรุงประสิทธิภาพมือถือของคุณ

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

  • ใช้ Google PageSpeed ​​Insights เพื่อวินิจฉัยปัญหาของคุณ เป็นเครื่องมือฟรีที่ Google มีให้เพื่อตรวจสอบความเร็วหน้าเว็บและตรวจทานปัญหาที่อาจทำให้โหลดช้าลง
  • ลบแอพของบุคคลที่สามที่ไม่จำเป็นออกจากร้านค้าของคุณ การเรียก API ไปยังแอปเหล่านั้นอาจทำให้เกิดการลากครั้งใหญ่ และมักจะสามารถแทรกโค้ดลงในธีมของคุณ ซึ่งจะขยายฐานโค้ดและทำให้ไซต์ของคุณช้าลง
  • เปลี่ยนวิธีการแสดงภาพของคุณ “รูปแบบรูปภาพ เช่น JPEG 2000, JPEG XR และ WebP มักจะให้การบีบอัดได้ดีกว่า PNG หรือ JPEG ซึ่งหมายความว่าดาวน์โหลดเร็วขึ้นและใช้ข้อมูลน้อยลง” (ข้อความเตือนของ Google)
  • ใช้การโหลดแบบ Lazy Loading “พิจารณาการโหลดแบบ Lazy Loading นอกจอและภาพที่ซ่อนอยู่หลังจากทรัพยากรที่สำคัญทั้งหมดเสร็จสิ้นการโหลดเพื่อลดเวลาในการโต้ตอบ” (ข้อความเตือนของ Google) Shogun Page Builder นำเสนอการโหลดแบบ Lazy Loading ทันทีที่ออกจากกล่อง เช่นเดียวกับบางธีม

อย่างไรก็ตาม หากคุณเป็นบริษัทอีคอมเมิร์ซที่สร้างรายได้อย่างจริงจัง (มากกว่า 3 ล้านเหรียญสหรัฐในรายได้ประจำปี) ให้พิจารณาลงทุนในเทคโนโลยีรุ่นต่อไปสำหรับส่วนหน้าของคุณ

หากคุณมีรายได้ต่อปี $5 ล้าน และคุณสามารถเพิ่มอัตรา Conversion ได้ 5% โดยลบเวลาในการโหลดทั้งหมดระหว่างการคลิกบนไซต์ของคุณ แสดงว่าคุณกำลังทำเงินเพิ่มอีก $250K ต่อปี

หากคุณมีรายได้ต่อปี 50 ล้านดอลลาร์ และคุณสามารถเพิ่มอัตรา Conversion ได้ 5% โดยลบเวลาในการโหลดทั้งหมดระหว่างการคลิกบนไซต์ของคุณ แสดงว่าคุณกำลังทำเงินเพิ่มอีก 2.5 ล้านดอลลาร์ต่อปี

ผลตอบแทนจากการลงทุนค่อนข้างชัดเจน

แนวทางการสร้าง กปภ. ตั้งแต่ต้น ได้กล่าวไว้ข้างต้น อย่างไรก็ตาม หากคุณต้องการใช้ซอฟต์แวร์ที่สามารถสร้าง PWA และให้บริการทั้งการจัดการประสบการณ์ที่ซับซ้อนและความต้องการในการจัดการเนื้อหา Shogun Frontend ก็คุ้มค่าที่จะลองดู

Shogun Frontend เป็นระบบจัดการเนื้อหาที่ทรงพลังอย่างเหลือเชื่อและผู้จัดการประสบการณ์ที่สร้างขึ้นมาโดยเฉพาะสำหรับบริษัทอีคอมเมิร์ซ และผลลัพธ์ที่ได้คือเว็บแอปพลิเคชันโปรเกรสซีฟ React.JS ที่ใช้เวลาเพียงไม่กี่วินาที เป็นรูปแบบของการค้าขายที่ไม่มีหัวซึ่งทำงานได้อย่างราบรื่นกับแพลตฟอร์มเช่น Shopify, BigCommerce, Salesforce และ Magento และทำให้เว็บไซต์อีคอมเมิร์ซที่เร็วที่สุดบนอินเทอร์เน็ต

#cta-visual-fe#<cta-title>The Most Flexbile Frontend in Commerce<cta-title>Shogun Frontend ได้รับการออกแบบมาเพื่อช่วยคุณสร้างร้านค้าออนไลน์ที่มีประสิทธิภาพและเหมาะสมที่สุดสำหรับลูกค้าของคุณ เรียนรู้เพิ่มเติม