كيفية تدقيق JavaScript لتحسين محركات البحث

نشرت: 2023-03-06

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

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

لقد قسمنا عملية تدقيق JavaScript إلى خمسة مجالات رئيسية ، مما يسمح لك بتحديد:

  1. ما إذا كان الموقع يعتمد بشدة على جافا سكريبت
  2. ما إذا كان يتم تخزين أصول جافا سكريبت مؤقتًا / تحديثها بشكل مناسب
  3. ما هو تأثير جافا سكريبت على أداء الموقع
  4. ما إذا كان يتم جلب ملفات JavaScript بشكل صحيح وفعال
  5. مشكلات JavaScript الظرفية: توجيه التمرير اللانهائي وعمليات إعادة التوجيه

ولكن قبل أن نتعمق فيه ...

101 سريع على هيكل الموقع

تتكون المواقع الإلكترونية الحالية من ثلاث تقنيات رئيسية:

لغة ترميز النص التشعبي (HTML)

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

إنها بسيطة وقوية ومركزة لغويًا لتمكين مجموعة واسعة من التطبيقات.

على الرغم من أن المتصفحات ستقوم بتنسيق HTML الخام بشكل معقول ، إلا أن العرض التقديمي يتم التعامل معه بشكل أفضل عن طريق…

أوراق الأنماط المتتالية (CSS)

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

يمكن استهداف أي عنصر HTML ونقله وتلوينه وتغيير حجمه وحتى تحريكه. في الواقع ، هذا هو تحقيق تصميم الموقع .

ومع ذلك ، باستثناء بعض الميزات المحدودة ، تظل ثابتة ، مما يجعلنا ...

جافا سكريبت (JS)

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

عندما تزور أحد مواقع الويب ، يقوم متصفحك بتنزيل ملف HTML ثم يقرأه ويفسر وينفذ كل جزء تلو الآخر. يتم تنزيل الأصول الخارجية (CSS / JS / الوسائط / الخطوط) ويتم تجميع العناصر معًا وفقًا للتوجيهات والتعليمات ذات الصلة.

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

كيف تتعامل Google مع JavaScript؟

ستعرض Google JavaScript. بمعنى آخر ، سيتم تحميل أصول JavaScript الخاصة بك مع HTML و CSS لفهم ما سيراه المستخدمون بشكل أفضل ، ولكن هناك اعتباران أساسيان:

  1. تريد Google استخدام أقل قدر ممكن من الموارد للزحف إلى المواقع.
  2. يعني المزيد من JavaScript أن هناك حاجة إلى مزيد من الموارد للعرض.

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

  • سيعرض Googlebot دائمًا الصفحة التي يزحف إليها لأول مرة. في هذه المرحلة ، يتخذ قرارًا بشأن ما إذا كان يلزمه عرض تلك الصفحة في المستقبل. سيؤثر هذا في عدد مرات عرض الصفحة في عمليات الزحف المستقبلية.
  • يتم تحليل الموارد لتحديد أي شيء لا يساهم في محتوى الصفحة الأساسي. قد لا يتم جلب هذه الموارد.
  • يتم تخزين الموارد مؤقتًا بشكل كبير لتقليل طلبات الشبكة ، لذلك قد يتم تجاهل الموارد المحدثة في البداية.
  • لا يتم الاحتفاظ بالحالة من صفحة إلى أخرى أثناء الزحف (على سبيل المثال ، لا يتم تخزين ملفات تعريف الارتباط ، كل صفحة هي زيارة "حديثة").

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

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

دليل من خمس خطوات لتدقيق JavaScript SEO

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

1. فهم مدى اعتماد الموقع على JavaScript

في البداية ، من المهم تحديد ما إذا كان الموقع يعتمد بشكل كبير على JavaScript ، وإذا كان الأمر كذلك ، فإلى أي مدى؟ سيساعد هذا في توجيه مدى العمق الذي يجب أن يكون عليه تحليلك اللاحق.

يمكن تحقيق ذلك بعدة طرق:

  • ماذا ستفعل JavaScript؟
  • قم بتعطيل JavaScript محليًا عبر Chrome
  • تحقق من Chrome يدويًا
  • واباليزر
  • صراخ الضفدع

ماذا ستفعل JavaScript (WWJSD)

أداة مقدمة من Onely توفر مقارنات مباشرة جنبًا إلى جنب لعنوان URL من خلال تقديم لقطات شاشة لـ HTML وعلامات وصفية وروابط مع JavaScript وبدونها.

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

خطوات تحليل استخدام جافا سكريبت في WWJSD:

  1. قم بزيارة WWJSD
  2. اختر الهاتف المحمول أو سطح المكتب
  3. إدخال عنوان الموقع
  4. تقديم النموذج

تعطيل محليًا عبر Chrome

يتيح لك متصفح Chrome تعطيل أي جافا سكريبت في مكانه واختباره مباشرة:

تعطيل جافا سكريبت في الكروم خطوات تحليل استخدام JavaScript باستخدام Chrome:

  1. اضغط على F12 لفتح devtools وحدد علامة تبويب العناصر إذا لم تكن مفتوحة بالفعل
  2. Cmd + Shift + P (أو Ctrl + Shift + P)
  3. اكتب "تعطيل" وحدد * تعطيل جافا سكريبت *
  4. قم بتحديث الصفحة
  5. لا تنس إعادة التمكين

تحقق من Chrome يدويًا

هناك طريقتان للتحقق من مصدر HTML في Chrome لأنهما يقدمان نتائج مختلفة قليلاً.

سيعرضمصدر العرض HTML كما تم استلامه في البداية ، في حين أن فحص المصدريأخذ التغييرات الديناميكية حيز التنفيذ - أي شيء تضيفه JavaScript سيكون واضحًا.

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

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

خطوات لتحليل استخدام JavaScript يدويًا باستخدام Chrome:

 أنظر المصدر:

  1. انقر بزر الماوس الأيمن في منفذ عرض المتصفح
  2. حدد عرض المصدر

فحص المصدر:

  1. اضغط على F12 لفتح أدوات التطوير
  2. حدد علامة تبويب العناصر إذا لم تكن مفتوحة بالفعل

واباليزر

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

واباليزر خطوات استخدام Wappalyzer لتحليل استخدام JavaScript

  1. قم بتثبيت ملحق Wappalyzer Chrome
  2. قم بزيارة الموقع الذي تريد فحصه
  3. انقر فوق رمز Wappalyzer واستعرض الإخراج

️ اعلم أنه لمجرد عدم إدراج شيء ما هنا ، فهذا لا يؤكد بنسبة 100٪ أنه لا يتم استخدامه!

يعتمد Wappalyzer على بصمات الأصابع لتحديد إطار العمل. أي العثور على المعرفات والأنماط الفريدة لهذا الإطار.

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

صراخ الضفدع

هذا هو الغوص العميق للتحقق من رؤية JavaScript. مع تمكين عرض JavaScript ، يمكن لـ Screaming Frog توفير تحليل شامل لتأثير JavaScript على موقع تم الزحف إليه ، بما في ذلك المحتوى المعروض / تغطية الارتباط والمشكلات المحتملة. صراخ الضفدع خطوات استخدام Screaming Frog لتحليل مشاكل جافا سكريبت:

  1. توجه إلى قائمة التكوين
  2. حدد * العنكبوت *
  3. حدد علامة التبويب التقديم
  4. اختر JavaScript من القائمة المنسدلة
  5. (اختياري) قم بتقليل مهلة AJAX وإلغاء التحديد لتحسين أداء الزحف إذا كانت تواجه صعوبات

2- استخدم تحديثًا قسريًا لذاكرة التخزين المؤقت

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

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

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

المبدأ بسيط: لنفترض أن لديك ملف JavaScript يسمى "main.js" والذي يحتوي على الجزء الأكبر من JavaScript للموقع. إذا تم تخزين هذا الملف مؤقتًا ، فستستخدم Google هذا الإصدار وتتجاهل أي تحديثات ؛ في أحسن الأحوال ، ستكون الصفحة المعروضة قديمة ؛ في أسوأ الأحوال ، سيتم كسرها.

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

لتحقيق ذلك ، هناك استراتيجيتان:

  1. تم إلحاق ملفين بالطابع الزمني "آخر تحديث" كمتغير URL.
  2. الكود الفريد المستخدم في اسم الملف نفسه - "filename.code.js" هو نمط شائع كما يلي:

تغيير اسم الملف لتجنب التخزين المؤقت الخطوات لمتابعة:

  1. اضغط على F12 لتحميل أدوات تطوير Chrome
  2. انتقل إلى علامة التبويب "الشبكة"
  3. تطبيق المرشحات
    • في الحقل * Filter * ، قم بتصفية المجال الرئيسي مثل: `domain: *. website.com`
    • انقر على مرشح JS لاستبعاد الملفات التي ليست من نوع JS
  4. راجع قائمة الملفات وقم بتقييمها - اطلب مساعدة المطورين إذا لزم الأمر

️ على الرغم من أن ملفات جافا سكريبت ذات الصلة توجد عادةً على النطاق الرئيسي ، فقد يتم استضافتها خارجيًا في بعض الحالات ، مثل شبكة توصيل المحتوى (CDN).

في المواقع المستضافة WP Engine ، قد تحتاج إلى تصفية "* .wpenginepowered.com" بدلاً من المجال الرئيسي ، حسب المثال أعلاه. لا توجد قواعد صارمة وسريعة هنا - راجع المجالات في قائمة JS (غير المصفاة) واستخدم أفضل حكم لديك. مثال على ما قد تراه هو: مثال على قائمة النطاقات عند تصفية "* .wpenginepowered.com إذا لم يكن عمود المجال مرئيًا ، فانقر بزر الماوس الأيمن فوق رأس عمود موجود وحدد المجال.

3. تحديد تأثير JS على أداء الموقع

عندما يتعلق الأمر بأداء الموقع ، هناك بعض الأشياء التي يجب الانتباه إليها.

وقت المعالجة

يرتبط هذا بأساسيات الويب الأساسية (CWV) ، والتي يتم تمثيل بعضها في تصور التوقيت أدناه ، والذي ينظر في مقاييس مثل أكبر ألم محتوى (LCP) ، وتحول التخطيط التراكمي (CLS) وتأخير الإدخال الأول (FID).

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

يوفر عرض الشلال أيضًا تصورًا مفيدًا لتأثير كل CWV ، بالإضافة إلى المكونات الأخرى للموقع. منظر شلال CWV خطوات:

  1. اضغط على F12 لفتح أدوات تطوير Chrome
  2. انتقل إلى علامة التبويب "الأداء"
  3. انقر فوق زر التحديث في اللوحة
  4. راجع علامة تبويب الملخص (أو من الأسفل إلى الأعلى إذا كنت تريد الغوص بعمق)

ضغط

هذا فحص بسيط ولكنه مهم ؛ يضمن تقديم الملفات بكفاءة.

سيقوم المضيف الذي تم تكوينه بشكل صحيح بضغط أصول الموقع بحيث يمكن تنزيلها بواسطة المستعرضات في أسرع وقت ممكن. غالبًا ما تكون سرعة الشبكة هي النقطة الأكثر أهمية (والمتغيرة) في وقت تحميل الموقع. وقت تحميل CWV خطوات:

  1. اضغط على F12 لفتح أدوات تطوير Chrome
  2. انتقل إلى علامة التبويب "الشبكة"
  3. تطبيق المرشحات
  4. في حقل "التصفية" ، قم بتصفية المجال الرئيسي مثل: `المجال: *. website.com`
  5. انقر فوق عامل تصفية JS لاستبعاد الملفات التي ليست من نوع JS
  6. راجع محتوى عمود "ترميز المحتوى". إذا كانت تقرأ "gzip" أو "compress" أو "deflate" أو "br" ، فسيتم تطبيق الضغط.

️ إذا كان عمود ترميز المحتوى غير مرئي:

  1. انقر بزر الماوس الأيمن فوق عمود موجود
  2. مرر مؤشر الماوس فوق "رؤوس الاستجابة"
  3. انقر فوق "ترميز المحتوى"
  4. تغطية

تؤدي الزيادة في أطر عمل الأصول المليئة بالميزات (مثل Bootstrap أو Foundation أو Tailwind) إلى تطوير أسرع ولكن يمكن أن تؤدي أيضًا إلى أجزاء كبيرة من JavaScript غير مستخدمة بالفعل.

يساعد هذا الفحص في تصور مقدار كل ملف لا يتم استخدامه فعليًا على عنوان URL الحالي.

️ اعلم أنه قد يتم استخدام JavaScript غير مستخدم في صفحة واحدة على صفحات أخرى!هذا مخصص للإرشاد بشكل أساسي ، مما يشير إلى فرصة للتحسين. تحقق من وجود جافا سكريبت غير مستخدم خطوات:

  1. اضغط على F12 لفتح أدوات تطوير Chrome
  2. Cmd + Shift + P (أو Ctrl + Shift + P)
  3. انقر فوق "إظهار التغطية"
  4. انقر فوق زر التحديث في اللوحة
  5. تطبيق المرشحات
    • في الحقل * تصفية * ، قم بتصفية المجال الرئيسي. لا توجد أحرف البدل هنا ؛ "website.com" ستفعل.
    • حدد JavaScript من القائمة المنسدلة بجوار إدخال عامل التصفية

تصغير

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

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

اكتشاف الاختلافات أمر تافه: ملف مصغر ^ مصغر = جيد! لا ملف مصغر ^ غير مصغر = ليس جيدًا!

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

خطوات:

  1. اضغط على F12 لفتح أدوات تطوير Chrome
  2. انتقل إلى علامة التبويب "الشبكة"
  3. تطبيق المرشحات
    • في حقل "التصفية" ، قم بتصفية المجال الرئيسي مثل: domain: *. website.com
    • انقر فوق عامل تصفية JS لاستبعاد الملفات التي ليست من نوع JS
  4. تحقق من كل ملف
    • انقر فوق اسم الملف
    • انتقل إلى علامة التبويب "الاستجابة" على اللوحة التي تظهر

التجميع

يمكن تجميع ملفات جافا سكريبت المتعددة في عدد أقل من الملفات (أو ملف واحد!) لتقليل عدد طلبات الشبكة. بشكل أساسي ، كلما زاد عدد ملفات JavaScript التي يتم سحبها من المجال الرئيسي ، قل احتمال استخدام هذا الأسلوب.

هذا ليس حقًا كسر للصفقات في معظم الأوقات ، ولكن كلما زاد عدد ملفات JavaScript المنفصلة ، يمكن توفير المزيد من الوقت عن طريق تجميعها.

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

خطوات:

  1. كرر الخطوات من 1 إلى 3 من التصغير
  2. لاحظ عدد الملفات الموجودة - يعتبر واحد إلى ثلاثة بشكل عام علامة جيدة

4. افهم ما إذا كان يتم جلب ملفات JavaScript بشكل صحيح وفعال

هناك شيئين لإلقاء نظرة عليه.

تم حظر المورد بواسطة ملف robots.txt

لن يتم جلب ملفات JavaScript المحظورة في ملف robots.txt بواسطة Google عند عرض أحد المواقع ، مما قد يؤدي إلى تعطل العرض أو فقد البيانات.

تأكد من التحقق من عدم حظر JavaScript في ملف robots.txt.

تحميل البرنامج النصي

عندما يتم تضمين ملفات JavaScript في الصفحة ، يكون ترتيب التحميل أمرًا مهمًا.

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

  • الطريقة المباشرة: <script src = ”file.js”>

الطريقة المباشرة ستحمل الملف هناك وبعد ذلك. يتم جلب الملف أو تنزيله أو استرداده من ذاكرة التخزين المؤقت (هذا عندما يظهر في علامة التبويب "الشبكة" الخاصة بـ devtools) ، ثم يتم تحليله وتنفيذه قبل أن يواصل المتصفح تحميل الصفحة.

  • طريقة غير متزامنة: <script async src = ”file.js”>

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

  • طريقة التأجيل: <script defer src = ”file.js”>

ستجلب طريقة defer الملف بشكل غير متزامن كما هو الحال مع الطريقة غير المتزامنة ، ولكنها ستعمل على تشغيل تلك البرامج النصية فورًا عند جلبها ، حتى إذا لم تنته الصفحة من التحميل.

إذن ، أي من هذه الطرق هو الأفضل؟

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

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

مراجعة تأثير البرنامج النصي لجهة خارجية

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

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

خطوات:

  1. قم بزيارة WebPagetest
  2. تأكد من تحديد اختبار "أداء الموقع"
  3. أدخل عنوان URL وانقر فوق "بدء الاختبار"
  4. في صفحة ملخص النتائج ، ابحث عن القائمة المنسدلة "عرض"
  5. اختر "طلب خريطة"

5. كن على علم بقضايا JavaScript الظرفية

أطر عمل JS

ستواجه بلا شك واحدًا أو أكثر من أطر عمل جافا سكريبت الشائعة - React و Vue و Angular أمثلة بارزة.

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

على الرغم من أن هذا يمكن أن يكون مفيدًا من حيث الأداء والصيانة ، إلا أنه يتسبب أيضًا في حدوث متاعب لتحسين محركات البحث ، والشكوى الأكثر شيوعًا هي أنه يعني المزيد من العمل على Google لعرض كل صفحة بشكل كامل. هذا يؤخر الفهرسة - إلى حد كبير في بعض الأحيان. يعتبر الكثير في مجتمع مُحسّنات محرّكات البحث أن هذا يعني "JavaScript = bad" وسيثبط استخدام الأطر. يمكن القول إن هذه هي حالة رمي الطفل بماء الحمام.

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

التدرج اللانهائي

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

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

إذا كان الأمر كذلك ، فهذا جيد بما يكفي لـ Google ويجب الزحف إليه بشكل صحيح.

إذا لم يكن الأمر كذلك ، فيجب إصلاح ذلك بواسطة المطورين.

من المفترض أن يتم تنفيذ تحديثات عنوان URL بطريقة "نظيفة" مثل؟ page = 2 أو / page / 2. هناك طرق للقيام بذلك باستخدام التجزئة (مثل # page-2) ، لكن Google لن تقوم بالزحف إلى هذا حاليًا.

التوجيه

إذا كان إطار عمل JavaScript (مثل React و Vue و Angular) قيد الاستخدام ، فتحقق من Wappalyzer . هناك نوعان من عناوين URL التي من المحتمل أن تشاهدها:

  • https://www.website.com/pretty/standard/route
  • https://www.website.com/#/wait/what/is/this
  • https://www.website.com/#!/again/what

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

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

عمليات إعادة التوجيه

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

يمكنك التحقق من ذلك عن طريق تشغيل زحف Screaming Frog مع تمكين عرض JavaScript ومراجعة عمليات إعادة توجيه JS ضمن علامة تبويب / عامل تصفية JS.

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

خاتمة

يمكن أن تطرح جافا سكريبت مشكلات لتحسين محركات البحث ، ولكن يمكن التقليل من هذه المشكلات عن طريق الفهم والتدقيق بعناية لمجالات المشكلات الرئيسية المحتملة:

1) كيف يعتمد الموقع على JavaScript

2) ما إذا كان يتم تخزين أصول JavaScript / تحديثها بشكل مناسب

3) ما هو تأثير جافا سكريبت على أداء الموقع

4) ما إذا كان يتم جلب ملفات JavaScript بشكل صحيح وفعال

5) مشكلات JavaScript الظرفية ، مثل توجيه التمرير اللانهائي وعمليات إعادة التوجيه

إذا كانت لديك أي أسئلة حول تدقيق JavaScript أو تحسين محركات البحث ، فلا تتردد في الاتصال بنا - سنكون سعداء بالدردشة.