JavaScript is not enabled!...Please enable javascript in your browser

جافا سكريبت غير ممكن! ... الرجاء تفعيل الجافا سكريبت في متصفحك.

الصفحة الرئيسية

كيف قمت بتسريع وقت تحميل موقع Laravel بنسبة 60% – خطوات حقيقية من مشروع عميل

 


✍️ المقدمة:

عندما سلّمني أحد العملاء مشروعًا مبنيًا بلغة PHP وإطار Laravel، لاحظت أن الموقع بطيء بشكل واضح، وخصوصًا في الصفحات التي تحتوي على بيانات كثيرة.

المشكلة لم تكن في الكود فقط، بل في عدة عوامل مجتمعة أثرت على أداء الموقع وتجربة المستخدم. في هذا المقال سأشارك معك كيف قمت بتحليل المشكلة، وتسريع تحميل الموقع بنسبة وصلت إلى 60% فعليًا، بخطوات بسيطة لكنها فعالة.

🚦 المشكلة التي بدأت بها:

  • تحميل الصفحة الرئيسية كان يستغرق أكثر من 5 ثوانٍ

  • بعض استعلامات قاعدة البيانات كانت بطيئة جدًا

  • حجم الصفحة عند الفحص بـ Google PageSpeed تجاوز 3 ميجابايت!

🛠️ خطوات التحسين التي قمت بها فعليًا:

✅ 1. تفعيل الكاش في Laravel

php artisan config:cache
php artisan route:cache
php artisan view:cache

🔹 هذا وحده ساعد في تقليل زمن معالجة السيرفر بنسبة واضحة.

✅ 2. تقليل عدد الاستعلامات (N+1 Problem)

كان الكود يحتوي على استعلامات مثل:

foreach($posts as $post) {
    echo $post->user->name;
}

🛑 هذا يولد استعلامًا جديدًا داخل كل تكرار.

✅ قمت بتعديله إلى:

$posts = Post::with('user')->get();

🔹 وتم تقليل عدد الاستعلامات من 101 إلى 2 فقط!

✅ 3. ضغط الصور تلقائيًا عند الرفع

باستخدام مكتبة Intervention Image، قمت بإعادة تحجيم الصور قبل حفظها:

Image::make($request->file('image'))->resize(800, null, function ($constraint) {
    $constraint->aspectRatio();
})->save(public_path('images/'.$imageName), 75); // جودة 75%

🔹 تقليل حجم الصور ساهم كثيرًا في تقليل وقت التحميل.

✅ 4. تفعيل التخزين المؤقت للصفحات

استخدمت مكتبة Laravel Page Cache لتخزين صفحات العرض الأكثر زيارة لمدة 10 دقائق.

composer require silber/page-cache

🔹 هذا سمح للموقع بإرسال HTML ثابت بدل توليد الصفحة في كل طلب.

✅ 5. تحميل الصور بشكل Lazy

أضفت خاصية loading="lazy" لكل الصور:

<img src="/images/pic.jpg" loading="lazy" alt="صورة">

🔹 وبهذا لا تُحمّل الصور إلا عند اقترابها من الشاشة، مما سرّع ظهور الصفحة.

✅ 6. تقليل تحميل ملفات CSS و JS

  • دمجت الملفات باستخدام Laravel Mix

  • فعلت minification وضغط الملفات

  • أضفت defer للـ scripts:

<script src="/js/app.js" defer></script>

📈 النتيجة بعد التحسين:

(المقياس) (قبل) (بعد)
(زمن التحميل) (5.1 ثانية) (2.0 ثانية)
(عدد الاستعلامات) (+100) (10 أو أقل)
(تقييم Google PageSpeed) (52 / 100) (91 / 100)

🔹 العميل كان منبهر بالفرق، وتجربة المستخدم تحسنت فورًا.

💡 نصائح ذهبية لأي مبرمج Laravel:

  • لا تكتب أي حلقة تحتوي على استعلام داخلها.

  • فعّل الكاش دائمًا في بيئة الإنتاج.
  • راقب حجم الصور وملفات الـ assets.

✅ الخلاصة:

تحسين الأداء ليس مجرد ترف، بل ضرورة.
تجربة المستخدم تبدأ من السرعة، ولا فائدة من موقع جميل لكنه بطيء.

بخطوات بسيطة ومدروسة، يمكنك رفع أداء أي مشروع Laravel بشكل ملحوظ، وستلاحظ الفرق فورًا في سعادة المستخدمين… وحتى في ترتيب موقعك على Google!

💬 هل واجهت مشكلة مشابهة في مشروعك؟

اكتب لي التفاصيل وسأخصص لها مقالًا في هذه السلسلة.


الاسمبريد إلكترونيرسالة