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

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

قبل أي حاجه الصور المرفقة دي من أحد المواقع الخاصة بي اللي اشتغلت عليها. وأهم حاجه لازم تاخد بالك منها هي مقياس CLS و LCP و FCP انت ممكن تجيب العلامه الكامله 100% في pagespeed على الموبايل والديسكتوب ومع ذلك ممكن تلاقي عندك اخطاء في جوجل سيرش كونسول.

في البدايه حابب بس اقول ان البوست ده عبارة عن تجارب ناجحة وجابت معايا نتيجه والحمدلله وحابب انوه اني خبرتي قليلة في البرمجة فـ عذرا لو في مسميات مغلوطة. والشرح موجه أكثر للمبتدئين عشان كده اي نقطه اتكلمت عنها شرحتها بالتفصيل الممل فـ عذرا للناس اللي بتمل من الممل😅

هناخد العوامل بالترتيب كده والشرح هيكون مبسط قدر الإمكان ان شاء الله.

1- الاستضافة.

الاستضافة هي اول حاجه لازم تفكر فيها لانها العامل رقم 1 في تسريع موقعك لازم موقعك يكون على استضافة قوية وسريعه حاول تبعد عن الاستضافة المشتركه قدر الامكان وحاول كمان تبعد عن الاستضافات الموجوده في المقال ده https://en.wikipedia.org/wiki/Endurance_International_Group انا مش عاوز اتكلم في النقطه دي كتير لان اغلبنا اكيد هرس موضوع الاستضافات ولكن على كل حال لو هنصح حد مبتدا يبقا عليك وعلى فاست كوميت.

2- الثيم.

لازم ولابد بعد الاستضافة يكون عندك ثيم خفيف زي Astra مثلا و Generatepress ولكن انصح بالابتعاد عن تصميم الموقع باستخدام Elementor رغم انه اشهر مبني صفحات بس في نفس الوقت بطيء وبيضيف اكواد للصفحه ملهاش لزمة والبديل الافضل لـ Elementor هو Oxygen Builder (اخف مبني صفحات) هتحتاج شوية خبره مع اوكسجين بس مش هتقابل نهائي مشاكل إزالة جافا سكريبت غير المستخدمة و إزالة CSS غير المستخدمة. ومن القوالب اللي بفضلها برضه قالب جنه وقالب صحيفة.

3- تحديث اصدار PHP.

نيجى بقى للشغل اول حاجه هنروح نبص على اصدار الـ php ونحدثه. لو بتستخدم فاست كوميت هتفتح الـ cPanel وتنزل على software وتدوس على Select PHP Version هتلاقي فوق جمب Current PHP version اصدار php وليكن مثلا 7.3 هتدوس على current وتختار اصدار 7.4 ونصيحه متخترش دلوقتي اصدار 8 لأنه متعارض حاليا مع اغلب البلجن وده اللي حصل معايا ممكن تجرب وتفتح موقعك لو لقيت فيه اخطاء يبقى ترجع للاصدار 7.4

4- تعطيل المزايا الغير ضرورية في الووردبريس او البلجن او الثيم.

في الخطوه دي هنحتاج اضافة perfmatters اضافة مدفوعه تمنها 25 دولار وفي بديل اخر مجاني وهي اضافة Clearfy.

اول حاجه من لوحة تحكم ووردبريس هنروح على الاعدادات>> مناقشة ونعطل الصور الرمزية كده مفيش صور رمزية هتظهر للكاتب ولا في التعليقات طب ليه هنعطلهم؟ لان في كل مرة صفحتك بتحمل المتصفح هيحتاج يعمل طلب خارجي لـ Gravatar عشان يعرض الصوره الرمزية تخيل عندك مقال فيه 50 تعليق شوف المتصفح هيعمل كام طلب خارجي؟

وفيه حل اخر هنعرفه في النقط الجايه هيحللنا المشكله دي وكمان يحل مشاكل أكواد التعليقات وجميع طلباتها ويأخرها خالص لحد ما صفحتك تتحمل.

بعدين نروح على الإعدادات >> perfmatters ثم Options ثم general.

هنفعل خيار تعطيل Disable Emojis: بتحمل ملف JavaScript في كل صفحة في موقعك وبتضيف وقت تحميل بطلب HTTP اضافي غير ضروري.

هنفعل خيار تعطيل Disable Embeds: نفس الكلام بتحمل ملف JavaScript بيبطئ موقعك ولو معطلها من ويب روكيت يبقى سيبها هنا.

وعشان مطولش في النقطه دي عطل كل الخيارات اللي هكتبهم دول

(ملحوظه بس عشان دماغك متلفش احنا هنفعل الخيارات دي عشان نعطل المزايا)

فعل Disable XML-RPC

فعل Remove jQuery Migrate (تحذير لو بتستخدم منشئ صفحات زي Divi أو Elementor أو Thrive Architect أو Visual Composer يبقى سيبه متعطلوش عشان هيحصل لموقعك مشاكل.

فعل Hide WP Version

فعل Remove wlwmanifest Link

فعل Remove RSD Link

فعل Remove Shortlink

فعل Remove RSS Feed Links الخيار ده مش هيعطل الـ RSS عندك هو فقط هيحذف التعليمات البرمجية الإضافية الغير مستخدمة في موقعك

فعل Disable Self Pingbacks

فعل Disable REST API واختار Disable for Non-Admins

فعل Remove REST API Links

فعل Disable Dashicons

فعل Disable Google Maps

فعل Disable Google Fonts

فعل Disable Password Strength Meter

فعل Remove Comment URLs

فعل Disable Heartbeat في قسم كامل عن الخاصية دي في ويب روكيت لو عاوز تفعلها هنا يبقى الافضل تختار Only Allow When Editing Posts/Pages

واختار Heartbeat Frequency 60 ثانيه ومتنساش تعطل الميزه دي في ويب روكيت.

فعل Limit Post Revisions

فعل Autosave Interval

مهم Change Login URL الخيار ده هيمكنك انك تغير عنوان لوحة تحكم ووردبريس الخاصة بموقعك من wp-admin الى اي عنوان خاص بيك انت عاوزه هو كويس وهيأمن موقعك من (المتسللين) والروبوتات السيئة اللي بتحاول توصل لموقعك.

ولكن منصحش بيه للمبتدئين لانه هيدخلك في حوارات تانيه لازم تعملها زي التعديل على ملف الروبوت واضافات الكاش واعدادات Page Rules في كلاود فلير فـ انت وراحتك حابب تتعامل مع الخاصية دي يبقى انصحك تتعامل معاها بحذر لان اي غلطه هتبوظ الدنيا.

بعدين نروح على Extras ثم Assets ونفعل Script Manager بعد كده نتأكد ان شريط الأدوات متفعل في واجهة الموقع لو متعطل هتروح على لوحة تحكم ووردبريس >> أعضاء >> حسابك >> وتعلم على إظهار شريط الأدوات في واجهة الموقع.

بعدها هتفتح صفحة من مقالاتك ((طبعا كلنا عندنا الاولوية ان صفحات المقالات الاهم في التحسين لذلك هنبدأ بيها وبعدين نشوف الصفحة الرئيسية وصفحات الإرشيف))

بعد مافتحنا المقال هنلاقي في شريط الادوات فوق Script Manager هندوس عليها هتفتح معاك كل الاضافات وملفات جافا سكريبت والـ CSS اللي بتتحمل في الصفحه.

طبعا دي صفحة مقالات يبقى في الأول هنركز على البلجن اللي بتتحمل في المقالات واحنا اساسا مش بنستخدمها للمقالات زي مثلا…

بلجن Contact Form 7 مفعلنها فقط عشان صفحة اتصل بنا ومع ذلك بتحمل ملف حجمه 13.4 KB في جميع صفحات الموقع بيبطئ في تحميل الصفحه يبقى في الحالة دي هنعطل الاضافة وندوس على Everywhere (تعطيل في كل مكان) ونعمل استثناء فقط لصفحة اتصل بنا كده النقطه دي اتفهمت البلجن اتعطلت في الموقع كله باستثناء صفحة اتصل بنا.

تبتدي بقا تشوف ايه هيا الاضافات اللي منصبها عندك بتحمل في المقالات وانت مفعلها عشان حاجه تانيه. طبعا كل موقع بيختلف في إضافاته ولكن في اضافات مشهوره بتلاقيها في كل المواقع زي مثلا اضافة جدول المحتويات Table of Contents تعطلها في كل مكان وتعمل استثناء فقط للمقالات عشان متحملش معاك في الصفحة الرئيسية وصفحات الارشيف وزي مثلا اضافة Jetpack اللي بتبطئ الموقع جدا واغلبنا مفعلها عشان ميزه او اتنين بالكتير انا مثلا مفعلها عشان ميزة الاحصائيات اللي فيها ولو انت زيي يبقى اولا تفتح اعدادات البلجن نفسها وتعطل جميع المزايا الغير مستخدمة وتروح على Script Manager اللي كنا شغالين عليه وتعطل منها فقط ملف jetpack_css اللي حجمه 75 KB وبيتحمل في كل صفحات موقعك بعدها مش هتلاقيلها أي تأثير يذكر على سرعة موقعك.

بعد ما خلصت الاضافات وشيكت عليها هتبص بقا على ملفات الثيم اللي بتحمل في الصفحه وهنا لازم تتعامل بحذر لو انت عندك خبره في البرمجه وعارف ملف الجافا سكريبت وملف الـ CSS بيتحمله في الصفحه هنا ليه ومحتاجهم ولا لا يبقي اكيد هتتعامل مش هتستناني يعني😅

ولو معندكش خبره يبقا الافضل متعطلش حاجه الا اذا كنت مهووس بالسرعة زي حلاتي😂 يبقى تكلم الدعم او مطور القالب وتسأله لان هتلاقي عندك ملفات كتير وحجمها كبير ممكن يكون من ضمنهم ملفات خاصة باستايلات الصفحة الرئيسية مثلا مش محتاجها في المقالات وتفرق معاك جدا في حجم الصفحة وتحميلها.

5- تحسين CLS.

كنت قلت قبل كده ان مشكلة CLS سببها ان في عناصر في صفحتك بتسبب تحويل في تخطيط الصفحه زي مثلا انت مفعل اعلانات ادسنس التلقائية ومش عامل تأخير لملفات الجافا سكريبت اللي من ضمنهم adsbygoogle وفي اعلان عندك بيظهر تحت الهيدر مثلا.

في الكام جزء من الثانية اللي الاعلان مظهرش فيهم بيبان تخطيط صفحتك طبيعي لحد ما الاعلان يظهر هوب يقوم واخد مساحة تحت الهيدر وينقلك الباقي لتحت هنا هيظهر في صفحتك ان عنوان المقال والميتا والصورة البارزة وجدول المحتويات وأي عنصر في الجزء المرئي من الصفحة اللي نزلوا تحت الاعلان بيسببوا تحويل في التخطيط الخاص بالصفحه.

طب حل المشكله دي ايه؟؟ اول حل هو اننا نعطل الاعلانات التلقائية ونشتغل يدوي ونحجز مساحة مسبقة للإعلان بحيث ان الصفحه وهي بتحمل مكان الاعلان يكون محجوز مسبقا و يبقى معروف تخطيط الصفحه ده فين وده فين وميكونش فيه اختلاف بعد كده.

تاني حل وهو اننا نشتغل ع الاعلانات التلقائية زي ما احنا بس نعمل تاخير لملف جافا سكريبت الخاص بادسنس (adsbygoogle.js) من اضافة الكاش وهو هيبقا موجود تلقائي في اضافة ويب روكيت.

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

تاني سبب من أسباب CLS هو لوجو الموقع. طبعا كلنا مفعلين التحميل الكسول أو LazyLoad للصور وهنفترض مثلا ان لوجو الموقع مقاسه كبير شوية على هيدر موقعك وانت مش عارف تظبط المقاس او لما بتصغره ابعاد اللوجو بتروح ومبيبقاش زي ما انت عايزه على الموبايل ف سيبته كده على وضعه.

بما ان التحميل الكسول شغال فـ اثناء ما صفحتك بتحمل فـ الكام جزء من الثانية اللي اللوجو لسه مظهرش فيهم هيظهر الهيدر طبيعي واول ما اللوجو يحمل هيبدأ الهيدر يكبر عشان يتكيف مع مقاس اللوجو أو اللوجو يتكيف معاه😂 طبعا ده تغيير في التخطيط وش وعمل زيادة في CLS.

طب الحل ايه؟؟ (ملحوظه لازم تعمل الخطوات دي حتى لو اللوجو عندك مقاسه مظبوط)

اول حاجة لازم نعمل استثناء للوجو من الـ LazyLoad هنروح على موقعنا وناخد عنوان صورة اللوجو بس خللي بالك مش هناخد الرابط كامل احنا هناخد فقط اسم اللوجو اللي بيبقى في اخر الرابط زي مثلا logo.png ونروح ع الاضافة اللي مفعلين منها التحميل الكسول وليكن مفعلينه في ويب روكيت يبقا نروح على Media ثم التحميل الكسول هنلاقي تحت خيار Excluded images or iframes نحط الرابط ونعمل حفظ..

تاني حاجه هنعمل تحميل مسبق لصورة اللوجو والخطوه دي مش بس هتحسن من CLS لا هتحسن كمان من FCP و LCP هناخد المرادي رابط صورة اللوجو كامل ونروح على بلجن Perfmatters ثم Extras ثم Preloading وننزل على Preload ونحط رابط صورة اللوجو ونختار في الاوبشن اللي جمبها Image ومنحددش على CrossOrigin نسيبها فاضية ونعمل حفظ التغييرات.

طيب الناس اللي مشترتش Perfmatters تعمل ايه؟ تنصب إضافة Pre* Party Resource Hints

بعد تفعيلها تفتح البلجن ومن Insert Hints هتلاقي عندك Add New Resource Hint هتحط رابط صورة اللوجو وتعلم على (تحميل مسبق) ومن خيار (as) هنختار image وبعدين ندوس على Insert Resource Hint وبكده نكون خلصنا من مشاكل اللوجو.

من أهم الأخطاء اللي بتسبب CLS هو استيراد ديمو لقالب موقعك. لازم ولا بد تستخدم الاعدادات الافتراضيه لاي قالب مفعله عندك.

(ملحوظة النقطة دي بالذات كانت من أهم الأخطاء اللي بقع فيها)

هنضرب مثال مبسط على النقطة دي.. هنفترض مثلا ان عنوان المقال في الاعدادات الافتراضية للقالب واخد float: right يعني يظهر من اليمين لليسار وجيت عملت استيراد لديمو عنوان المقال فيه center يعني يظهر في منتصف الشاشة لو جيت لاحظت مقالك وهو بيتحمل هتلاقي في لحظه كده اول ما العنوان ظهر ظهر على اليمين ورجع تاني في منتصف الشاشة طبعا دى هتسبب تغيير في التخطيط وتزيد نسبة CLS فـ الحل انك تشتغل باعدادات القالب الافتراضية او تعدل بقى على الحاجات اللي بتعمل تغيير في التخطيط دي تشوفها كانت فين وراحت فين وتعملها يدوي بالـ CSS وافحص وشوف بنفسك التحسين اللي حصل.

مشكلة ايضا تسبب CLS وهي صور بدون أبعاد محددة. لازم صور موقعك يكون متحددلها أبعاد وغالبا اكتر القوالب فيها width و height للصور المهم راجع موقعك وشوف.

وانت بتفحص موقعك على PageSpeed هتلاقي تحت خالص من ضمن التحسينات حاجه اسمها ((تجنُّب الصور المتحركة غير المركّبة تم العثور على (عدد العناصر) عنصرًا متحركًا)).

لو دوست عليها هتلاقي العناصر اللي بيشوفها المتصفح صور متحركه وحلها بسيط هتلاقي تحت كل عنصر كود CSS غير متوافق.

يعني مثلا لقيت انه جايبلي كلمة آخر تحديث وكتبلي جمبها كود الكلمة دي في القالب زي كده <span class=”meta-item last-updated”>آخر تحديث: 2021-04-19</span>

وتحتهم كاتبلي خاصية CSS غير المتوافقة زي مثلا..

خاصية CSS غير المتوافقة: color

خاصية CSS غير المتوافقة: font-size

هقوم فاتح صفحة المقال اللي فحصته وطبيعي هيكون العنصر ده في الميتا اقوم واقف بالماوس على كلمة آخر تحديث وادوس كلكه يمين وانزل على كلمة فحص (زي ما بنعدل على قوالب بلوجر كده)

في اليمين هلاقي الـ CSS وفي الشمال هلاقي HTML هتاكد اني اخترت كود الـ HTML هو هو اللي ظهرلي في PageSpeed واروح على اليمين بتاع الـ CSS هلاقي فوق جمب كلمة hov علامة ( + ) هدوس على العلامة دي هلاقيه ضافلي كود CSS وفيه قوسين هدوس في المنطقه دي بالماوس كلكه شمال واكتب بقا اكواد CSS الغير متوافقة..

انا كان ظهرلي مع عنصر آخر تحديث ان font-size غير متوافق هقوم كاتب font-size وعامل رقم الحجم هو هو ولا اكبر ولا اصغر كذلك مع color هختار لون الخط هو هو وبعدين اخد كود الCSS اللي كتبته ده نسخ واروح على اعدادات القالب بتاعي واشوف فين المنطقة اللي المطور موفرهالي احط فيها اكواد CSS واقوم عامل لصق للكود واعمل حفظ وامسح الكاش وافحص المقال تاني في PageSpeed هلاقي المشكله اتحلت واختفت وهكذا مع باقي الخواص الغير متوافقة.

نيجي لاخر مشكله في CLS وهي الخطوط. نفس الكلام خطوط القالب بتسبب ارتفاع نسبة الـ CLS وعشان نحل المشكله دي دوغري كده على طول لازم نعمل تحميل مسبق للخطوط وعشان نعمل تحميل مسبق للخطوط لازم نستضيفها الأول محليا واهو منها نبقا نهينا على الطلبات الخارجيه اللي بيعملها المتصفح عشان يعرض خطوط جوجل ونبقى حلينا مشكلة CLS اللي بتسببها الخطوط..

طب ازاي نستضيف خطوط جوجل؟ ده اللي هنعرفه ان شاء الله الفقره اللي جايه دي👇

ملحوظة: الاداة الجميلة دي https://webvitals.dev/cls افحص بيها صفحات المقالات وصفحات الارشيف والصفحه الرئيسية لموقعك، الاداة دي فيها شرح كافي عن مشكلة CLS وقياسها للموبايل والديسكتوب وبعد ما تفحص هتطلعلك درجة ال CLS مع صورة متحركة لصفحتك فيها العناصر اللي بتسببلك تحويل في تخطيط الصفحه وهتشوف العناصر دي كانت فين وراحت فين وكمان هتلاقي تحت نتيجة الموبايل والديسكتوب اكواد الHTML الخاصة بالعناصر دي وقد ايه العنصر الواحد بيساهم في زيادة نسبة الـ CLS عندك.

6- استضافة خطوط جوجل محليا

اول حاجه هتروح على خطوط جوجل https://fonts.google.com تختار الخط اللي تحبه انصح باختيار خط واحد فقط ويفضل تختار خط بوزن Regular 400 وتبقى تحدد الـ font-weight برحتك للعناوين بلاش تستخدم خط Bold للعناوين وخط Regular لمحتوى المقال لا خط واحد فقط عشان السرعه.

بعد ما نزلنا الخط من جوجل هيكون بصيغة ttf والصيغه دي قديمه وحجمها تقيل وكفائتها كمان مش كويسه الافضل نرفع الخط بصيغة WOFF او WOFF2 صيغة مضغوطة حجمها قليل جدا وأكثر كفائة في التحميل والسرعه.

 

هنروح على موقع https://transfonter.org نضغط add-font ونختار الخط اللي حملناه ننزل تحت ع الاعدادات نحدد على WOFF او WOFF2 ونيجي على خيار Hinting ونختار Strip hinting عشان حجم الخط يقل اكتر واخيرا نتأكد من خيار Font display انه swap ونضغط على Convert وبعد التحويل ندوس Download وبكده غيرنا صيغة الخط.

قبل ما نرفع الخط نروح عليه الاول بس ونشيل كلمة dehinted- من اسم الخط ونسيبه على اسمه الافتراضي بعدين نروح على الووردبريس >> اضافات واضف جديد وننصب إضافة File Manager ونفعلها ونفتح الإضافة هيحولنا تلقائي على ملفات الموقع الأساسية تأكد انك داخل ملف public_html بعدين هتروح على ايقونة New folder اللي ع الشمال فوق وتدوس عليها عشان نكريت فولدر جديد ونسميه fonts وبعدين نفتحه وندوس على ايقونة Upload files ثم Select files ونختار الفونت.

كده مش فاضل غير اننا نختار بقا الفونت اللي رفعناه ده من اعدادات القالب ودي بتختلف من قالب لقالب اخر.. يعني مثلا لو مستخدم استرا عندك بلجن Custom Fonts البلجن دي خاصه باسترا فقط ولو بتستخدم بابليشر عندك Typography في اعدادات القالب ولو عندك جنه هتلاقي قسم الخطوط في اعدادات القالب.

هنضرب مثال للناس اللي مش عرفه وليكن على قالب بابليشر بعد ما تفتح Theme Options ثم Typography اول حاجه هتلاقي General Typography موجود فيها اختيار الخط الأساسي للـ Body هتدوس على Font Family وتنزل على Custom هتلاقي الخط اللي رفعته تختاره وهكذا بقا مع الـ Header والعناوين.

طيب في قوالب مش متوفر فيها الخواص دي هتعمل ايه؟ هتروح على لوحة تحكم ووردبريس >> المظهر >> تخصيص ثم تنسيقات (CSS) إضافية هتحط الكود ده

@font-face {

font-family: ‘cairo-regular’;

src: url(‘https://###.com/fonts/Cairo-Regular.woff’) format(‘woff’);

font-weight: normal;

font-style: normal;

font-display: swap;

}

اهم حاجه في الكود انك تبدل اسم ورابط الفونت باسم ورابط الفونت الخاص بيك انت.

مثلا هنروح على بلجن مدير الملفات ونفتح ملف الـ fonts اللي أنشأناه ونيجي على الفونت وندوس كلكه يمين وننزل على اخر وحده اللي هيا Get info & Share وندوس عليها هتلاقي جنب Path امتداد الفونت هتنسخ اسم الفونت فقط وتبدله باللي في الكود وكذلك هتلاقي Link الفونت هتدوس عليه كلكه يمين ثم نسخ عنوان الرابط وتلصقه مكان الرابط اللي في الكود.

مش هيتبقا معاك غير انك تخصص بقا الـ CSS بتاعك اي font-family تختار فيه اسم الفونت بتاعك وتلصق الكود في مكان اكواد الـ css زي ما شرحنا فوق في حتة تعديل خواص الـ css الغير متوافق.

كده احنا استضفنا خطوط جوجل على موقعنا وعشان نتاكد نمسح الكاش ونروح نفحص موقعنا في gtmetrix وبعدين نختار Waterfall ثم نحدد على Fonts ونشوف الطلب جاي من موقعنا ولا من دومين جوجل زي fonts.gstatic.com و fonts.googleapis.com

او نفحص في pingdom ونشوف Requests by domain ولو طبقنا صح مش هنلاقي طلبات خارجية للخطوط من جوجل بامر الله.

بعد ما استضفنا الخطوط محليا فاضل معانا اننا نعملها تحميل مسبق عشان نحسن من الـ CLS هنستخدم هنا بلجن perfmatters او ويب روكيت او الاضافة المجانية Pre* Party

مثال بعد ما فحصنا الموقع على gtmetrix واخترنا Waterfall وحددنا على Fonts هننسخ رابط الفونت بتاعنا ونفتح ويب روكيت ثم التحميل المسبق وننزل تحت على Preload Fonts ونحط الرابط وحفظ التغييرات وبكده يبقى انتهينا بأمر الله من مشاكل CLS.

7- تحسين LCP

الـ LCP باختصار هو “سرعة عرض أكبر جزء من المحتوى على الصفحة” المدة التي يتم خلالها عرض أكبر صورة أو نص كما تقول جوجل.

بصراحة المشكلة دي مبحثتش فيها كتير لانها مقابلتنيش غير في موقع واحد فقط على استضافة مشتركة ومع بعض التعديلات حلتها.

ايوه حلتها ازاى بقا؟ بص يا سيدي احنا عندنا مثلا على الموبايل الجزء المرئي من الصفحة للزوار اثناء التحميل بيكون اللوجو ((ركز انا مقولتش الهيدر قولت اللوجو لان اللوجو جزء وايقونة البحث اللي في الهيدر جزء… وهكذا))

كمان بيظهر في الجزء المرئي عنوان المقال والميتا والصورة البارزة كل ده بيظهر اثناء التحميل وعشان متقابلش مشاكل في الـ LCP لازم اكبر جزء مرئي من العناصر اللي بتظهر دي يتحمل ويظهر في مدة لا تزيد عن 2.5 ثانية لو زاد جزء من الثانية وليكن 2.6 ثانية هتلاقيه قلب معاك برتقالي وطالب تحسين😅

طيب ايه اكبر جزء مرئي في العناصر دي عشان أحسنه؟ طبعا وانت مغمض كده من قبل ما تفحص هتبقا الصورة البارزة للمقال هي اكبر جزء مرئي وعشان تتاكد افحص موقعك على pagespeed وانزل تحت على (عنصر “سرعة عرض أكبر جزء من المحتوى على الصفحة” تم العثور على عنصر واحد) ودوس عليها هتلاقي الصورة البارزة.

في الحالة دي مع جودة الصورة وحجمها والتحميل الكسول للصور عموما كانت بتقابلني صعوبة اخلي الصوره دي تظهر قبل 2.5 ثانية ده غير اني على استضافة مشتركة وسرعة الاستجابة كانت مش ولابد.

عملت زي ما بعمل في كل مواقعي وهو اني اخفي الصوره البارزة من المقال (ملحوظه الميزة دي متوفرة في أغلب القوالب) بعدين مسحت الكاش وفحصت تاني لقيت نسبة الـ LCP نزلت بس موصلتش برده لسه لـ 2.5 ثانيه طب ايه بقى اكبر جزء؟ طبعا اول فقرة في المقال بقت اكبر جزء مرئي من الصفحه

قعدت افكر شوية وانا بعمل ريفريش للصفحه ع الموبايل لاحظت لوهلة كده ان عنوان المقال بيظهر قبل الفقرة الأولى في جزء من الثانيه قلت طيب نعمل تجربه جيت على الفقرة الأولى وخليتها متزيدش عن 160 حرف (نفس عدد حروف وصف المقال اللي بيظهر في جوجل)

بحيث انها متبقاش كبيره وكبرت شوية في الـ font-size الخاص بـ عنوان المقال مع مراعاة انه ميضايقش الزائر ويسببله ازعاج لحد ما جوجل او المتصفح بقى شايف ان اكبر جزء مرئي من الصفحه هو عنوان المقال وبالفعل العنوان ظهر في احصائات pagespeed في 2.5 ثانية بالظبط وبالتالي اتحسن LCP واختفت مشاكله. المهم انك تجرب لازم تجرب خد باك اب للموقع وجرب واكيد هتوصل لحل بامر الله.

8- تحسين التعليقات

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

الحل هيكون مع اضافة ‫wpDiscuz الرائعة البلجن دي هتدينا امكانية اننا نأجل تحميل التعليقات خالص لحد ما صفحتنا تتحمل وكمان هتعرض مثلا 10 تعليقات او على حسب اختيارك وباقي التعليقات هيتعملها LazyLoad لحد ما الزائر ينزل تحت يعني لو عاوز تعمل فرح في التعليقات متشيلش هم😂

كمان البلجن هتعرض استايل التعليقات بصورة جميلة جدا وفيها مزايا كثيرة هتتعرف عليها وانت بتظبط اعداداتها.

المهم ان اهم خيارين هاكد عليك فيهم بعد تفعيلها>> افتح البلجن ثم اعدادات ثم Comment Thread Displaying ثم من Comment List Loading Type اختار Initiate AJAX loading after page ومن Comments Pagination Type اختار تحميل التعليقات عند التمرير.

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