Ձեր 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-ի վեբհուկի ստորագրությունը։
Երկլեզու անձնական կայք Next.js-ում
Մեկ էջանոց անձնական կայք անգլերեն և ռուսերեն լեզուներով, ծառայությունների բաժնով և հղումներով դեպի իմ դեմո նախագծերը։ Ես այն նախագծել և կառուցել եմ Next.js-ով, React-ով և TypeScript-ով որպես ստատիկ արտահանում, ձևավորված պարզ CSS Modules-ով և առանց UI շրջանակի։ Այն ունի բաց և մուգ թեմաներ, և յուրաքանչյուր լեզվի համար սոցիալական նախադիտման պատկերը ստեղծվում է կառուցման ժամանակ։ GitHub Actions-ը կառուցում և տեղակայում է այն Bunny CDN-ում, որն ավելացնում է անվտանգության վերնագրեր և վերահղում է www-ն և պարզ HTTP-ն դեպի հիմնական HTTPS հասցեն։
Ծառայության մանրամասներ
Հաճախ տրվող հարցեր
Ոչ, և զգույշ եղեք ցանկացածի հետ, ով խոստանում է դա՝ նախքան ձեր կոդը տեսնելը: Դուրսգրման վիջեթը կամ գովազդային սկրիպտը կարող են սահմանափակել միավորը, անկախ նրանից, թե ինչ եմ ես անում: Աուդիտը ձեզ ասում է ձեր առաստաղը և ինչ արժե դրան հասնելը:
Ոչ: Vite-ը, CRA-ն, Remix-ը կամ պարզ SPA-ն բոլորը նույն կերպ են պրոֆիլավորվում: Միայն շրջանակին հատուկ շտկումներն են տարբերվում. երթուղու մակարդակի բաժանում և քեշավորում՝ Next.js ռենդերինգի ռեժիմների փոխարեն:
Այո: Standard-ը սկսվում է նույն աուդիտից և մնացած ժամանակը ծախսում է այն շտկելու վրա, ինչ գտել է: Starter-ը գոյություն ունի այն թիմերի համար, ովքեր աշխատանքը կկատարեն ինքնուրույն և պարզապես պետք է իմանան, թե որտեղ փորել:
Աուդիտը տեսնում է, որ սերվերի պատասխանման ժամանակը առանձին է ցուցադրվում ռենդերից և սկրիպտի արժեքից։ API-ի կամ հարցումների պրոֆիլավորումը հավելումն է՝ Node-ում, Express-ում, NestJS-ում կամ Rust-ում։
Պահոցի ընթերցման թույլտվություն կամ աղբյուրի արխիվ, գումարած էջի URL-ը։ Ստանդարտ և Ընդլայնված տարբերակներում ես ուղղումները տեղադրում եմ ճյուղում, ուստի ինձ անհրաժեշտ է այն ստեղծելու թույլտվություն։ Եթե նախընտրում եք չտրամադրել այն, ես փոխարենը ուղարկում եմ կարկատան։ Ինձ երբեք տեղակայման թույլտվություն չի անհրաժեշտ։
Լռելյայնորեն ձեր կենդանի արտադրական էջերում, որպեսզի թվերը համապատասխանեն այն ամենին, ինչ ստանում են ձեր օգտատերերը։ Եթե էջը մուտքի հետևում է կամ դեռ տեղակայված չէ, ապա աշխատում են փուլային հղումը, թեստային հաշիվը կամ տեղական մակարդակով այն գործարկելու քայլերը, և զեկույցում նշվում է, թե որտեղից են ստացվել թվերը։
Հաճախորդների ակնարկներ
Տեսեք, թե ինչ են ասում մեր հաճախորդները այս Zinn-ի մասին
Կատեգորիաներ
Zinner Քաղաքականություն
Առնչվող Zinns
