แอป React หรือ Next.js ของคุณทำงานช้าลงทีละเวอร์ชัน ขนาดของบันเดิลเพิ่มขึ้น รูปภาพถูกส่งในขนาดเต็ม สคริปต์ของบุคคลที่สามบล็อกการแสดงผลครั้งแรก รายการถูกเรนเดอร์ใหม่ทุกครั้งที่กดแป้นพิมพ์ ฉันจะวัดว่าสิ่งใดที่ทำให้ผู้ใช้ของคุณเสียเวลาจริง ๆ จากนั้นแก้ไขสิ่งที่ควรแก้ไข
ฉันจะจัดทำโปรไฟล์แอป React หรือ Next.js ของคุณและทำให้เร็วขึ้น พร้อมตัวเลข
Lighthouse และโปรไฟล์ในหน้าเดียวของแอปของคุณ ผลการค้นหาจัดอันดับตามผลตอบแทน
- หนึ่งหน้าโปรไฟล์, จัดอันดับ
การตรวจสอบ จากนั้นแก้ไขที่ทำให้ตัวเลขเคลื่อนไหว วัดผลก่อนและหลัง
- ตรวจสอบและแก้ไขหลัก
- ซอร์สโค้ด
สูงสุด 5 เส้นทาง การเรนเดอร์และการแคช งบประมาณบันเดิลใน CI การเปรียบเทียบแบบเต็ม
- ส่งบอลลึก, สูงสุด 5 เส้นทาง
- ซอร์สโค้ด
ขอข้อเสนอที่กำหนดเอง
เข้าสู่ระบบเพื่อขอข้อเสนอที่กำหนดเอง
สร้างบัญชีฟรีหรือเข้าสู่ระบบเพื่อขอข้อเสนอส่วนบุคคลจาก Zinner นี้
เข้าสู่ระบบ / ลงทะเบียนถามคำถามก่อนการขาย
เข้าสู่ระบบเพื่อถามคำถาม
เพื่อลดสแปมบนแพลตฟอร์ม ข้อความก่อนการขายสามารถส่งได้โดยผู้ใช้ที่เข้าสู่ระบบเท่านั้น
สร้างบัญชีฟรีหรือเข้าสู่ระบบเพื่อส่งข้อความถึง Zinner นี้โดยตรง
เข้าสู่ระบบ / ลงทะเบียนโดยสรุป
รายละเอียดสำคัญเกี่ยวกับบริการนี้เพื่อช่วยคุณตัดสินใจ สร้างโดย Zinn Hub ไม่ใช่ผู้ขาย
ตำแหน่งคุณค่า
Measurement Approach
เฟรมเวิร์กที่ครอบคลุม
Metrics Reported
วิธีการจัดส่ง
สิ่งที่คุณจะได้รับ
คำอธิบายฉบับเต็ม
สั่งซื้อสิ่งนี้หากคุณคิดว่าหน้าเว็บที่ช้ากำลังทำให้คุณเสียการสมัครสมาชิกหรือการเข้าชมจากการค้นหา และคุณต้องการเก็บแอปที่คุณมี React และ Next.js มีสิ่งที่แอปที่รวดเร็วต้องการส่วนใหญ่แล้ว ดังนั้นผลกำไรจึงมาจากการใช้เครื่องมือเหล่านั้นให้ดีมากกว่าการเปลี่ยนสแต็ก
คุณจะได้รับตัวเลข ไม่ใช่คำคุณศัพท์: LCP, CLS, INP และขนาดบันเดิลต่อเส้นทาง วัดก่อนและหลังบนการเชื่อมต่อที่ถูกจำกัดความเร็วเดียวกัน ในตารางเดียว
Starter คือการตรวจสอบหน้าเดียว: การรัน ผลการค้นหาจัดอันดับตามผลตอบแทน ไม่มีการเปลี่ยนแปลงโค้ด Standard เริ่มต้นจากการตรวจสอบนั้นและใช้เวลาที่เหลือในการแก้ไขที่ทำให้ตัวเลขเหล่านั้นเคลื่อนไหว Advanced ครอบคลุมสูงสุด 5 เส้นทาง ปรับแต่งการเรนเดอร์และการแคช และทิ้งงบประมาณบันเดิลไว้ใน CI เพื่อให้การเผยแพร่ครั้งต่อไปไม่สามารถยกเลิกงานได้อย่างเงียบๆ
งานจะเกิดขึ้นบนสาขาในที่เก็บของคุณ คอมมิตทีละคอมมิต แต่ละคอมมิตมีเหตุผลของมัน ฉันจะไม่ปรับใช้อะไรเลยเว้นแต่คุณจะร้องขอ
ไม่มีการโทร ทุกอย่างเป็นลายลักษณ์อักษร รวมถึงการวัดผลที่ไม่เห็นด้วยกับฉัน
ขั้นตอนในการทำโปรเจกต์ของคุณให้เสร็จสมบูรณ์
1. วัดผลสิ่งที่ผู้ใช้ของคุณได้รับจริง - Lighthouse บนหน้าเว็บจริงของคุณและเซสชัน React profiler บนหน้าเว็บที่ช้า ด้วยการเชื่อมต่อที่จำกัด LCP, CLS, INP และขนาดบันเดิลต่อเส้นทาง บันทึกไว้ก่อนที่จะมีการเปลี่ยนแปลงใดๆ
2. ค้นหาสิ่งที่ใช้ต้นทุนมากที่สุด - บันเดิลและเครือข่าย: สิ่งที่ส่งไปแต่ไม่มีใครใช้ สิ่งที่บล็อกการแสดงผลครั้งแรก คอมโพเนนต์ใดที่เรนเดอร์ซ้ำและทำไม ทุกสิ่งที่พบจะมีการประมาณการประหยัดเป็นมิลลิวินาทีหรือกิโลไบต์
3. แก้ไข โดยเริ่มจากสิ่งที่ได้ผลมากที่สุด - การแบ่งโค้ด การจัดการรูปภาพและฟอนต์ งานที่บล็อกการเรนเดอร์ การทำ memoization ในส่วนที่ profiler ร้องขอ การดึงข้อมูลที่ย้ายออกจากเส้นทางวิกฤต หนึ่งคอมมิตต่อการเปลี่ยนแปลง แต่ละคอมมิตมีเหตุผล
4. วัดผลอีกครั้ง แบบเคียงข้างกัน - การรันแบบเดียวกันบนบิลด์ที่เปลี่ยนแปลง: ก่อนและหลังในตารางเดียว ต่อเส้นทางและต่อเมตริก หากการเปลี่ยนแปลงทำให้บางอย่างแย่ลง ตารางจะระบุไว้และจะยกเลิกการเปลี่ยนแปลงนั้น
5. ส่งมอบในที่เก็บของคุณ - สาขาหรือแพตช์ในที่เก็บของคุณ รายงาน และรายการที่ซื่อสัตย์ของสิ่งที่คุณไม่ได้ทำและสิ่งที่จะคุ้มค่า การปรับใช้ยังคงอยู่ในมือของคุณ
การรับประกันคุณภาพ Zinner
Zinner ทุกคนจะได้รับการตรวจสอบและอนุมัติก่อนเข้าร่วมแพลตฟอร์ม
บริการทั้งหมดได้รับการสนับสนุนจากความมุ่งมั่นในการประกันคุณภาพของเรา
การชำระเงินของคุณจะได้รับการคุ้มครองจนกว่าคุณจะอนุมัติงานที่ส่งมอบ
เปรียบเทียบแพ็คเกจ
| ฟังก์ชัน | เริ่มต้น | มาตรฐาน | ขั้นสูง |
|---|---|---|---|
| เวลาจัดส่ง | 2 วัน | 4 วัน | 8 วัน |
| การแก้ไข | 0 | 2 | 3 |
| ขอบเขต | โปรไฟล์หนึ่งหน้า จัดอันดับ | การตรวจสอบบวกกับการแก้ไขหลัก | การตรวจสอบเชิงลึก สูงสุด 5 เส้นทาง |
| ซอร์สโค้ด | ✕ | ✓ | ✓ |
ผลงาน
ตัวอย่างผลงานของผู้ขายที่เกี่ยวข้องกับ Zinn นี้
Formline: ร้านค้า Next.js พร้อม Stripe
หน้าร้านที่คุณสามารถคลิกผ่านได้: โปสเตอร์ 16 ชิ้นในคอลเลกชัน 4 รายการ, ตัวกรองและการค้นหาที่ยังคงอยู่ใน URL, ตะกร้าสินค้า, ธีมสว่างและมืด, และการชำระเงินที่สิ้นสุดด้วยคำสั่งซื้อตัวอย่างหรือเซสชัน Stripe Checkout จริงในโหมดทดสอบ ฉันสร้างมันเป็น Next.js static export ใน TypeScript ด้วย Tailwind CSS การชำระเงินด้วยบัตรจะผ่าน Cloudflare Worker ที่ปรับราคาตะกร้าสินค้าบนเซิร์ฟเวอร์และตรวจสอบลายเซ็น webhook ของ Stripe
เว็บไซต์ส่วนตัวสองภาษาใน Next.js
เว็บไซต์ส่วนตัวหน้าเดียวในภาษาอังกฤษและรัสเซีย พร้อมส่วนบริการและลิงก์ไปยังโปรเจกต์สาธิตของฉัน ฉันออกแบบและสร้างด้วย Next.js, React และ TypeScript เป็น static export จัดรูปแบบด้วย CSS Modules ธรรมดาและไม่มี UI framework มีธีมสว่างและมืด และรูปภาพตัวอย่างโซเชียลสำหรับแต่ละภาษาจะถูกสร้างขึ้นในเวลาสร้าง GitHub Actions สร้างและปรับใช้กับ Bunny CDN ซึ่งเพิ่มส่วนหัวความปลอดภัยและเปลี่ยนเส้นทาง www และ HTTP ธรรมดาไปยังที่อยู่ HTTPS หลัก
รายละเอียดบริการ
คำถามที่พบบ่อย
ไม่ และโปรดระมัดระวังกับใครก็ตามที่รับปากก่อนที่จะเห็นโค้ดของคุณ วิดเจ็ตชำระเงินหรือสคริปต์โฆษณาอาจจำกัดคะแนนไม่ว่าฉันจะทำอะไร การตรวจสอบจะบอกคุณถึงขีดจำกัดสูงสุดของคุณและค่าใช้จ่ายในการไปถึงจุดนั้น
ไม่ Vite, CRA, Remix หรือ SPA ธรรมดาล้วนมีโปรไฟล์ในลักษณะเดียวกัน การแก้ไขเฉพาะเฟรมเวิร์กเท่านั้นที่แตกต่างกัน: การแบ่งระดับเส้นทางและการแคชแทนโหมดการเรนเดอร์ของ Next.js
ใช่ Standard เริ่มต้นด้วยการตรวจสอบแบบเดียวกันและใช้เวลาที่เหลือในการแก้ไขสิ่งที่พบ Starter มีไว้สำหรับทีมที่จะทำงานเองและเพียงแค่ต้องการทราบว่าจะต้องขุดที่ไหน
การตรวจสอบจะเห็นสิ่งนั้น: เวลาตอบสนองของเซิร์ฟเวอร์จะแสดงแยกต่างหากจากค่าใช้จ่ายในการเรนเดอร์และสคริปต์ การทำโปรไฟล์ API หรือคิวรีเป็นส่วนเสริม ใน Node, Express, NestJS หรือ Rust
สิทธิ์การอ่านที่เก็บ หรือไฟล์เก็บถาวรของซอร์สโค้ด พร้อมด้วย URL ของหน้าเว็บ ใน Standard และ Advanced ฉันจะพุชการแก้ไขไปยังสาขา ดังนั้นฉันจึงต้องการสิทธิ์ในการสร้างสาขา หากคุณไม่ต้องการให้สิทธิ์ ฉันจะส่งแพตช์แทน ฉันไม่เคยต้องการสิทธิ์การปรับใช้
บนหน้าเว็บที่ใช้งานจริงของคุณโดยค่าเริ่มต้น เพื่อให้ตัวเลขตรงกับสิ่งที่ผู้ใช้ของคุณได้รับ หากหน้าเว็บอยู่หลังการเข้าสู่ระบบหรือยังไม่ได้ปรับใช้ ลิงก์การจัดเตรียม บัญชีทดสอบ หรือขั้นตอนในการรันในเครื่องล้วนใช้งานได้ และรายงานจะระบุว่าตัวเลขมาจากที่ใด
รีวิวจากลูกค้า
ดูว่าลูกค้าของเราพูดถึง Zinn นี้ว่าอย่างไร
