سرعة الموقع

[abdallahmiri]

سؤال بسيط عن سرعة الموقع Google speed

عملت موقع بسيط واختبرت السرعة 37% للهاتف ولكن كانت الملفات css بهذا الشكل

    <link rel="stylesheet" href="ex1.css">
    <link rel="stylesheet" href="ex2.css">
    <link rel="stylesheet" href="ex3.css">
    <link rel="stylesheet" href="ex4.css">

بعد كدة استعملت import على الملفات لكلها فى الملف الرئيسي وبقى ملف واحد فى html

@import "ex2.css";
@import "ex3.css";
@import "ex4.css";

html

<link rel="stylesheet" href="ex1.css">

اصبح سرعت الموقع 74% https://abdallah-miri.github.io/food/

ماذا يحدث فى رأيك فى اختبار سرعة الموقع وهل التقنيات او framework css html js لها تأثير كبير ام مجرد تسهيل فى الكود وسرعة العمل على المشاريع؟ اقتراحاتكم

كورتابز ماذا عنها landing page

[LouayH]

أهلا عبد الله،

ربما تكون ملفات الـ CSS لديك حجمها صغير ولا تؤثر بالفعل على سرعة موقعك، لكن خدمات قياس سرعة الموقع تأخذ الأمر من منظور آخر.

على سبيل المثال، أن تطلب من المتصفح استدعاء ملف CSS واحد أفضل من أن تطلب منه استدعاء 4 ملفات.

هناك العديد من الـ Plugins التي تساعدك على زيادة سرعة تحميل موقعك، كأن تقوم بعمل minify أو optimization للكود أو عمل compress للملفات والصور بغرض تقليل حجمها.

هذه الإضافات يتم استخدامها في الـ Frameworks، كما يُمكنك استخدامها بشكل منفصل دون أُطر عمل.

في كورتابز نهتم كثيرًا بسرعة تحميل الموقع، رغم أن الأرقام في Page Speed تقول عكس ذلك

السبب هو استخدام العديد من 3rd Party Plugins من مواقع وسيرفرات مختلفة، هذه الـ requests لا يمكننا التحكم بها ولذلك هي تكلفنا الكثير من النقاط في قياس سرعة الموقع.

لكن على أرض الواقع، نعتقد أن سرعة التحميل جيدة، أليس كذلك

[abdallahmiri]

نعم كنت متوقع كدة الصور لها تئثير كبير على تحميل الموقع وPlugins المستخدمة

نعم موقع كورتابز سريع فى التحميل حقيقة

[elBatel]

مرحبا اخي

سرعة الموقع تعتمد على الكثير من العوامل التي تصعب علىينا ادارتها للخروج بنيتجة مرضية ولهذا ضهرت العديد من المكتبات و الادوات للمساعدة في هذا الامر مثل ما اخبرك اخي @LouayH

@LouayH

هناك العديد من الـ Plugins التي تساعدك على زيادة سرعة تحميل موقعك، كأن تقوم بعمل minify أو optimization للكود أو عمل compress للملفات والصور بغرض تقليل حجمها.

مثلا الموقع لاستدعاء ملف css واحد يقوم بارسال request واحد اما في حالتك يقوم بالامر في 4 طلبات الامر لا يشكل فرق حاليا او مشكلا لكن لو زادت حركة المرور في الموقع اي عدد اضربه 4
لوكان العدد 100 الف زائر سيحتاج لـ 400 الف طلب عكس لوكان ملف css واحد
اما حجم الملف انت لن تستخدم جميع الكلاسات الموجودة ويوجد عديد الكلاسات المكررة مما يؤثر على سرعة تحميل الملف
ولهذا ضهرت العديد من التقنيات لهذا الامر منها atomic css و css-in-js و tailwindcss و purgcss …و غيرها العديد
و يوجد ايضا ضغط الملفات ; تحسينها منها bundle و minify بادوات مثل webpack و parcel
حتى بعض التقنيات منها اصبحت مدمجة في بعض الاطر منها
webpack في react و
purgcss في tailwindcss …الخ

[abdallahmiri]

تحليل جميل @elBatel شكراً

[sniperadmin]

سؤال رائع!
سجلت فيديو 8 دقائق مختصر عن الperformance من تجربتي الخاصة خلال تجربتي في الشهر الحالي

[abdallahmiri]

بصراحة احييك على الفيديو شرح بسيط

حالياً بتعلم java script ومش عوز ادخل فى اي مكتبات غير لما اطبق حتى لو شئ بسيط ايه رأيك

[LouayH]

صحيح أن العديد من أُطر العمل في الوقت الحالي أصبحت تعتمد مبدأ الـ Components في إنشاء التطبيقات، بهدف تسهيل إعادة استخدام تلك العناصر، لكنها بالحالة الافتراضية تعطيك كامل كود جافا سكريبت في ملف واحد

وقد وفرت هذه الأُطر عدة طرق لعمل Code Splitting بإمكان المطوّر استخدام ما يناسبه منها حسب طبيعة مشروعه

[abdallahmiri]

حقيقة شكراً لكم موضوع مهم وتفاصيل رائعة منكم @LouayH @sniperadmin @elBatel

[sniperadmin]

تمام، يلا نطبق
يمكنك الاستعانة ببعض الأفكار المطروحة سابقا:

1. ورشة تطبيق web - JavaScript (أولا: الرسم بالجافاسكريبت)

2. ورشة تطبيق web - JavaScript (ثانيا: التحريك animation)

3. ميقات StopWatch ناطق من تصميمي

4. سلسلة التحدي الأسبوع الأول - نتائج التحدي 3

5. سلسلة التحدي الأسبوعي

يمكنك الاستفادة كما تشاء
بالتوفيق

[sniperadmin]

متفق معك تماما

[sniperadmin]

دي دورة مجانية من google صغيرة عن اساسيات الperformance
https://www.udacity.com/course/website-performance-optimization--ud884

[abdallahmiri]

يمكنك الاستعانة ببعض الأفكار المطروحة سابقا:

تمام سوف اقوم بالتطبيق

دي دورة مجانية من google صغيرة عن اساسيات الperformance

دورة جميلة شكراً @sniperadmin