في هذا المقال ، سنرى كيفية قياس وقت تحميل موقع ويب ؟ و سنعطي الأولوية لكيفية تحسينه.
كيفية التّحَقُّق من وقت تحميل موقعك
تحسين وقت تحميل موقعك
إعلم أخي الكريم ، أختي الكريمة أنّ الموقع الذي يستغرق وقتاً طويلاً في التحميل يُوَلِّد الإحباط وعدم الراحة والرضى لدى الزوار . لدرجة أن أي بطء قد يجعلهم يتحولون إلى وجهة أخرى. ووفقَ أمازون الذي يعتبر أكبر سوق إلكتروني في العالم، فإن وقت التحميل الذي يزيد بمقدار 100 جزء من الثانية ( 100 ms ) سيؤدي إلى خسارة 1 ٪ من معدل رقم المعاملات! و يعد وقت التحميل أيضاً أحد معايير تحسين محركات البحث (SEO) التي تأخذها محركات البحث في الاعتبار .
لذلك من المهم جداً قياس وقت تحميل صفحات موقعك وتحسينها. إستعن : بطرق قياس موقع الويب
كما رأينا آنفاً في رابط « طرق قياس موقع الويب » ، هناك العديد من الأدوات لقياس وقت تحميل الصفحة. أشهرها GT Metrix و Pingdom. وفي سياق شرحنا هذا سوف نستخدم GT Metrix.
∴ لاختبــــار وقت تحميل موقعك مع GT Metrix:
- انتقل إلى https://gtmetrix.com وأنشئ حساباً مجانياً للحصول على أرشيف اختباراتك والاستفادة من المزيد من الخيارات؛
- انقر فوق “خيار التحليل” « Analysis option » واختر المدينة الأقرب لمنطقتك الجغرافية المستهدفة (هنا ، لندن) ؛
- أدخل عنوان URL للصفحة وانقر على “تحليل” « “Analyze ».
بعد دقيقة أو دقيقتين ، ستحصل على نتائج تحليل الأداء.
تحسين وقت تحميل موقعك
-
- أهم المؤشرات هي “حيوية الويب” Web Vtals:
- LCP ⇐ Largest Contentful Paint ( أكبر رسم محتوى ) : يتوافق مع التأخير في عرض محتوى الصفحة. من الناحية المثالية ، يجب أن يكون أقل من 1.2 ثانية.
- TBT ⇐ Total Blocking Time (إجمالي وقت الحظر ) : هذا هو الوقت الذي يستغرقه تحميل البرامج النصية وخلاله يتم حظر التفاعلات ؛ يجب أن يكون بشكل مثالي أقل من 150 مللي ثانية.
- CLS ⇐ Cumulative Layout Shift ( إزاحة التخطيط التراكمي ) : يقيس التحولات في عرض الصفحة (القسم الذي يتوسع بعد تحميل صورة ، على سبيل المثال) والذي يمكن أن يتداخل مع القراءة. يجب أن يكون أقل من 0.1 بشكل مثالي.
- أهم المؤشرات هي “حيوية الويب” Web Vtals:
إنتقل بين الأزرار تحت جدول النتيجة:
- من ناحية أخرى ، فإن درجات PageSpeed ( سرعة الصفحة ) و Yslow ( تحليل سرعة الصفحة ) ليست مهمة حقاً وهي تعطي مقياساً شخصياً لأداء الصفحة.
- التوصيات الخاصة بالنتيجة الواردة أدناه مثيرة للاهتمام فهي تقوم بتحديد أسباب بطئ موقعك.
- تعد علامة التبويب Waterfall غاية في الأهمية فهي تتيح لك تحديد الموارد ( الداخلية ، مثل الصور . أو الخارجية ، مثل البرامج النصية لبرنامج Google Analytics ، وخرائط Google ، وكل ما يساهم في بطئ وقت تحميل صفحتك.
تحسين وقت تحميل موقعك
الآن بعد أن رأينا كيفية قياس وقت التحميل ، سنرى كيفية تحسينه.
كيفية إعداد طريقة التخزين المؤقت (cache ) وتحسين تحميل الموارد الثابتة
∴ هناك طريقة سريعة وسهلة لتحسين وقت تحميل صفحاتك وهي تثبيت مكون إضافي لذاكرة التخزين المؤقت. وهذا يجعل من الممكن تخزين الصفحات مؤقتاً حتى لا يتم إعادة إنشائها بالكامل في كل مرة تتم زيارتها ، وبالتالي يتمكن الزوار من استلامها بشكل أسرع.
هناك عدة أنواع من ذاكرات التخزين المؤقت:
- ذاكرة التخزين المؤقت OP التي تُخَزِّن الملفات مؤقتاً: لا يتم إفراغها إلاّ إذا قمت بتعديل ملفات الموقع عبر FTP ، مثلاً ؛
- ذاكرة التخزين المؤقت للتطبيق (التي يتم تكوينها عبر مكون إضافي وتخزين الصفحات حين تطلب إنشاءها مؤقتًا) ؛
- وذاكرة التخزين المؤقت للخادم (التي يتم تكوينها من جانب المُضيف والتي تُخَزِّن عموماً جميع الصفحات مؤقتاً (full page cache ” ذاكرة تخزين كاملة للصفحة ” )).
إن الذاكرة الأكثر فاعلية هي ذاكرة التخزين المؤقت للخادم ، ولكنها لا تُقَدَّمُ من قبل جميع المُضيفين. إذا كنت تستخدم Themecloud ، فيمكنك تفعيله في علامة التبويب “أدوات” عن طريق اختيار “Cache FastCGI“. في هذه الحالة، لن تكون بحاجة لاستخدام المكونات الإضافية لذاكرة التخزين المؤقت ، ولكن يبقى المكون الإضافي لتحسين تحميل الموارد الثابتة مفيداً.
من ناحية أخرى ، فإن هذا يعني أن التغييرات التي تُجريها على الموقع لن تكون مرئية على الفور إلا إذا قمت “بمسح ذاكرة التخزين المؤقت”. لذلك لا تنس إلغاء تنشيطه أو إفراغه بانتظام عند العمل في الموقع ، لأنك أحياناً تقوم بتعديلات في موقعك، وعندما تعود للموقع لترى هذا التغيير ، فإنه لن يظهر لك شيئاً. الحل! هو تفريغ ذاكرة التخزين.
لتفريغ ذاكرة التخزين المؤقت ، تضيف أحد المكونات الاضافية مثل « WP Rocket » . بشكل عام ، يجب أن يكون لديك ما يساعدك على ذلك ، فتقوم ب ” مسح ذاكرة التخزين المؤقت” من خلال قائمة الاعدادات في الشريط الجانبي لإدارة موقع ووردبريس أو في الشريط العلوي. مثل ما في الصورة 
يُـوصى أيضاً بتحسين تحميل الموارد الثابتة (ملفات JS و CSS) عن طريق تصغير الملفات ،
كما أوصي باستخدام المكون الإضافي WP Rocket للتخزين المؤقت ، الذي طورته WP Media ، وهي شركة فرنسية متخصصة في WordPress! إنه سهل الاستخدام وفعال للغاية ولديه فريق دعم جيّد. ويغطي كلاً من ذاكرة التخزين المؤقت وتحسينات تحميل الموارد الثابتة. من ناحية أخرى ، فإن هذا البرنامج المساعد ليس مجانياً، لذلك ليس بالضرورة مناسباً لجميع المشاريع.
البديل المجاني الجيّد هو المكون الإضافي WP Super Cache وهو سهل الاستخدام للغاية ويوفر أداءً جيّداً. إذا كنت تشعر بأنك خبير ، يمكنك أيضاً إلقاء نظرة على W3 Total Cache ، وهو مجاني أيضاً ، ولكنه يقدم العديد من الخيارات لتحسين الأداء بدقة.
ومع ذلك ، لا يغطي هذا المكون الاضافي الأخير تحسين تحميل الموارد ، لذا يمكنك ربطه بالإضافة Autoptimize الذي يدير هذه الجوانب.
نظف قاعدة البيانات الخاصة بموقعك
يوجد سبب آخر لبطء التحميل وقد يكون رئيسياً. وهو زيادة التحميل على قاعدة البيانات ( مُثقلة فوق طاقتها ). والسبب في هذا الثقل قد يعود إلى المكونات الاضافية التي تُـخَـزِّنُ العديد من بياناتها المؤقتة دون حذفها بانتظام ، كما يمكن أن تتراكم سجلات المقالات في قاعدة البيانات وغيرها …
تحسين الصور
تحسين وقت تحميل موقعك
يُلاحظ أنّ مِن أكثر الأسباب شيوعاً لطول وقت تحميل صفحات المواقع ، هو استخدام الصور غير المحسّنة للويب.
صراحةً ، عندما تنظر إلى خصائص الصور العالية الدّقة تجدها تزن عدة ميغا بايت ، وبالتالي يستغرق تحميلها عدة ثوانٍ!
وأفضل حل لتفادي هذا التأخير في تحميل صفحاتك هو تحسين الصور قبل استيرادها إلى موقعك WordPress، وذلك باستخدام عدة وسائل مثل: Photoshop أو الأدوات المجانية مثل موقع Tinyjpg لضغط صورك.
لتحسين الصور بشكل جيّد، تفضل هذه الروابط التي ستفيدك كثيراً:
يجب ألا يزيد وزن الصورة بشكل عام عن بضع مئات من الكيلوبايت.
إذا كان وقتك لا يسمح لك بتحسين الصور يدوياً أو أنك حصلت على موقع به العديد من الصور الغير المحسّنة ، فيمكنك الذهاب إلى استخدام المكونات الإضافية لتحسين الصور.
كيف ؟ يقدم فريق WP Rocket البرنامج المساعد Imagify ، مدفوع الثمن أيضاً. وبالمقابل يوجد بديل مجاني هو ShortPixel ، والذي يتيح لك تحسين 100 صورة شهرياً مجاناً بدون حد للحجم أو الوزن!
كيفية ضبط الأحجام الصحيحة للصور
حتى وإن تم تحسين صورك من حيث الوزن ، فيجب الانتباه أيضاً إلى حجم الصور الذي يجب أن يتناسب مع الحجم المُسْتَخدَم في المحتوى.
في كثير من الأحيان نشاهد صوراً معروضة بعرض 300 بكسل على الشاشة ، لكن حجمها الأصلي هو 1200 بكسل! لذلك نجد أن WordPress ينشئ تلقائياً أحجاماً مختلفة من الصور المصغرة ، والتي يمكنك تحديدها بسهولة في Elementor أو في محرر WordPress اعتماداً على حجم العرض الذي تريده. فقط لا تنسى أن تفعل ذلك.
طبعاً هناك العديد من المجالات الأخرى لتحسين الأداء و التي لا يسمح الوقت بعرضها هنا ما دامت موجودة في مقالات أخرى داخل موقع Jabism.com :
الخلاصة
- إذا كان مضيفك لا يقدم ذاكرة تخزين مؤقت للسيرفر، فاستخدم مُكوناً إضافياً لذاكرة التخزين المؤقت مثل WP Rocket أو WP Super Cache لتحسين وقت تحميل موقعك.
- إذا لم يتم إنجاز هذا الأمر من خلال المكون الاضافي الذي استخدمته لذاكرة التخزين المؤقت ، فاستخدم إضافة ووردبريس مثل Autoptimize التي تقوم بالتحسين التلقائي لتحميل الموارد الثابتة.
- قم بتحسين حجم صورك بواسطة برنامج مساعد مثل ShortPixel ، ولكن لا تنس تحسين حجم الصورة التي تم استيرادها، وذلك عن طريق تحديد حجم الصورة المصغرة الذي يناسب حجم عرض الشاشة الفعلي لديك.
بعد هذه التحسينات، يمكن أن نقول أنه أصبح لدينا الآن موقعاً سريعاً ومحسناً، مما سيعمل على تحسين محركات البحث. ومع ذلك ، لا يزال هناك العديد من النقاط التي يجب التحقق منها قبل وضع موقعك على الإنترنت ؛ و هذا ما يمكنك اكتشافه من خلال الروابط التي أدرجتها داخل المقالة.
في أمان الله
« كم من أناس صرفوا العمر في إتقان فن الكتابة ليذيعوا جهلهم لا غير » لا تكن من هؤلاء
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.
