Ứng dụng React hoặc Next.js của bạn ngày càng chậm hơn sau mỗi bản phát hành. Gói ứng dụng ngày càng lớn, hình ảnh được gửi ở kích thước đầy đủ, một tập lệnh của bên thứ ba chặn lần hiển thị đầu tiên, một danh sách hiển thị lại sau mỗi lần gõ phím. Tôi đo lường những yếu tố nào trong số đó thực sự làm tốn thời gian của người dùng, sau đó khắc phục những yếu tố đáng để khắc phục.
Tôi sẽ lập hồ sơ ứng dụng React hoặc Next.js của bạn và làm cho nó nhanh hơn, với các con số
Lighthouse và trình phân tích trên một trang ứng dụng của bạn, các phát hiện được xếp hạng theo lợi ích.
- Một trang được lập hồ sơ, xếp hạng
Kiểm tra, sau đó là các bản sửa lỗi làm thay đổi các con số, được đo trước và sau.
- Kiểm toán cộng với các bản sửa lỗi chính
- Mã nguồn
Tối đa 5 tuyến đường, hiển thị và bộ nhớ đệm, ngân sách gói trong CI, so sánh đầy đủ.
- Đường chuyền sâu, lên đến 5 tuyến
- Mã nguồn
Yêu cầu ưu đãi tùy chỉnh
Đăng nhập để yêu cầu ưu đãi tùy chỉnh
Tạo tài khoản miễn phí hoặc đăng nhập để yêu cầu ưu đãi cá nhân hóa từ Zinner này.
Đăng nhập / Đăng kýĐặt câu hỏi trước khi bán hàng
Đăng nhập để đặt câu hỏi
Để giảm thư rác trên nền tảng, tin nhắn trước khi bán chỉ có thể được gửi bởi người dùng đã đăng nhập.
Tạo tài khoản miễn phí hoặc đăng nhập để nhắn tin trực tiếp cho Zinner này.
Đăng nhập / Đăng kýYêu cầu đăng nhập
Tạo tài khoản miễn phí hoặc đăng nhập để nhắn tin cho Zinner này.
Đăng nhập / Đăng kýYêu cầu đăng nhập
Tạo tài khoản miễn phí hoặc đăng nhập để yêu cầu ưu đãi cá nhân hóa.
Đăng nhập / Đăng kýTổng quan
Thông tin chi tiết về dịch vụ này để giúp bạn quyết định. Được tạo bởi Zinn Hub, không phải người bán.
Vị trí giá trị
Measurement Approach
Các Khung Công Việc Được Đề Cập
Metrics Reported
Phương thức giao hàng
Những gì bạn sẽ nhận được
Mô tả đầy đủ
Đặt hàng cái này nếu bạn nghĩ rằng các trang chậm đang khiến bạn mất lượt đăng ký hoặc lưu lượng tìm kiếm và bạn muốn giữ ứng dụng bạn có. React và Next.js đã cung cấp hầu hết những gì một ứng dụng nhanh cần, vì vậy lợi ích đến từ việc sử dụng tốt các công cụ đó hơn là chuyển đổi ngăn xếp.
Bạn nhận được các con số, không phải tính từ: LCP, CLS, INP và kích thước gói trên mỗi tuyến đường, được đo trước và sau trên cùng một kết nối bị điều tiết, trong một bảng.
Gói khởi đầu là kiểm tra một trang: các lần chạy, các phát hiện được xếp hạng theo lợi ích, không có mã nào được thay đổi. Gói Standard bắt đầu từ kiểm tra đó và dành phần thời gian còn lại để sửa các lỗi làm thay đổi các con số đó. Gói Advanced bao gồm tối đa 5 tuyến đường, điều chỉnh hiển thị và bộ nhớ đệm, và để lại ngân sách gói trong CI để bản phát hành tiếp theo không thể âm thầm hủy bỏ công việc.
Công việc diễn ra trên một nhánh trong kho lưu trữ của bạn, từng cam kết một, mỗi cam kết có lý do riêng. Tôi sẽ không triển khai bất cứ điều gì trừ khi bạn yêu cầu.
Không gọi điện. Mọi thứ đều bằng văn bản, bao gồm cả các phép đo không đồng ý với tôi.
Các bước để hoàn thành dự án của bạn
1. Đo lường những gì người dùng của bạn thực sự nhận được - Lighthouse trên các trang trực tiếp của bạn và một phiên trình phân tích React trên các trang chậm, trên một kết nối bị điều tiết. LCP, CLS, INP và kích thước gói trên mỗi tuyến đường, được ghi lại trước khi bất cứ điều gì được chạm vào.
2. Tìm ra chi phí lớn nhất - Gói và thác nước mạng: những gì được gửi đi mà không ai sử dụng, những gì chặn lần hiển thị đầu tiên, các thành phần nào hiển thị lại và tại sao. Mỗi phát hiện đều có ước tính tiết kiệm bằng mili giây hoặc kilobyte.
3. Sửa lỗi, ưu tiên những lỗi mang lại lợi ích lớn nhất - Chia tách mã, xử lý hình ảnh và phông chữ, công việc chặn hiển thị, ghi nhớ nơi trình phân tích yêu cầu, tìm nạp dữ liệu được chuyển ra khỏi đường dẫn quan trọng. Mỗi cam kết một thay đổi, mỗi cam kết có lý do riêng.
4. Đo lường lại, song song - Các lần chạy tương tự trên bản dựng đã thay đổi: trước và sau trong một bảng, trên mỗi tuyến đường và trên mỗi chỉ số. Nếu một thay đổi làm cho mọi thứ tệ hơn, bảng sẽ nói rõ điều đó và thay đổi sẽ được hoàn tác.
5. Bàn giao trong kho lưu trữ của bạn - Một nhánh hoặc bản vá trong kho lưu trữ của bạn, báo cáo và một danh sách trung thực về những gì tôi đã không làm và giá trị của nó. Việc triển khai vẫn nằm trong tay bạn.
Đảm bảo chất lượng Zinner
Mỗi Zinner đều được xem xét và phê duyệt trước khi tham gia nền tảng.
Tất cả các dịch vụ đều được đảm bảo bởi cam kết chất lượng của chúng tôi.
Khoản thanh toán của bạn được bảo vệ cho đến khi bạn chấp thuận công việc đã giao.
So sánh các gói
| Chức năng | Người mới bắt đầu | Tiêu chuẩn | Nâng cao |
|---|---|---|---|
| Thời gian giao hàng | 2 ngày | 4 ngày | 8 ngày |
| Sửa đổi | 0 | 2 | 3 |
| Phạm vi | Một trang được lập hồ sơ, xếp hạng | Kiểm tra cộng với các bản sửa lỗi chính | Kiểm tra sâu, tối đa 5 tuyến đường |
| Mã nguồn | ✕ | ✓ | ✓ |
Danh mục đầu tư
Ví dụ về công việc của người bán liên quan đến Zinn này.
Formline: Cửa hàng Next.js với Stripe
Một cửa hàng bạn có thể nhấp qua: 16 áp phích trong 4 bộ sưu tập, bộ lọc và tìm kiếm vẫn nằm trong URL, giỏ hàng, chủ đề sáng và tối, và thanh toán kết thúc bằng một đơn hàng demo hoặc một phiên Stripe Checkout thực trong chế độ thử nghiệm. Tôi đã xây dựng nó dưới dạng xuất tĩnh Next.js trong TypeScript với Tailwind CSS. Thanh toán bằng thẻ thông qua một Cloudflare Worker định giá lại giỏ hàng trên máy chủ và xác minh chữ ký webhook của Stripe.
Trang web cá nhân song ngữ trong Next.js
Một trang web cá nhân một trang bằng tiếng Anh và tiếng Nga, với phần dịch vụ và liên kết đến các dự án demo của tôi. Tôi đã thiết kế và xây dựng nó với Next.js, React và TypeScript dưới dạng xuất tĩnh, được tạo kiểu bằng CSS Modules thuần túy và không có khung giao diện người dùng. Nó có chủ đề sáng và tối, và một hình ảnh xem trước xã hội cho mỗi ngôn ngữ được tạo tại thời điểm xây dựng. GitHub Actions xây dựng và triển khai nó lên Bunny CDN, nơi thêm các tiêu đề bảo mật và chuyển hướng www và HTTP thuần túy đến địa chỉ HTTPS chính.
Chi tiết dịch vụ
Câu hỏi thường gặp
Không, và hãy cẩn thận với bất kỳ ai hứa hẹn điều đó trước khi xem mã của bạn. Một tiện ích thanh toán hoặc một tập lệnh quảng cáo có thể giới hạn điểm số bất kể tôi làm gì. Kiểm tra sẽ cho bạn biết giới hạn của bạn và chi phí để đạt được nó.
Không. Vite, CRA, Remix hoặc một SPA thuần túy đều được lập hồ sơ theo cùng một cách. Chỉ có các bản sửa lỗi dành riêng cho framework là khác nhau: chia tách và bộ nhớ đệm cấp tuyến đường thay vì các chế độ hiển thị của Next.js.
Có. Gói Standard bắt đầu với cùng một kiểm tra và dành thời gian còn lại để sửa những gì nó tìm thấy. Gói khởi đầu tồn tại cho các nhóm sẽ tự làm công việc và chỉ cần biết nơi để đào.
Kiểm tra cho thấy: thời gian phản hồi của máy chủ hiển thị riêng biệt với chi phí hiển thị và script. Lập hồ sơ API hoặc các truy vấn là phần bổ trợ, trong Node, Express, NestJS hoặc Rust.
Quyền đọc kho lưu trữ, hoặc một bản lưu trữ mã nguồn, cộng với URL của trang. Trên Standard và Advanced, tôi đẩy các bản sửa lỗi vào một nhánh, vì vậy tôi cần quyền tạo một nhánh. Nếu bạn không muốn cấp quyền đó, tôi sẽ gửi một bản vá thay thế. Tôi không bao giờ cần quyền triển khai.
Theo mặc định, trên các trang sản phẩm trực tiếp của bạn, để các con số khớp với những gì người dùng của bạn nhận được. Nếu trang nằm sau một đăng nhập hoặc chưa được triển khai, một liên kết dàn dựng, một tài khoản thử nghiệm hoặc các bước để chạy cục bộ đều hoạt động, và báo cáo sẽ cho biết các con số đến từ đâu.
Đánh giá của khách hàng
Xem khách hàng của chúng tôi nói gì về Zinn này
Danh mục
Chính sách Zinner
Zinns liên quan
