አፕሊኬሽንህን በጣም ፈጣን አድርግ! ተጠቃሚዎች ሦስት ሰከንድ ብቻ ከቆዩ ይሄዳሉ። ጉግልም ፈጣን ጣቢያዎችን በፊት ያስቀምጣል። አሁን ጀምር — ቀዝቃዛ አፕ አድርግ!
ከፍተኛ የተጠቃሚዎች ቁጥር ገጹ በሦስት ሰከንድ ውስጥ ካልተከፈተ ወዲያውኑ ይሄዳሉ። ጉግል ፈጣን ጣቢያዎችን በፊት ያስቀምጣል። አማዞን እንኳን መቶ ሚሊ ሰከንድ ብቻ ቢዘገይ ፩ ከመቶ ገቢውን ያጣል።
ምስሎች = የገጹ መጠን ትልቁ ምክንያት! ከ60 እስከ 80% ይይዛሉ! WebP፣ lazy loading፣ responsive images — ሁሉም ያስፈልጋሉ!
የቅርጸቶች ፍጥነት ንጽጽር፡
// ❌ ስህተት — ቀጥታ img tag <img src="/hero.jpg" width="1200" height="600" /> // ✅ ትክክለኛው — Next.js Image import Image from 'next/image'; <Image src="/hero.jpg" width={1200} height={600} alt="ዋና ምስል" priority // ከላይ ያለው ምስል በፍጥነት ጫን placeholder="blur" // ገና ሳይጫን ብሉር አሳይ /> // Lazy loading — የማይታዩ ምስሎች <Image src="/below.jpg" width={400} height={300} loading="lazy" />
ካሽ ማድረግ ማለት ውጤቱን ቀምጦ ማስቀመጥ ነው — ሁልጊዜ ዳታቤዝ አትጠይቅ! Redis = በማህደረ ትውስታ ውስጥ የሚቀመጥ ካሽ — በጣም ፈጣን ነው!
const redis = require('redis'); const client = redis.createClient(); async function getPosts() { // 1. በካሽ ውስጥ አለ? const cached = await client.get('posts'); if (cached) { return JSON.parse(cached); // ⚡ በ1 ሚሊ ሰከንድ! } // 2. በዳታቤዝ ጠይቅ const posts = await prisma.post.findMany(); // 3. ውጤቱን በካሽ ውስጥ አስቀምጥ (60 ሰከንድ) await client.setEx('posts', 60, JSON.stringify(posts)); return posts; }
ከኋላ እና ከፊት ያሉ ውጤቶች፡
ተመሳሳይ ገጽ — ከኋላ እና ከፊት ያለው ጊዜ፡
የፈጣን ማድረጊያ ዝርዝር — ምን ሰርተሃል?
በChrome DevTools ውስጥ Lighthouse አሂድ እና ውጤቱን መዝግብ።
ሁሉንም ምስሎች WebP አድርግ እና lazy loading ጨምር።
ትላልቅ ክፍሎችን React.lazy ተጠቅመህ ከፋፍል።
ቀላል ጥያቄዎችን በRedis ውስጥ አስቀምጥ።
Express ላይ compression middleware ጫን።
JPEGን ወደ WebP ለውጥ — 70% ያነሰ መጠን! Next.js Image ተጠቀም!
ከባድ ክፍሎችን በተለየ ጊዜ ጫን!
ተመሳሳይ ጥያቄ ሲመጣ በ1 ሚሊ ሰከንድ መልስ!
የመልስ መጠን በ70% ይቀንሳል!
Chrome DevTools ውስጥ Lighthouse አሂድ!