إزالة الغموض عن "أساسيات الويب الأساسية" لـ WordPress

تمثل Core Web Vitals الآن مجموعة من المقاييس الإلزامية لتحسين موقعك ، خاصةً إذا كان أداء تحسين محركات البحث (SEO) والموقع مهمًا لاستراتيجيتك الرقمية. ومع ذلك ، قد يكون من الصعب معرفة أدوات واستراتيجيات WordPress الأكثر أهمية عند محاولة تحسين "أساسيات الويب الأساسية" على موقعك.

شاهد هذه الجلسة لإلقاء نظرة متعمقة على أفضل الممارسات والأدوات لفهم وتحسين نتائج Core Web Vitals الخاصة بك على موقع WordPress الخاص بك.

مكبرات الصوت:

• Alex Zuniga ، مدير المنتجات في WP Engine
• مارك دافولي ، مدير تطوير الويب في Amsive Digital
• مات تشيس ، مدير التطوير في Vital Design
• Sanjucta Ghose ، كبير مطوري الويب في WP Engine
• مايك كرانتيا ، مدير هندسة الواجهة الأمامية في XWP

نص:

أليكس زونيغا: مرحبًا ومرحبًا بكم في إزالة الغموض عن أساسيات الويب الأساسية في WordPress. أنا Alex Zuniga ، مدير المنتج هنا في WP Engine. واليوم ، سنناقش حقًا خصوصيات وعموميات الويب الحيوية الأساسية لموقع WordPress الخاص بك. تعد "أساسيات الويب الأساسية" مقياسًا إلزاميًا للتحسين إذا كنت تهتم بتحسين موقعك على محركات البحث لتحسين أداء الموقع. ولكن قد يكون من الصعب معرفة أدوات واستراتيجيات WordPress الأكثر تأثيرًا. لذا انضم إلى هذه الجلسة للحصول على نظرة متعمقة حول أفضل الممارسات والأدوات التي يمكن أن تساعدك على تحسين نتائج الويب الحيوية الخاصة بك لـ WordPress.

الآن دون مزيد من اللغط ، سنقدم أعضاء اللجنة في هذه الجلسة. أولاً ، سأسلمها إلى مايك لإعطاء مقدمة موجزة عن نفسه.

مايك كرانتيا: مرحبًا ، اسمي مايك كرانتيا. أنا أعيش في جزر الكناري بإسبانيا. أنا مدير هندسة الواجهة الأمامية في XWP حيث عملت طوال الـ 17 عامًا الماضية. في الغالب في مساحة تقنية الواجهة الأمامية ، أحب أداء الويب. ويسعدني أن أكون هنا. يا.

أليكس زونيغا: شكرًا لك ، مايك. بعد ذلك ، لدينا مات تشيس.

مات تشيس: أنا مدير التطوير في Vital Design في بورتسموث ، نيو هامبشاير. تركيز كبير على الواجهة الأمامية في عملي. لذلك نقوم بالكثير من نتائج المنارة و Core Web Vital.

أليكس زونيغا: رائع. شكرا مات. ومارك.

مارك دافولي: مرحبًا ، أنا مارك دافولي ، مدير تطوير الويب في Amsive Digital. تم التخصص في مساحة Core Web الحيوية لفريقنا حيث أن تحسين محركات البحث مهم جدًا لشركتنا. وبالتالي ، فإن "حيوية الويب الأساسية" كذلك. سعيدا أن أكون هنا.

أليكس زونيغا: سعيد بوجودك يا ​​رجل. وأخيراً وليس آخراً ، سانجوكتا.

سانجاكا غوس: مرحبًا. أنا أيضًا من WP Engine. أنا جزء من الفريق المسؤول عن صيانة مواقع WP Engine. وهذا يشمل المواقع التي ظهرت مع Delicious Brains عندما حصل عليها WP Engine. وقضيت جزءًا كبيرًا من العام الماضي في تحسين مواقع Delicious Brain لـ Core Web Vitals. لذلك أعتقد أن هذه المحادثة يجب أن تكون ممتعة للغاية. سعيدا أن أكون هنا.

أليكس زونيغا: شكرًا لك. شكرًا لك. حسنًا ، مرحبًا بك في جميع أعضاء اللجنة. ولا يمكننا الانتظار لسماع ما لديك لتقوله. لذلك سنقوم بتقسيم هذه الأسئلة نوعًا ما عن طريق القياس والإدارة والأدوات وتوقعات العميل عندما يتعلق الأمر بـ Core Web Vitals. لذا فإن أول سؤال نريد طرحه عليكم جميعًا ، لماذا يجب أن أهتم بأساسيات الويب الأساسية في المقام الأول؟ وإلى أي مدى يجب أن أركز على تحسين Core Web Vital؟

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

سانجاكا غوز: حسنًا. أتفق نوعًا ما مع ما قلته لأنه على الرغم من أنه مهم جدًا لتحسين محركات البحث ، إلا أننا نحتاج أيضًا إلى تذكر أن Core Web Vitals هي مقياس للأداء المتصور لموقعك. كيف يرى المستخدم موقعك. وأعتقد أنه من المهم للغاية الاحتفاظ بالاهتمام الذي يرى المستخدم أن موقعك يتسم بالاستجابة والتفاعل والاستقرار. ما هي الأشياء التي تقيسها "حيوية الويب الأساسية". لذلك أعتقد أنه حتى أكثر من نتائج تحسين محركات البحث (SEO) من المهم أن يكون إدراك المستخدم لأدائك أمرًا مهمًا. ولهذا السبب يجب أن نركز على "أساسيات الويب الأساسية".

أليكس زونيغا: بالتأكيد. مات ، كان لديك--

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

أليكس زونيغا: مع كل ما قيل ، نعلم أنه مهم. ولكن ما هي أفضل الطرق لقياس درجاتنا؟

مارك دافولي: إذن إحدى الطرق التي نقيسها إلى جانب الاستخدام - حسنًا ، هناك أداة Page Speed ​​Insight من Google ، وهي أداة بالغة الأهمية لأن هذه هي الأداة التي يستخدمونها لقياسها. حسنًا ، إذا كنت تريد أن يكون لديك تأثير ، فإن استخدام هذه الأداة أمر حيوي. هناك أيضًا Lighthouse داخل المتصفح في Chrome DevTools ، وهو أمر بالغ الأهمية. يحتوي Search Console على أداة رائعة لتجربة مستخدم الصفحة لمراقبة مقاييس المستخدم الحقيقية على مدار الـ 28 يومًا الماضية ، وهو أمر بالغ الأهمية للمراقبة لفترة طويلة.

سانجاكا غوس: أجل. لذلك أقول إن Page Speed ​​Insights هي أداة جيدة جدًا لأنها تمنحك بيانات في الوقت الفعلي بمعنى أن Core Web Vitals نفسها تستند إلى بيانات مستخدم حقيقية على مدار الـ 28 يومًا الماضية. ولكن بعد ذلك يمكنك أيضًا الاطلاع على تقرير Lighthouse الخاص بك ، والذي يعتمد على بيانات المختبر. وهذا ما يمكنك بالفعل تحسينه على الفور لأنه يستغرق بعض الوقت قبل أن تتمكن من رؤية التحسينات في Core Web Vitals لأنها تقاس على مدى فترة زمنية.

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

أليكس زونيغا: رائع. يبدو وكأنه صرخات كبيرة من أجل المنارة هناك. ممتاز. ممتاز.

مايك كرانتيا: أود أن أضيف في هذا الموضوع أن تتبع بيانات أداء مقاييس المستخدم الحقيقي كان أفضل لتكون قادرًا على الاستجابة بشكل أسرع لتدهور الأداء الذي وصل إلى الإنتاج. تساعد الاختبارات المعملية عندما تكون في مرحلة الإعداد. مثل القول أن هناك تدهورًا لا نريد نشره. ولكن سيحدث دائمًا شيء ما في الإنتاج قد يكون مفاجأة. وبدلاً من الانتظار عدة أسابيع حتى تظهر Search Console ومقاييس المستخدم الحقيقية في قاعدة بيانات crux ، من خلال تتبعها بنفسك باستخدام مكتبة Web Vitals ، يمكنك البقاء في الصدارة.

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

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

مارك دافولي: أجل. وبالنسبة لي ، فإن التركيز الأساسي هو ما نسميه تصيير الجزء المرئي من الصفحة. لذا تأكد من أن ذلك يتم عرضه في أسرع وقت ممكن. وكما ذكرنا سابقًا ، قم بتأجيل وتحميل أي شيء آخر خارج الشاشة للتأكد من حصولك على أفضل نتيجة ممكنة. ومع ذلك ، فإن WP Rocket ممتاز لميزة نصوص التأخير. لكننا نميل إلى - مثلما أحاول قصر ذلك على GTM ، أو نصوص إعلانات Google ، أو أشياء من هذا القبيل. والتركيز حقًا على تحسين البنية الأساسية الفعلية للموضوع الذي يدعم موقع الويب للتأكد من أنه تم تحسينه قدر الإمكان. لذا فأنت لا تعتمد على مكون إضافي تابع لجهة خارجية للحصول على هذا النوع من التأثير على الأداء.

مات تشيس: أوه ، بالتأكيد. نعم. كلا الطرفين.

أليكس زونيغا: مسكتك. مسكتك. وللتوضيح فقط ، قلت WP Rocket. وهذه ميزة نصوص التأخير؟

مارك دافولي: نعم.

أليكس زونيغا: رائع.

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

أليكس زونيغا: ممتاز

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

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

مات تشيس: نعم. حول هذا الموضوع ، في الواقع ، نظرًا لأنك طرحت ذلك ، يوزع WordPress نوعًا من نظام بناء حزمة الويب. يسمونه فقط في WordPress Scripts. وكالتنا ، كافحنا لفترة طويلة لمحاولة الحفاظ على نظام webpack الخاص بنا. وبعد ذلك كل ثمانية أشهر أو نحو ذلك سيتغير بعض التبعية للعقدة ، ويكسر سلسلة أدواتنا بالكامل. لكن WordPress يحافظ على هذا الأمر بالنسبة لنا. وقد كانت فائدة كبيرة.

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

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

أليكس زونيغا: رائع. أعتقد أننا نوعا ما ننغمس بالفعل في هذا المجال. وقد ذكرت القليل. لكن دعنا نستفيد أكثر من ذلك باستخدام الأدوات. ما هي بعض الأدوات المفضلة التي ترغب في استخدامها لتحسين Core Web Vital؟ وما نوع حالات الاستخدام الأفضل لها؟ أم أن هناك بعض السيناريوهات التي لا تناسبهم بشكل جيد؟

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

أليكس زونيغا: رائع. أي أدوات أخرى ترغب في استخدامها؟

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

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

مايك كرانتيا: وهذا هو المكان الذي يساعد فيه تشغيل التخزين المؤقت وجاهزيته.

مارك دافولي: و CDN.

مايك كرانتيا: نعم. تجنب بعض الكوارث المحتملة.

أليكس زونيغا: ممتاز. حسنًا ، أنا أقدر هذا الوضوح هناك. إذن أحد الأسئلة. هناك العديد من المكونات الإضافية للتحسين لتحسين Core Web Vitals. ما هي قيود مكونات WordPress الإضافية للمساعدة في ذلك؟ أم أنهم حقًا يقومون بتحسين الموقع؟ أم أنها مجرد نوع من الخداع المحتمل لقياسات Google؟ وأعتقد أنه ربما يكون هذا السؤال ، هل من الأفضل - لقد ذكرنا نوعًا ما ، هل من الأفضل استخدام المكونات الإضافية أو القيام بالعمل بدلاً من الاعتماد على مكون إضافي هناك؟

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

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

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

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

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

أليكس زونيغا: ممتع.

مارك دافولي: أجل. وبالنسبة لي ، WP Rocket رائع. نحن نحد من استخدامه في معظم مواقعنا لأن معظم ما نقوم به مبني محليًا. ولكن هناك الكثير من الميزات الأخرى في Core WordPress والتي إذا تم استخدامها بشكل صحيح يمكن أن تحصل حقًا على موقع محسّن جيدًا. مثل استخدام Block Editor بدلاً من طرف ثالث مثل Elementor أو إلى آخره ، يمكن أن يضيف الكثير من الانتفاخ إلى الموقع. لذلك ، إذا كنت تبني نظامًا جديدًا مثل نظام كتلة نوع Gutenberg الأصلي ، وقمت بالفعل بتحميل الملفات حسب الحاجة بدلاً من تحميل كل شيء دفعة واحدة على كل صفحة على سبيل المثال. هناك ميزات التحميل البطيء المضمنة في WordPress الآن. لذا مراقبة كيفية استخدامها واستخدامها بشكل مناسب ، وما إلى ذلك. ثم إضافة أداة مثل WP Rocket لتحسين ما هو موجود بالفعل. ولكن ليس فقط الاعتماد عليها.

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

سانجاكا غوس: فيما يتعلق بموضوع CSS الحرج ، أردت فقط أن أتدخل وأذكر أن Addy Osmani لديه هذه الأداة الرائعة المسماة Critical. يمكنك إضافة ذلك إلى عملية الإنشاء الخاصة بك لإنشاء CSS الهامة الخاصة بك. إنه رائع. وهي موثوقة للغاية. منذ أن ذكرت CSS الحرجة ، اعتقدت أنني سأضيف ذلك. آسف لقطعك.

مايك كرانتيا: لا بأس. حول نفس موضوع CSS المهم ، كان هناك بعض الجهد من فريق Jetpack للقيام بشيء ما باستخدام المكون الإضافي Jetpack Boost. هذه طريقة مثيرة جدًا للاهتمام لإنشاء CSS الهامة عن طريق عرض الصفحات في iframes أو شيء من هذا القبيل. عندما يعمل ، إنه حل رائع. عندما لا يحدث ذلك ، فإنه يخبرك ، مهلا ، إنه لا يعمل هنا. فقط تحرك على طول. أنت بحاجة إلى شيء آخر. ليس من السهل دائمًا الوصول إلى CSS المهم. من ناحية أخرى ، منذ 4 أو 5 سنوات ، كانت CSS المهمة كبيرة جدًا. لقد ساعد كثيرا.

في العامين أو الثلاثة أعوام الماضية مع تطور HTTP / 3 ، كان لوجود CSS واحد مهم للحظر تأثير ضئيل للغاية بحيث يحتوي على 100 كيلوبايت أو شيء من CSS مضمّن. يتم إنشاء موقع ويب يعمل بالسرعة التي يعمل بها موقع الويب الذي كان يحتوي على CSS مهم قبل أربع أو خمس سنوات. لذلك لا تخف من وجود CSS بحجم مناسب داخل موقعك. ليس عليك التخلص منه. وقد رأيت مواقع الويب التي كانت مثل فائقة التحسين.

لدينا في CSS الهامة مثل 100 كيلو بايت من CSS المضمنة. ويظهر blocking ، jQuery ، ونصوص أخرى لم يتم استخدامها. إنه مثل ، رائع. أنت تهزم الغرض بذلك. يمكن أن تساعدنا على الاستمرار في نوع 5٪ من النهج. لكن إذا بدأت بذلك ، انظر إلى الأول.

أليكس زونيغا: رائع. مذهل. أعتقد أن كل تلك الأدوات. إنه لأمر رائع أن تسمع تلك الصراخ. ومن الرائع سماع تلك الاقتراحات والتوصيات. والكثير من هذا النوع من الدوامات حول سؤالنا التالي. ما هي الجوانب الفريدة للعمل على WordPress على وجه التحديد مع Core Web Vitals؟ هل يتعين عليك القيام بذلك عبر المكونات الإضافية مقابل القيام بذلك مع أي مكدس تقني آخر؟ هل هو أسهل مع WordPress؟ هل هناك المزيد من الأدوات المتاحة؟ كما ذكرنا نوعًا ما ، أطلقنا جميعًا الكثير من الأدوات. هل هو أسهل مع WordPress؟ هل الأمر أكثر صعوبة مع WordPress؟ ما الذي ستأخذه؟

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

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

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

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

أليكس زونيغا: جميل. لذلك تحدثنا عن كيفية قياس تلك الأدوات ، وما الذي نستخدمه لتحسين "حيوية الويب الأساسية" ، وبعض الأدوات. الآن عندما نتحدث عن توقعات العميل ، في أي مرحلة من المشروع الجديد تبدأ في اعتبار Core Web Vitals جزءًا من بنائك أو استراتيجيتك؟ هل هذا صحيح عندما تبدأ مثل نموذجك المعياري الأساسي؟ أم أنه شيء تقوم بتحسينه قليلاً في القصة؟ ماذا عن القيام به؟

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

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

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

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

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

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

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

أليكس زونيغا: رائع.

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

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

أليكس زونيغا: هذه دعوة رائعة. نداء رائع.

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

أليكس زونيغا: حسنًا ، رائع. يبدو أننا نقدر حقًا جميع مدخلاتكم ، وجميع تعليقاتكم على Core Web Vitals. كيفية استخدامها ، وماذا تستخدم لقياسها ، وكيفية تحديد توقعات العملاء لكل ذلك. لقد كان حقًا درسًا تعليميًا. نأمل أن يكون أعضاء اللجنة قد استمتعوا بوقتك هنا. نحن بالتأكيد نستمتع بسماع كل ملاحظاتك. ونأمل أن يكون الحاضرين هنا قد حصلوا أيضًا على بعض التعليقات الرائعة.

لذا ، شكرًا جزيلاً لكم جميعًا على وقتكم. حسنًا ، كان هذا هو فريقنا. نريد حقًا أن نقول شكرًا جزيلاً لجميع أعضاء اللجنة. نريد أن نشكرك على حضور هذه الجلسة. ونأمل أن تقضي وقتًا ممتعًا في مشاهدة بقية جلساتنا وهي DE {CODE}.