طريقة تسريع مدونة بلوجر أو ووردبريس بسرعة خيالية Lazy Load
recent
أخبار ساخنة

طريقة تسريع مدونة بلوجر أو ووردبريس بسرعة خيالية Lazy Load

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

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


طريقة تسريع مدونة بلوجر أو ووردبريس  بسرعة خيالية

كم سبق وذكرنا في بداية الدرس بأن هناك أسباب رئيسية تؤدي إلى بطء سرعة تحميل موقع الويب، لكن لا تقلق فدائما هناك حل لمشكلة بطء سرعة الموقع وهي سهلة ويمكنك حلها بنفسك ودون الحاجة إلى الإستعانة بخبير أو شراء إحدى الخدمات من موقع خمسات أو غيره من مواقع الخدمات.

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

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

أسباب بطء سرعة مواقع الويب وكيفية حلها

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


1- تقليل وقت استجابة الخادم الأوّلي Reduce server response times TTFB

ماهو وقت إستجابة الخادم الأولي TTFB؟، هل سبق وأن سمعت بهذا المصطلح؟، وأن عليك دائما تقليل وقت إستجابة الخادم الأولي TTFB؟

وقت إستجابة الخادم الأولي TTFB هو الوقت الذي يستغرقة أول بايت ، وهو الوقت الذي يستغرقه مستعرض المستخدم لتلقي البايت الأول من محتوى الصفحة، ويجب إبقاء وقت استجابة الخادم للمستند الرئيسي قصيرًا، بسبب اعتماد جميع الطلبات الأخرى على هذا الإجراء.

كيف نقلل من وقت إستجابة الخادم الأولي؟، ( بلوجر - ووردبريس ).

بلوجر:

يمكننا التقليل من وقت إستجابة الخادم الأولي على مدونات بلوجر بإستخدام طريقة التخزين المؤقت، وهي أن تقوم بوضع أكواد ميتا تاج في قسم <head></head> الخاص بكل صفحاتك تقوم بعمل نسخة مؤقتة من بيانات صفحتك ( صور - خطوط - أكواد جافا سكربت ) وغيرها من الموارد في متصفحك بحيث لا يضطر المتصفح بأن يقوم بتحميل كافة موارد الصفحة مجدداً في كل مره تقوم فيها بتحديثها.


طريقة إضافة الأكواد بسيطة فقط إتبع الخطوات:


قم بالإنتقال إلى blogger.com، ثم إنتقل إلى تبويب المظهر، ثم قم بالضغط على تعديل HTML ثم قم بالبحث عن وسم <head> وقم بلصق الكود الذي بالأسفل تحت الوسم مباشرة.  

<meta content="max-age=604800" http-equiv="Cache-Control"></meta>
<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
<include expiration='3d' path='*.webp'/>
<include expiration='3d' path='*.ico'/>


Cache-Control
Cache-Control

السطر الأول من الكود هو عبارة عن كود Html عام يختص بإعطاء عُمر محدد لتخزين البيانات المؤقت، أي بمعنى أنه سوف يظل المتصفح يقوم بعرض نفس البيانات الخاصة بالصفحة لمدة 7 أيام ( يمكنك تغييرة كما تريد ).

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


ووردبريس:

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


الطريقة الأولى: التبديل إلى إستضافة أفضل:

قد تظن أنه فقط عليك شراء إستضافة بأي ثمن وأنتهى الأمر وأنه ليس للإستضافة علاقة بسرعة المدونة أو الموقع وأن كل الإستضافات سواسية مهما أختلف السعر، لا، فكلما كان سعر الإستضافة مرتفع كلما كانت إمكانياتها أعلى ( رام - معالج - سرعة إنترنت ) وغيرها من أمور العتاد الصلب تماما مثل أجهزة الكمبيوتر المتوفرة في السوق، فكلما كان الجهاز بمواصفات عالية كلما كان سعره أعلى.

وهذا كله يصب في مصلحة تقليل وقت الخادم الأولي، لذا إختر بحكمة حتى لا تندم فيما بعد.


الطريقة الثانية: إضافة أكواد التحكم بالتخزين المؤقت في ملف .Htaccess

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

إن توقف موقعك عن العمل قم بحذف الكود فقط وسيعود كل شيء إلى ما كان عليه لذا لا داعي للقلق، فعلى الأغلب أن إستضافتك قامت بحضر هذا الكود. 


<IfModule mod_expires.c>

  ExpiresActive on
  ExpiresDefault                                    "access plus 1 month"
  
  # DATA
  ExpiresByType text/html                           "access plus 0 seconds"
  ExpiresByType text/xml                            "access plus 0 seconds"
  ExpiresByType text/plain                          "access plus 0 seconds"
  ExpiresByType application/xml                     "access plus 0 seconds"
  ExpiresByType application/json                    "access plus 0 seconds"
  ExpiresByType application/ld+json                 "access plus 0 seconds"
  ExpiresByType application/vnd.geo+json            "access plus 0 seconds"
  ExpiresByType application/rss+xml                 "access plus 1 hour"
  ExpiresByType application/atom+xml                "access plus 1 hour"
  ExpiresByType text/x-component                    "access plus 1 hour"
  
  # SCRIPTS
  ExpiresByType text/css                            "access plus 1 month" 
  ExpiresByType text/javascript                     "access plus 1 month" 
  ExpiresByType application/javascript              "access plus 1 month" 
  ExpiresByType application/x-javascript            "access plus 1 month" 
  
  # IMAGES
  ExpiresByType image/gif                           "access plus 1 month"
  ExpiresByType image/png                           "access plus 1 month"
  ExpiresByType image/jpe                           "access plus 1 month"
  ExpiresByType image/jpg                           "access plus 1 month"
  ExpiresByType image/jpeg                          "access plus 1 month"
  ExpiresByType image/webp                          "access plus 1 month"
  ExpiresByType image/jp2                           "access plus 1 month"
  ExpiresByType image/pipeg                         "access plus 1 month"
  ExpiresByType image/bmp                           "access plus 1 month"
  ExpiresByType image/tiff                          "access plus 1 month"
  ExpiresByType image/svg+xml                       "access plus 1 month"
  ExpiresByType image/vnd.microsoft.icon            "access plus 1 month"
  
  # ICONS
  ExpiresByType image/ico                           "access plus 1 month"
  ExpiresByType image/icon                          "access plus 1 month"
  ExpiresByType text/ico                            "access plus 1 month"
  ExpiresByType image/x-ico                         "access plus 1 month"
  ExpiresByType image/x-icon                        "access plus 1 month"
  ExpiresByType application/ico                     "access plus 1 month"
  
  # AUDIO
  ExpiresByType audio/ogg                           "access plus 1 month"
  ExpiresByType audio/basic                         "access plus 1 month"
  ExpiresByType audio/mid                           "access plus 1 month"
  ExpiresByType audio/midi                          "access plus 1 month"
  ExpiresByType audio/mpeg                          "access plus 1 month"
  ExpiresByType audio/x-aiff                        "access plus 1 month"
  ExpiresByType audio/x-mpegurl                     "access plus 1 month"
  ExpiresByType audio/x-pn-realaudio                "access plus 1 month"
  ExpiresByType audio/x-wav                         "access plus 1 month"
  
  # VIDEO
  ExpiresByType video/ogg                           "access plus 1 month"
  ExpiresByType video/mp4                           "access plus 1 month"
  ExpiresByType video/webm                          "access plus 1 month"
  ExpiresByType video/x-msvideo                     "access plus 1 month"
  ExpiresByType video/mpeg                          "access plus 1 month"
  ExpiresByType video/quicktime                     "access plus 1 month"
  ExpiresByType video/x-la-asf                      "access plus 1 month"
  ExpiresByType video/x-ms-asf                      "access plus 1 month"
  ExpiresByType x-world/x-vrml                      "access plus 1 month"
  
  # FONTS
  ExpiresByType font/truetype                       "access plus 1 month"
  ExpiresByType font/opentype                       "access plus 1 month"
  ExpiresByType application/x-font-ttf              "access plus 1 month"
  ExpiresByType application/x-font-woff             "access plus 1 month"
  ExpiresByType application/font-woff               "access plus 1 month"
  ExpiresByType application/font-woff2              "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject       "access plus 1 month"
  
  # FLASH
  ExpiresByType application/x-shockwave-flash       "access plus 1 month"
  ExpiresByType video/x-flv                         "access plus 1 month"
  
  # MANIFEST
  ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
  ExpiresByType text/cache-manifest                 "access plus 0 seconds"
  
  # OTHERS
  ExpiresByType application/pdf                     "access plus 1 month"
  ExpiresByType image/vnd.wap.wbmp                  "access plus 1 month"
  ExpiresByType application/vnd.wap.wbxml           "access plus 1 month"
  ExpiresByType application/smil                    "access plus 1 month"
  
  <IfModule mod_headers.c>
    Header append Cache-Control "public"
    <FilesMatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf|webp)$">
      Header set Cache-Control "max-age=2678400, public"
    </FilesMatch>
    <FilesMatch "\.(html|htm)$">
      Header set Cache-Control "max-age=7200, private, must-revalidate"
    </FilesMatch>
    <FilesMatch "\.(pdf)$">
      Header set Cache-Control "max-age=86400, public"
    </FilesMatch>
    <FilesMatch "\.(js)$">
      Header set Cache-Control "max-age=2678400, private"
    </FilesMatch>
  </IfModule>

</IfModule>


2- تقليل حجم DOM الزائد

ما هو DOM؟

هو نموذج كائن المستند (DOM) هو واجهة برمجة لمستندات الويب. فهو يمثل الصفحة بحيث يمكن للبرامج تغيير بنية المستند ونمطه ومحتواه. 

يمثل DOM المستند كعقد وكائنات؛ بهذه الطريقة، يمكن أن تتفاعل لغات البرمجة مع الصفحة.
صفحة الويب هي مستند يمكن عرضه في نافذة المتصفح أو كمصدر HTML. في كلتا الحالتين، يكون هو نفس المستند ولكن تمثيل نموذج كائن المستند (DOM) يسمح بمعالجته. كتمثيل موجه للكائنات لصفحة الويب ، يمكن تعديلها باستخدام لغة برمجة نصية مثل JavaScript.

غالبًا ما تشتمل شجرة DOM الكبيرة على العديد من العقد التي لا تكون مرئية عند تحميل المستخدم للصفحة لأول مرة ، مما يؤدي دون داعٍ إلى زيادة تكاليف البيانات للمستخدمين وإبطاء وقت التحميل.

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

يُبلغ Lighthouse عن إجمالي عناصر DOM للصفحة ، والحد الأقصى لعمق DOM للصفحة ، والحد الأقصى من العناصر التابعة لها:

يُعلم Lighthouse الصفحات التي تحتوي على أشجار DOM التي:
تحذير: عندما يحتوي عنصر الجسم على أكثر من 800 عقدة.

خطأ: عندما يحتوي عنصر الجسم على أكثر من 1400 عقدة تقريبًا.

كيفية تحسين حجم DOM
بشكل عام ، ابحث عن طرق لإنشاء عُقد DOM فقط عند الحاجة ، وقم بتدمير العقد عندما لا تكون هناك حاجة إليها.

إذا كنت تقوم حاليًا بشحن شجرة DOM كبيرة ، فحاول تحميل صفحتك ولاحظ العقد التي يتم عرضها يدويًا. ربما يمكنك إزالة العقد غير المعروضة من المستند الذي تم تحميلها في البداية وإنشاءها فقط بعد تفاعل المستخدم ذي الصلة ، مثل التمرير أو النقر فوق الزر.

إذا قمت بإنشاء عقد DOM في وقت التشغيل ، فيمكن أن تساعدك نقاط توقف تغيير DOM لتعديل الشجرة الفرعية في تحديد وقت إنشاء العقد.

إذا لم تتمكن من تجنب شجرة DOM كبيرة ، فهناك طريقة أخرى لتحسين أداء العرض وهي تبسيط محددات CSS. راجع تقليل نطاق وتعقيد حسابات الأنماط من Google للحصول على مزيد من المعلومات.

3- تجنب أكواد Html غير المستخدمة والتعليقات الغير ضرورية

هناك دائماً أكواد Html في قالبنا غير مستخدمة وهي مثل التعليقات أو الأكواد الإضافية التي قمت بإلغاء عرضها من خلال تضمينها بداخل تعليق في كود المصدر، قد يتسائل البعض بماذا تضر هذه الأكواد مادام أنها لن تظهر في متصفح الزائر ولا يتم عرضها نهائياً؟، الجواب هو أنها تقوم بزيادة حجم الصفحة بكثرة الأكواد التي فيها فيتأخر المتصفح بقراءتها، أنت لا تشعر بذلك بشكل واضح إلا أن عناكب البحث تهتم بهذه الناحية كثيراً.

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


<!--  هذا عبارة عن تعليق Html ولا يظهر للزائر المتصفح -->
/* هذا عبارة عن تعليق Css ولا يتم إحتسابة لدى المتصفح */
هذا عبارة تعليق Css بسطر واحد لا يتم إحتسابة لدى المتصفح  //
// *
هذا تعليق Javascript متعدد الأسطر
يمكن أن تمتد لأكبر عدد من الخطوط
* /
هذا عبارة تعليق Javascript بسطر واحد لا يتم إحتسابة لدى المتصفح  //

تعليقات Html
تعليقات Html

أيضاً لا ننسى أكواد التصميم Css المضمنة في داخل قالبك يمكنك أن تقوم بتجميعها بداخل ملف خارجي ثم تقوم بتضمينها في قسم الـ <head></head>.

4- تجنب الصور ذات الحجم الكبير

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

فلنفرض أن لديك منطقة لوجو بمقاس 100x60 بكسل فمن البديهي أن تقوم بتصميم صورة اللوجو بمقاس 100x60 بكسل وليس هناك داعي أن تقوم بتصميم صورة اللوجو بمقاس أكبر ثم تقوم بإعطاءها مقاس 100x60 من خلال تنسيق Css لإنه كلما كبر مقاس الصورة زاد حجمها وهذا من أكثر الأشياء التي لا تريدها وذلك لما تسببه من مشكلة بطء في تحميل الصفحة.

لا تنسى أن تقوم بضغط الصور الخاصة بمشاركات موقعك من خلال أدوات ضغط الصور، وأنا أرشح لك أداة Imagecompressor من موقع Websiteplanet.com فهو من أفضل مواقع ضغط الصور، فهو يقوم بتقليل حجم الصورة دون المساس بجودتها، فلن تشعر بالفرق عند مشاهدتها ولكنك ستلاحظ الفرق في حجمها بعد الضغط.

أيضاً يمكنك إستخدام أداة Tinypng فهي ممتازة جدا.

نصيحة أخيرة: قم بحفظ صورك بإمتداد حديث مثل webp حتى تقوم برفعها على موقعك ويتم فهرستها بسرعة، فهذا الإمتداد متوافق مع معايير السيو SEO الحديثة.

تقليل حجم الصور
تقليل حجم الصور


5- حجم ملفات جافا سكربت الخارجية - المضمنة

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

قد يتضمن موقعك على سلايدات متحركة أو عناصر المشاركة أو حتى على محركات البحث التي تقوم بجلب النتائج من ملخصات المواقع مثل الـ Rss وغيرها، لذا أكواد جافا سكربت Javascript هي المسؤلة عن جلب تلك الملخصات بإستخدام AJAX أو غيرها من الطرق.

قد تلاحظ أن أكثر قوالب بلوجر تقوم بتضمين أكواد الجافا سكربت Javascript بداخل القالب ( غالباً قبل الوسم </body> ) ولكن هذا يؤثر بشكل كبير على سرعة فتح الموقع وجعلة أبطئ بشكل ملحوظ، سوف نتطرق إلى عدة حلول لتجاوز هذه المشكلة وتسريع موقعك بشكل كبير جداً.


الطريقة الأولى: تجزئة أكواد جافا سكربت Javascript كلاً حسب حاجتة

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

لذا يمكنك وضع أكواد جافا سكربت الخاصة بالصفحة الرئيسية في ملف main.js وكذا أكواد جافا سكربت Javascript الخاصة بصفحة المقال بملف post.js وغيرها من الصفحات كلاً علا حسب حاجتة ثم قم بإستدعائها حسب موقعها.


الطريقة الثانية: تأخير تنفيذ أكواد جافا سكربت Javascript للمتصفح Lazy Load

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

تابع معي طريقة تأخير تنفيذ أكواد Javascript بالنوعين ( كود مضمن - ملف خارجي ).

أولاً: طريقة التحميل البطيء لأكواد جافا سكربت المضمنة.

قم بقص دوال Javascript التي تريد تأخير تنفيذها ثم قم بلصقها داخل هذا الكود كما هو موضح بالأسفل:


// load lazy code start
window.addEventListener('load', function loadfonts(){

قم بوضع الكود هنا

});
// load lazy code end


هذا الكود  يقوم بتنفيذ كود جافا سكربت بعد إنتهاء تحميل الصفحة، يمكنك تغيير كلمة load المظلله بالأحمر بكلمة scroll حتى يتم تنفيذ الكود عند التمرير بعجلة الماوس للأسفل.


ثانيا: طريقة التحميل البطيء لأكواد جافا سكربت الخارجية.

قم بحذف كود إستدعاء ملف جافاسكربت الأصلي الموجود في قسم الـ<head> غالبا ما يكون بهذا الشكل: 

<script type="text/javascript" src="example.com/file.js" charset="UTF-8"></script>

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

  

// Lazy Load code start
var lazycode=!1;
window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazycode||0!=document.body.scrollTop&&!1===lazycode)&&(!function(){var e=document.createElement("script");
e.type="text/javascript",
e.async=!0,
e.crossorigin="anonymous",
e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
var a=document.getElementsByTagName("script")[0];
a.parentNode.insertBefore(e,a)}(),
lazycode=!0)},!0); 
// Lazy Load code end


هذا الكود يقوم بإنشاء إستدعاء لملف الجافاسكربت في قسم الـ<head></head> عند تمرير عجلة الفأرة إلى أسفل مما يؤخر إستدعاء الملف حتى يقوم المستخدم بتفعيلة.

يمكنك إستبدال كلمة scroll بالكلمة الخاصة بإنتهاء تحميل الصفحة load كما سبق وشرحنا.


الخلاصة

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


هذا سكربت إدارة إختبارات الشخصية Quiz-Pro من برمجتي الخاصة إستخدمت فيه الأساليب المذكورة أعلاة فوصلت سرعته على أداة فحص جوجل إلى 100%، يمكنكم زيارة الموقع وإجراء الفحص بأنفسكم للتأكد من نجاح الطريقة.

رابط الموقع: quizy.ml

رابط الفحص: PageSpeed


google-playkhamsatmostaqltradent