LESSON 28 · PERFORMANCE OPTIMIZATION

Performance ⚡ ቀዝቃዛ!

አፕሊኬሽንህን በጣም ፈጣን አድርግ! ተጠቃሚዎች ሦስት ሰከንድ ብቻ ከቆዩ ይሄዳሉ። ጉግልም ፈጣን ጣቢያዎችን በፊት ያስቀምጣል። አሁን ጀምር — ቀዝቃዛ አፕ አድርግ!

✍️ የተዘጋጀው፡ @AppMinds_ET · EthioCode SoftSelect
01
ለምን ፈጣን አፕሊኬሽን ያስፈልጋል?

ከፍተኛ የተጠቃሚዎች ቁጥር ገጹ በሦስት ሰከንድ ውስጥ ካልተከፈተ ወዲያውኑ ይሄዳሉ። ጉግል ፈጣን ጣቢያዎችን በፊት ያስቀምጣል። አማዞን እንኳን መቶ ሚሊ ሰከንድ ብቻ ቢዘገይ ፩ ከመቶ ገቢውን ያጣል።

<1s
ታሪካዊ FCP
✅ ጥሩ
1-3s
FCP
⚠️ መካከለኛ
>3s
FCP
❌ ዝግተኛ
100
Lighthouse Max
🎯 ግብ
02
ዋና ዋና የፈጣን ማድረጊያ ዘዴዎች — 6 ቁልፍ
🖼️
ምስሎችን ማሻሻል
WebP ቅርጸት ተጠቀም! Lazy loading ጨምር! Next.js Image አካል በጣም ጥሩ ነው!
⚡ ከፍተኛ ተጽዕኖ
📦
ኮድ መከፋፈል
ሁሉን ኮድ በአንድ ፋይል አታድርግ! ተጠቃሚው ገጹን ሲጎበኝ ብቻ ጫን!
⚡ ከፍተኛ ተጽዕኖ
🗄️
ካሽ ማድረግ
ተመሳሳይ መረጃ ሁልጊዜ ከዳታቤዝ አትጠይቅ! Redis ወይም በብራውዘር ካሽ ተጠቀም!
⚡ ከፍተኛ ተጽዕኖ
🗜️
መጭመቅ
Gzip ወይም Brotli! የፋይል መጠን በ70% ይቀንሳል! Express ላይ compression middleware ተጠቀም!
🟡 መካከለኛ
🌐
CDN
ፋይሎችን ቅርብ ካለው ሰርቨር አቅርብ! Cloudflare ወይም CloudFront ተጠቀም!
🟡 መካከለኛ
ዳታቤዝ ኢንዴክስ
ዳታቤዝ ጥያቄዎችን ፈጣን አድርግ! ኢንዴክስ ከሌለ ሙሉ ፍለጋ ይሆናል — ኢንዴክስ ካለ ቅጽበታዊ ነው!
⚡ ከፍተኛ ተጽዕኖ
03
ምስሎችን ማሻሻል — በጣም አስፈላጊው!

ምስሎች = የገጹ መጠን ትልቁ ምክንያት! ከ60 እስከ 80% ይይዛሉ! WebP፣ lazy loading፣ responsive images — ሁሉም ያስፈልጋሉ!

የቅርጸቶች ፍጥነት ንጽጽር፡

JPEG (የድሮ)
2.4 MB
❌ ዝግተኛ
PNG
1.8 MB
⚠️ ትልቅ
WebP
680 KB
✅ ቀዝቃዛ!
AVIF
420 KB
✅✅ በጣም ፈጣን!
image-optimization.jsx — Next.js
// ❌ ስህተት — ቀጥታ 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" />
04
ካሽ ማድረግ — ተመሳሳይ መረጃ ሁልጊዜ አትጠይቅ!

ካሽ ማድረግ ማለት ውጤቱን ቀምጦ ማስቀመጥ ነው — ሁልጊዜ ዳታቤዝ አትጠይቅ! Redis = በማህደረ ትውስታ ውስጥ የሚቀመጥ ካሽ — በጣም ፈጣን ነው!

caching.js — Redis Cache
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;
}
05
ቀጥታ የፈጣን ማድረጊያ ሙከራ
⚡ Performance Lab
🏆 Lighthouse
⚡ ፍጥነት ንጽጽር
✅ ዝርዝር

ከኋላ እና ከፊት ያሉ ውጤቶች፡

ከዚህ በፊት — ምንም ማሻሻያ የለም
42
Performance
68
Accessibility
72
Best Practices
38
SEO
ከዚህ በኋላ — ማሻሻያ ተደርጎ
96
Performance
98
Accessibility
100
Best Practices
100
SEO

ተመሳሳይ ገጽ — ከኋላ እና ከፊት ያለው ጊዜ፡

❌ ማሻሻያ ያልተደረገ (4.2 ሰከንድ)
✅ ማሻሻያ የተደረገ (0.8 ሰከንድ)

የፈጣን ማድረጊያ ዝርዝር — ምን ሰርተሃል?

ውጤት፡ 0/8
06
ተግባራዊ ምክሮች ለጀማሪዎች
1
የመጀመሪያው እርምጃ

በChrome DevTools ውስጥ Lighthouse አሂድ እና ውጤቱን መዝግብ።

2
ምስሎችን ለውጥ

ሁሉንም ምስሎች WebP አድርግ እና lazy loading ጨምር።

3
ኮድ መከፋፈል

ትላልቅ ክፍሎችን React.lazy ተጠቅመህ ከፋፍል።

4
ካሽ ጀምር

ቀላል ጥያቄዎችን በRedis ውስጥ አስቀምጥ።

5
መጭመቅ ጨምር

Express ላይ compression middleware ጫን።

07
ዋና ዋና ነጥቦች
1
🖼️ ምስሎች — WebP + Lazy Loading

JPEGን ወደ WebP ለውጥ — 70% ያነሰ መጠን! Next.js Image ተጠቀም!

2
📦 ኮድ መከፋፈል — React.lazy()

ከባድ ክፍሎችን በተለየ ጊዜ ጫን!

3
🗄️ Redis ካሽ

ተመሳሳይ ጥያቄ ሲመጣ በ1 ሚሊ ሰከንድ መልስ!

4
🗜️ Gzip መጭመቅ

የመልስ መጠን በ70% ይቀንሳል!

5
📊 መጀመሪያ ለካ — Google Lighthouse!

Chrome DevTools ውስጥ Lighthouse አሂድ!

08
Quiz
❓ ለድር ጣቢያ በጣም ጥሩው የምስል ቅርጸት የቱ ነው?
Which image format is best for web performance?
AJPEG
BPNG
CWebP / AVIF ✅
DGIF