Next.jsni olib tashlash blogimni har bir Lighthouse toifasida 100 ballga olib keldi

Mening blogim har bir Lighthouse toifasida 100 ballga erishdi. Bu erishish uchun Next.jsni olib tashlashim kerak bo'ldi. Bu qanday sodir bo'ldi va nima sabab bo'ldi?

Mening blogimni yaratish jarayoni juda qiyin bo'ldi. Ushbu blogni yaratish uchun Next.jsni olib tashlashim kerak bo'ldi. Bu qanday sodir bo'ldi va nima sabab bo'ldi?

Nega o'zim blog yaratishga qaror qildim?

Bugungi kunda blog yaratish uchun ko'plab platformalar mavjud. Medium, Blogger, Ghost va boshqalar. Ammo hech biri meni qoniqtirmadi. Medium va Blogger juda ko'p xususiyatlarga ega va ulardan foydalanish juda qiyin. Blogger va Mediumning haqiqiy ishlash tezligi ham meni qoniqtirmadi.

Boshqa tomondan, o'z blogimni yaratish uchun o'z kodim bilan ishlashni xohladim. Markdown, HTML, CSS kabi kodlarni bevosita ishlatishni xohladim. Bu uchun ko'plab platformalar mavjud. WordPress, Ghost, Hugo va boshqalar. Ammo hech biri meni qoniqtirmadi.

WordPressning pluginlari meni qoniqtirmadi. Ghostni o'z serveringizda ishga tushirish kerak bo'ldi va har bir yangilanishda muammolar paydo bo'ldi. Hugo esa eng yaxshi platforma bo'ldi, ammo uni o'rnatish juda qiyin bo'ldi.

Nihoyat, men Bear Blog platformasini topdim. Bu platforma juda tez ishlaydi va meni qoniqtirdi. Ammo bu platformaning minimalizm muammosi bor edi. Men bu platformani ishlatishni xohladim, ammo bu platforma meni qoniqtirmadi.

Shu sababli, men o'z blogimni yaratishga qaror qildim. Bu blog tez ishlashi, minimalizmga ega bo'lishi, ko'plab bloglarni bir vaqtda ishga tushirish imkoniyatiga ega bo'lishi va to'liq kirish imkoniyatiga ega bo'lishi kerak edi.

Lighthouse Performance toifasida 100 ballga erishish

Lighthouse Performance toifasida 100 ballga erishish uchun ko'plab ishlar qilindi. Birinchidan, keshdan foydalanish kerak edi. Keshdan foydalanish bilan tezlik ko'payadi. Next.js keshdan foydalanishni juda osonlashtiradi. Next.jsning ISR (Incremental Static Regeneration) xususiyati va fetch funksiyasining next opsiyasidan foydalanish bilan tezlik ko'payadi.

Ammo, bu platforma butun dunyo bo'ylab ishlaydi. Bu esa muammoga sabab bo'ldi. Biror bir mintaqada keshdan foydalanish tezlikni oshiradi, ammo boshqa mintaqalardan kelgan foydalanuvchilar uchun tarmoq kechikishi muammosi qoladi.

Bu muammoni hal qilish uchun CDN (Content Delivery Network) dan foydalanish kerak edi. Next.js platformasini Vercelga joylashtirish bilan CDN dan foydalanish mumkin edi. Ammo, Vercelning Pro plani juda qimmat edi va serverless cold start muammosi bor edi.

Shu sababli, men Cloudflare CDN dan foydalanishga qaror qildim. Cloudflare platformasi juda yaxshi va ko'plab ilovalarni bepul ishlatish mumkin. Ammo, bu platforma Next.jsning kesh xususiyatini ishlatishni talab qilmadi. Bu esa meni Next.jsni olib tashlashga majbur qildi.

Rasmlarni optimallashtirish

Bugungi kunda rasmlar 10MB dan ortiq bo'lishi mumkin. Bu rasmlarni shunday holda ishlatish tezlikni kamaytiradi. Shu sababli, rasmlarni optimallashtirish kerak edi. Rasmlarni optimallashtirish uchun ko'plab ishlar qilindi. Rasmlarni qurilma bo'yicha o'lchamini o'zgartirish, siqish va CDN dan foydalanish kerak edi.

Oldingi loyihada men AWS Lambda serverless funksiyasidan foydalanib, rasmlarni siqib va o'lchamini o'zgartirdim. Bu platforma CloudFront CDN dan foydalanib, rasmlarni optimallashtirdi. Ammo, bu platforma ko'p ish talab qildi.

Shu sababli, men Cloudflare Image Transformations dan foydalanishga qaror qildim. Bu platforma bepul bo'lib, 5000 ta rasmni optimallashtirish imkoniyatiga ega. Shu sababli, men bu platformadan foydalanib, rasmlarni optimallashtirdim.

Next.jsni olib tashlash sabablari

Next.jsni olib tashlash sabablari ko'p edi. Birinchidan, Next.js platformasi ko'plab legacy JavaScript kodlarini ishlatadi. Bu kodlar men tomonidan yozilmagan va tezlikni kamaytiradi. Shu sababli, men Next.jsni olib tashlashga qaror qildim.

Ikkinchi sabab, Next.js platformasi ko'plab ishlatilmaydigan kodlarni ishlatadi. Bu kodlar tezlikni kamaytiradi. Shu sababli, men Next.jsni olib tashlashga qaror qildim.

Uchinchi sabab, Next.js platformasi ko'plab client komponentlarini ishlatadi. Bu komponentlar tezlikni kamaytiradi. Shu sababli, men Next.jsni olib tashlashga qaror qildim.

Nihoyat, men Next.jsni olib tashlashga qaror qildim va blogim har bir Lighthouse toifasida 100 ballga erishdi.

Asl manba: korindiehacker.bloffy.blog