თქვენი React ან Next.js აპლიკაცია ნელდებოდა ყოველი გამოშვების შემდეგ. პაკეტი გაიზარდა, სურათები იგზავნება სრული ზომით, მესამე მხარის სკრიპტი ბლოკავს პირველ რენდერს, სია ხელახლა რენდერდება ყოველი კლავიშის დაჭერისას. მე ვზომავ, თუ რომელი მათგანი ნამდვილად აკარგვინებს თქვენს მომხმარებლებს დროს, შემდეგ კი ვასწორებ იმ პრობლემებს, რომელთა გამოსწორებაც ღირს.
მე შევქმნი თქვენი React ან Next.js აპლიკაციის პროფილს და გავაუმჯობესებ მის სიჩქარეს, ციფრების გამოყენებით
Lighthouse და პროფილერი თქვენი აპლიკაციის ერთ გვერდზე, აღმოჩენები დალაგებულია სარგებლის მიხედვით.
- ერთი გვერდი პროფილირებული, რანჟირებული
აუდიტი, შემდეგ კი გამოსწორებები, რომლებიც ცვლის ციფრებს, გაზომილია მანამდე და შემდეგ.
- აუდიტი პლუს ძირითადი შესწორებები
- წყაროს კოდი
5 მარშრუტამდე, რენდერინგი და ქეშირება, პაკეტის ბიუჯეტი CI-ში, სრული შედარება.
- ღრმა გადასვლა, 5 მარშრუტამდე
- წყაროს კოდი
მოითხოვეთ მორგებული შეთავაზება
შედით სისტემაში მორგებული შეთავაზების მოთხოვნისთვის
შექმენით უფასო ანგარიში ან შედით სისტემაში, რათა მოითხოვოთ პერსონალიზებული შეთავაზება ამ Zinner-ისგან.
შესვლა / რეგისტრაციადასვით შეკითხვა გაყიდვამდე
შედით სისტემაში შეკითხვის დასასმელად
პლატფორმის სპამის შესამცირებლად, გაყიდვამდე შეტყობინებების გაგზავნა მხოლოდ სისტემაში შესულ მომხმარებლებს შეუძლიათ.
შექმენით უფასო ანგარიში ან შედით სისტემაში, რათა პირდაპირ მიწეროთ ამ Zinner-ს.
შესვლა / რეგისტრაციასაჭიროა შესვლა
შექმენით უფასო ანგარიში ან შედით სისტემაში ამ Zinner-ისთვის შეტყობინების გასაგზავნად.
შესვლა / რეგისტრაციასაჭიროა შესვლა
შექმენით უფასო ანგარიში ან შედით სისტემაში პერსონალიზებული შეთავაზების მოთხოვნისთვის.
შესვლა / რეგისტრაციაერთი შეხედვით
ძირითადი დეტალები ამ სერვისის შესახებ, რათა დაგეხმაროთ გადაწყვეტილების მიღებაში. გენერირებულია Zinn Hub-ის მიერ და არა გამყიდველის მიერ.
ღირებულების პოზიცია
Measurement Approach
დაფარული ფრეიმვორკები
Metrics Reported
მიწოდების მეთოდი
რას მიიღებთ
სრული აღწერა
შეუკვეთეთ ეს, თუ ფიქრობთ, რომ ნელი გვერდები გიჯდებათ რეგისტრაციებს ან საძიებო ტრაფიკს და გსურთ შეინარჩუნოთ არსებული აპლიკაცია. React და Next.js უკვე შეიცავს იმას, რაც სწრაფ აპლიკაციას სჭირდება, ამიტომ მოგება მოდის ამ ხელსაწყოების კარგად გამოყენებიდან და არა სტეკების შეცვლიდან.
თქვენ მიიღებთ ციფრებს და არა ზედსართავ სახელებს: LCP, CLS, INP და პაკეტის ზომა თითოეული მარშრუტისთვის, გაზომილი მანამდე და შემდეგ იმავე შეზღუდული კავშირით, ერთ ცხრილში.
Starter არის ერთი გვერდის აუდიტი: გაშვებები, აღმოჩენები დალაგებული სარგებლის მიხედვით, კოდი არ იცვლება. Standard იწყება ამ აუდიტიდან და დანარჩენ დროს ხარჯავს იმ გამოსწორებებზე, რომლებიც ცვლის ამ ციფრებს. Advanced მოიცავს 5 მარშრუტამდე, აუმჯობესებს რენდერინგს და ქეშირებას და ტოვებს პაკეტის ბიუჯეტს CI-ში, რათა შემდეგმა გამოშვებამ ჩუმად არ გააუქმოს სამუშაო.
სამუშაო ხდება თქვენი საცავის ფილიალში, კომიტი კომიტის მიხედვით, თითოეული თავისი მიზეზით. ჩემს მიერ არაფერი განთავსდება, თუ თქვენ არ მოითხოვთ.
ზარები არ არის. ყველაფერი წერილობით, მათ შორის გაზომვები, რომლებიც არ ეთანხმება ჩემსას.
თქვენი პროექტის დასრულების ნაბიჯები
1. გაზომეთ, რას იღებენ თქვენი მომხმარებლები რეალურად - Lighthouse თქვენს ცოცხალ გვერდებზე და React პროფილერის სესია ნელ გვერდებზე, შეზღუდული კავშირით. LCP, CLS, INP და პაკეტის ზომა თითო მარშრუტზე, ჩაწერილია სანამ რაიმე შეიცვლება.
2. იპოვეთ, რა ღირს ყველაზე მეტი - პაკეტი და ქსელის ჩანჩქერი: რა იგზავნება, რასაც არავინ იყენებს, რა ბლოკავს პირველ რენდერს, რომელი კომპონენტები ხელახლა რენდერდება და რატომ. ყოველი აღმოჩენა შეიცავს სავარაუდო დაზოგვას მილიწამებში ან კილობაიტებში.
3. გამოასწორეთ, ყველაზე დიდი მოგება პირველ რიგში - კოდის გაყოფა, სურათების და შრიფტების დამუშავება, რენდერის ბლოკირების სამუშაო, მემოიზაცია, სადაც პროფილერი ითხოვს, მონაცემთა მოძიება გადატანილია კრიტიკული გზიდან. ერთი კომიტი თითო ცვლილებაზე, თითოეული თავისი მიზეზით.
4. გაზომეთ ისევ, გვერდიგვერდ - იგივე გაშვებები შეცვლილ ბილდზე: მანამდე და შემდეგ ერთ ცხრილში, თითო მარშრუტზე და თითო მეტრიკაზე. თუ ცვლილებამ რამე გააუარესა, ცხრილი ამას აჩვენებს და ცვლილება უკან ბრუნდება.
5. გადაცემა თქვენს საცავში - ფილიალი ან პატჩი თქვენს საცავში, ანგარიში და პატიოსანი სია იმისა, რაც არ გამიკეთებია და რა ღირებულება ექნებოდა მას. განლაგება რჩება თქვენს ხელში.
Zinner ხარისხის გარანტია
ყველა Zinner განიხილება და მტკიცდება პლატფორმაზე გაწევრიანებამდე.
ყველა სერვისი მხარდაჭერილია ჩვენი ხარისხის უზრუნველყოფის ვალდებულებით.
თქვენი გადახდა დაცულია მანამ, სანამ არ დაამტკიცებთ შესრულებულ სამუშაოს.
პაკეტების შედარება
| ფუნქცია | დამწყები | სტანდარტული | მოწინავე |
|---|---|---|---|
| მიწოდების დრო | 2 დღეები | 4 დღეები | 8 დღეები |
| რევიზიები | 0 | 2 | 3 |
| ფარგლები | ერთი გვერდი პროფილირებული, რანჟირებული | აუდიტი პლუს ძირითადი გამოსწორებები | ღრმა შემოწმება, 5 მარშრუტამდე |
| წყაროს კოდი | ✕ | ✓ | ✓ |
პორტფოლიო
გამყიდველის ნამუშევრების მაგალითები ამ Zinn-თან დაკავშირებით.
Formline: Next.js მაღაზია Stripe-ით
მაღაზია, რომელშიც შეგიძლიათ დაათვალიეროთ: 16 პოსტერი 4 კოლექციაში, ფილტრები და ძებნა, რომლებიც რჩება URL-ში, კალათა, ღია და მუქი თემები, და გადახდა, რომელიც მთავრდება დემო შეკვეთით ან რეალური Stripe Checkout სესიით ტესტის რეჟიმში. მე ავაშენე ის, როგორც Next.js სტატიკური ექსპორტი TypeScript-ში Tailwind CSS-ით. ბარათით გადახდები ხორციელდება Cloudflare Worker-ის მეშვეობით, რომელიც ხელახლა აფასებს კალათას სერვერზე და ამოწმებს Stripe-ის webhook ხელმოწერას.
ორენოვანი პირადი საიტი Next.js-ში
ერთგვერდიანი პირადი საიტი ინგლისურ და რუსულ ენებზე, სერვისების განყოფილებით და ბმულებით ჩემს დემო პროექტებზე. მე შევქმენი და ავაშენე ის Next.js-ით, React-ით და TypeScript-ით, როგორც სტატიკური ექსპორტი, სტილიზებული უბრალო CSS Modules-ით და UI ფრეიმვორკის გარეშე. მას აქვს ღია და მუქი თემები, და თითოეული ენისთვის სოციალური გადახედვის სურათი გენერირდება აგების დროს. GitHub Actions აშენებს და აქვეყნებს მას Bunny CDN-ზე, რომელიც ამატებს უსაფრთხოების სათაურებს და გადამისამართებს www-ს და უბრალო HTTP-ს მთავარ HTTPS მისამართზე.
სერვისის დეტალები
ხშირად დასმული კითხვები
არა, და ფრთხილად იყავით ყველასთან, ვინც ამას გპირდებათ თქვენი კოდის ნახვის გარეშე. Checkout ვიჯეტმა ან სარეკლამო სკრიპტმა შეიძლება შეზღუდოს ქულა, რაც არ უნდა გავაკეთო. აუდიტი გეუბნებათ თქვენს ჭერს და რა ღირს მისი მიღწევა.
არა. Vite, CRA, Remix ან ჩვეულებრივი SPA ყველა ერთნაირად პროფილდება. მხოლოდ ფრეიმვორკ-სპეციფიკური გამოსწორებები განსხვავდება: მარშრუტის დონის გაყოფა და ქეშირება Next.js რენდერინგის რეჟიმების ნაცვლად.
დიახ. Standard იწყება იგივე აუდიტით და დარჩენილ დროს ხარჯავს ნაპოვნის გამოსწორებაზე. Starter არსებობს გუნდებისთვის, რომლებიც თავად შეასრულებენ სამუშაოს და უბრალოდ უნდა იცოდნენ, სად უნდა ეძებონ.
აუდიტი აჩვენებს, რომ: სერვერის პასუხის დრო ცალკე ჩანს რენდერისა და სკრიპტის ღირებულებისგან. API-ის ან მოთხოვნების პროფილირება არის დამატება, Node-ში, Express-ში, NestJS-ში ან Rust-ში.
რეპოზიტორიაზე წვდომის წაკითხვა, ან წყაროს არქივი, პლუს გვერდის URL. სტანდარტულ და გაფართოებულ ვერსიებზე მე ვტვირთავ შესწორებებს ფილიალში, ამიტომ მჭირდება მისი შექმნის ნებართვა. თუ არ გსურთ მისი მიცემა, ამის ნაცვლად პატჩს გამოგიგზავნით. მე არასდროს მჭირდება განლაგების წვდომა.
ნაგულისხმევად თქვენს ცოცხალ საწარმოო გვერდებზე, რათა რიცხვები შეესაბამებოდეს იმას, რასაც თქვენი მომხმარებლები იღებენ. თუ გვერდი შესვლის უკან არის ან ჯერ არ არის განლაგებული, სტეიჯინგის ბმული, სატესტო ანგარიში ან ლოკალურად გასაშვები ნაბიჯები ყველა მუშაობს, და ანგარიში ამბობს, რომელიდან მოდის რიცხვები.
მომხმარებელთა შეფასებები
ნახეთ, რას ამბობენ ჩვენი მომხმარებლები ამ Zinn-ის შესახებ
კატეგორიები
Zinner-ის პოლიტიკა
მსგავსი Zinns
React JS ვებ აპლიკაციის შემუშავება Node.js, Express, MongoDB, Firebase & MySQL-ით
