React veya Next.js uygulamanız her sürümde yavaşladı. Paket büyüdü, görseller tam boyutta gönderiliyor, üçüncü taraf bir komut dosyası ilk boyamayı engelliyor, bir liste her tuş vuruşunda yeniden oluşturuluyor. Bunlardan hangisinin kullanıcılarınıza zaman kaybettirdiğini ölçüyorum, sonra düzeltmeye değer olanları düzeltiyorum.
React veya Next.js uygulamanızın profilini çıkaracağım ve sayılarla daha hızlı hale getireceğim
Uygulamanızın tek bir sayfasında Lighthouse ve profilleyici, bulgular getiriye göre sıralanır.
- Bir sayfa profillendi, sıralandı
Denetim, ardından sayıları hareket ettiren düzeltmeler, öncesi ve sonrası ölçülür.
- Denetim artı ana düzeltmeler
- Kaynak kodu
5 rotaya kadar, oluşturma ve önbelleğe alma, CI'da bir paket bütçesi, tam karşılaştırma.
- Derin geçiş, 5 rotaya kadar
- Kaynak kodu
Özel Bir Teklif İste
Özel Bir Teklif İstemek İçin Giriş Yapın
Ücretsiz bir hesap oluşturun veya bu Zinner'dan kişiselleştirilmiş bir teklif istemek için giriş yapın.
Giriş Yap / Kayıt OlSatın Almadan Önce Soru Sorun
Soru Sormak İçin Giriş Yapın
Platform spam'ını azaltmak için, satış öncesi mesajlar yalnızca giriş yapmış kullanıcılar tarafından gönderilebilir.
Ücretsiz bir hesap oluşturun veya bu Zinner ile mesajlaşmak için giriş yapın.
Giriş Yap / Kayıt OlGiriş gerekli
Ücretsiz bir hesap oluşturun veya bu Zinner ile mesaj göndermek için giriş yapın.
Giriş Yap / Kayıt OlGiriş gerekli
Kişiselleştirilmiş bir teklif istemek için ücretsiz bir hesap oluşturun veya giriş yapın.
Giriş Yap / Kayıt OlBir Bakışta
Bu hizmet hakkında karar vermenize yardımcı olacak önemli ayrıntılar. Zinn Hub tarafından oluşturulmuştur, satıcı tarafından değil.
Değer Konumu
Measurement Approach
Kapsanan Çerçeveler
Metrics Reported
Teslimat Yöntemi
Ne Alacaksınız
Tam Açıklama
Yavaş sayfaların size kayıt veya arama trafiğine mal olduğunu düşünüyorsanız ve sahip olduğunuz uygulamayı korumak istiyorsanız bunu sipariş edin. React ve Next.js zaten hızlı bir uygulamanın ihtiyaç duyduğu çoğu şeyi sunar, bu nedenle kazançlar yığınları değiştirmek yerine bu araçları iyi kullanmaktan gelir.
Sıfatlar değil, sayılar alırsınız: LCP, CLS, INP ve rota başına paket boyutu, aynı kısıtlı bağlantıda öncesi ve sonrası ölçülmüş olarak, tek bir tabloda.
Başlangıç paketi tek bir sayfanın denetimidir: çalıştırmalar, getiriye göre sıralanmış bulgular, kod değişikliği yok. Standart, bu denetimden başlar ve kalan zamanı bu sayıları hareket ettiren düzeltmelere harcar. Gelişmiş paket, 5 rotaya kadar kapsar, oluşturmayı ve önbelleğe almayı ayarlar ve CI'da bir paket bütçesi bırakır, böylece bir sonraki sürüm işi sessizce geri alamaz.
Çalışma, deponuzdaki bir dalda, taahhüt taahhüt, her biri kendi nedeni ile gerçekleşir. Siz istemedikçe benim tarafımdan hiçbir şey dağıtılmaz.
Telefon görüşmesi yok. Benimle aynı fikirde olmayan ölçümler de dahil olmak üzere her şey yazılı olarak.
Projenizi tamamlama adımları
1. Kullanıcılarınızın gerçekten ne aldığını ölçün - Canlı sayfalarınızda Lighthouse ve yavaş olanlarda, kısıtlı bir bağlantıda bir React profiler oturumu. Hiçbir şeye dokunulmadan önce her rota için LCP, CLS, INP ve paket boyutu yazılır.
2. En çok neye mal olduğunu bulun - Paket ve ağ şelalesi: kimsenin kullanmadığı ne gönderiliyor, ilk boyamayı ne engelliyor, hangi bileşenler yeniden oluşturuluyor ve neden. Her bulgu, milisaniye veya kilobayt cinsinden tahmini bir tasarruf taşır.
3. Düzeltin, en büyük kazançtan başlayarak - Kod bölme, resim ve yazı tipi işleme, oluşturmayı engelleyen işler, profilerın istediği yerde memoization, kritik yoldan çıkarılan veri getirme. Her değişiklik için bir commit, her biri kendi nedeni ile.
4. Yan yana tekrar ölçün - Değiştirilen yapıda aynı çalıştırmalar: her rota ve her metrik için tek bir tabloda önce ve sonra. Bir değişiklik bir şeyi kötüleştirdiyse, tablo bunu söyler ve değişiklik geri alınır.
5. Deponuzda devir - Deponuzda bir dal veya yama, rapor ve yapmadığım ve neye değeceği dürüst bir liste. Dağıtım sizin elinizde kalır.
Zinner Kalite Garantisi
Her Zinner platforma katılmadan önce incelenir ve onaylanır.
Tüm hizmetler kalite güvence taahhüdümüz tarafından desteklenmektedir.
Ödemeniz, teslim edilen işi onaylayana kadar korunur.
Paketleri Karşılaştır
| Fonksiyon | Başlangıç | Standart | Gelişmiş |
|---|---|---|---|
| Teslimat Süresi | 2 gün | 4 gün | 8 gün |
| Revizyonlar | 0 | 2 | 3 |
| Kapsam | Bir sayfa profillendi, sıralandı | Denetim artı ana düzeltmeler | Derinlemesine geçiş, 5 rotaya kadar |
| Kaynak kodu | ✕ | ✓ | ✓ |
Portföy
Satıcının bu Zinn ile ilgili çalışmalarına örnekler.
Formline: Stripe ile Next.js mağazası
Tıklayabileceğiniz bir mağaza: 16 koleksiyonda 4 poster, URL'de kalan filtreler ve arama, bir sepet, açık ve koyu temalar ve demo siparişle veya test modunda gerçek bir Stripe Ödeme oturumuyla biten bir ödeme. Bunu Tailwind CSS ile TypeScript'te bir Next.js statik dışa aktarımı olarak oluşturdum. Kart ödemeleri, sepeti sunucuda yeniden fiyatlandıran ve Stripe'ın webhook imzasını doğrulayan bir Cloudflare Worker aracılığıyla yapılır.
Next.js'de iki dilli kişisel site
İngilizce ve Rusça tek sayfalık kişisel bir site, hizmetler bölümü ve demo projelerime bağlantılar. Bunu Next.js, React ve TypeScript ile statik bir dışa aktarım olarak tasarladım ve oluşturdum, düz CSS Modülleri ile stilize ettim ve UI çerçevesi kullanmadım. Açık ve koyu temaları var ve her dil için bir sosyal önizleme görüntüsü derleme zamanında oluşturuluyor. GitHub Actions, onu Bunny CDN'ye inşa eder ve dağıtır, bu da güvenlik başlıkları ekler ve www ve düz HTTP'yi ana HTTPS adresine yönlendirir.
Hizmet Detayları
Sıkça Sorulan Sorular
Hayır, ve kodunuzu görmeden bunu vaat eden herkese karşı dikkatli olun. Bir ödeme widget'ı veya bir reklam komut dosyası, ne yaparsam yapayım puanı sınırlayabilir. Denetim size tavanınızı ve ona ulaşmanın maliyetini söyler.
Hayır. Vite, CRA, Remix veya düz bir SPA hepsi aynı şekilde profillenir. Sadece çerçeveye özgü düzeltmeler farklıdır: Next.js oluşturma modları yerine rota düzeyinde bölme ve önbelleğe alma.
Evet. Standart aynı denetimle başlar ve kalan zamanı bulduğu şeyleri düzeltmeye harcar. Başlangıç paketi, işi kendileri yapacak ve sadece nerede kazmaları gerektiğini bilmeleri gereken ekipler için mevcuttur.
Denetim şunu gösterir: sunucu yanıt süresi, oluşturma ve komut dosyası maliyetinden ayrı olarak görünür. API veya sorguların profillenmesi, Node, Express, NestJS veya Rust'ta eklentidir.
Depoya okuma erişimi veya kaynak kodu arşivi ve sayfanın URL'si. Standart ve Gelişmiş paketlerde düzeltmeleri bir dala gönderirim, bu yüzden bir dal oluşturma iznine ihtiyacım var. Eğer bu izni vermek istemezseniz, bunun yerine bir yama gönderirim. Asla dağıtım erişimine ihtiyacım olmaz.
Varsayılan olarak canlı üretim sayfalarınızda, böylece sayılar kullanıcılarınızın elde ettiğiyle eşleşir. Eğer sayfa bir girişin arkasındaysa veya henüz dağıtılmadıysa, bir hazırlık bağlantısı, bir test hesabı veya yerel olarak çalıştırma adımları işe yarar ve rapor, sayıların nereden geldiğini belirtir.
Müşteri Yorumları
Müşterilerimizin Zinn hakkında neler söylediğini görün
Kategoriler
Zinner Politikaları
İlgili Zinns
Next.js, React, Firebase & Node.js kullanarak profesyonel web uygulamaları geliştirin
