ما السبب؟
ربما سمعت عن كلّ المزايا الرائعة التي يمكن أن تقدّمها تقنيات تطبيقات الويب التقدّمية ل موقعك الإلكتروني. قد تشعر بالرغبة في البدء مباشرةً وإضافة ميزات تطبيق الويب التقدّمي. هذا ممكن، ولكن سيكون أفضل لك إذا أعددت تطبيقك ليكون "متوافقًا مع التطبيقات المتوافقة مع الأجهزة الجوّالة" أولاً.
لن تؤدي أي ميزة سحرية في التطبيقات المتوافقة مع الأجهزة الجوّالة إلى حلّ المشاكل، مثل حظر JavaScript أو الصور الكبيرة. تحتاج التطبيقات المتوافقة مع الأجهزة الجوّالة إلى أساس متين.
كيف يمكنك التحقّق من حالة موقعك الإلكتروني؟ الخطوة الأولى هي إجراء تدقيق في الموقع الإلكتروني: وهو مراجعةموضوعية للعناصر التي تعمل بشكل جيد وتحديد الجوانب التي يمكن تحسينها (وكيفية تحسينها).
ستساعدك عملية تدقيق موقعك الإلكتروني أو تطبيقك في توفير تجربة فعّالة ومرنة، كما ستسلّط الضوء على الحلول السريعة التي يمكن تنفيذها بأقل قدر من الموافقة. تمنحك عملية التدقيق أيضًا أساسًا ل التطوير المستنِد إلى البيانات. هل ساهم التغيير في تحسين الأداء؟ كيف يقارن موقعك الإلكتروني بالمنافسين؟ يمكنك الحصول على مقاييس لتحديد أولويات الجهود المبذولة، ودليل ملموس للتفاخر به بعد إتمام التحسينات.
إذا كان لديك 5 دقائق فقط…
شغِّل Lighthouse على صفحتك الرئيسية واحفظ بيانات التقرير. ستحصل على قياس كمي لمستوى الأداء الحالي وقائمة مهام لتحسين الأداء وتسهيل الاستخدام والأمان وتحسين محركات البحث.
إذا كانت لديك 30 دقيقة فقط…
لا يزال Lighthouse هو أفضل مكان للبدء، ولكن بعد قضاء بعض الوقت، يمكنك أيضًا تسجيل النتائج من أدوات أخرى:
- لوحة الأمان في "أدوات مطوّري البرامج في Chrome": استخدام بروتوكول HTTPS
- لوحة الشبكة في "أدوات مطوّري البرامج في Chrome": مُدد التحميل، وأحجام الموارد وعدد طلبات HTML وCSS وJavaScript والصور والخطوط والملفات الأخرى
- أداة إدارة المهام في Chrome: إذا كان موقعك الإلكتروني يستخدِم باستمرار وحدة معالجة مركزية كبيرة أو ذاكرة أكثر من التطبيقات الأخرى، قد تحتاج إلى إصلاح مشاكل تسرُّب الذاكرة أو تشغيل المهام أو تحميل الموارد. احرص على اختبار موقعك الإلكتروني على الأجهزة التي يستخدمها المستخدمون.
- WebPagetest: قياس الأداء في مواقع جغرافية مختلفة وأنواع الاتّصال، وذاكرة التخزين المؤقت، والوقت المستغرَق لتحميل أول بايت، واستخدام شبكة توصيل المحتوى (CDN)
- إحصاءات PageSpeed: أداء التحميل وتكلفة البيانات واستخدام موارد الويب، بما في ذلك بيانات تقرير "تجربة المستخدم في Chrome" التي تُبرز إحصاءات الأداء في الظروف الفعلية
- بطاقة قياس السرعة وأداة احتساب التأثير: قارِن سرعة الموقع الإلكتروني مقارنةً بالمواقع المشابهة، واقدِر الفرصة المحتملة لتحقيق الأرباح من خلال تحسين سرعة الموقع الإلكتروني.
احرص على اختبار موقعك الإلكتروني كما يراه المستخدم لأول مرة. افتح الموقع الإلكتروني في نافذة تصفُّح متخفٍ (خاص)، أو استخدِم أدوات المتصفّح لإيقاف ميزة التخزين المؤقت ومحو مساحة التخزين. يضمن ذلك استرداد كل مادة عرض من الشبكة وليس من ذاكرة التخزين المؤقت المحلية، ما يمنحك صورة دقيقة لأداء التحميل الأول.
لا شيء يضاهي الاختبار في الواقع، لذا جرِّب موقعك الإلكتروني باستخدام الأجهزة ووسائل الاتصال نفسها التي يستخدمها المستخدمون واحتفظ بسجلّ لتجربتك الشخصية.
إذا كانت مجموعة الأدوات تبدو لك مربكة…
اطّلِع على دليلنا: كيفية استخدام أدوات تحسين السرعة.
إذا لم يكن لديك أي حلّ آخر، ما عليك سوى استخدام Lighthouse للتحقّق مما يلي:
- بروتوكول HTTPS: يجب أن يعرض كل موقع إلكتروني جميع مواد العرض من خلال بروتوكول HTTPS.
- إعدادات الخادم: يجب أن يستخدم خادم الويب أو شبكة توصيل المحتوى (CDN) الضغط بشكل صحيح، واستخدام HTTP/2، وتضمين الرؤوس المناسبة لتفعيل متصفّحك في تخزين الموارد مؤقتًا.
- عناصر النصوص البرمجية التي يمكن نقلها إلى أسفل الصفحة و/أو منحها سمة async أو defer
- JavaScript والمكتبات التي يمكن إزالتها
- CSS غير المستخدَم وJavaScript غير المستخدَم
- الصور التي يمكن حفظها بدرجة ضغط أعلى أو أبعاد بكسل أصغر
- ملفات الصور التي يمكن أن تكون أصغر حجمًا تم حفظها باستخدام تنسيق مختلف، على سبيل المثال الصور المحفوظة بتنسيق PNG
الجمهور والجهات المعنية والسياق
تعتمد أولويات إعادة التنظيم على جمهورك ومحتوى تطبيقك ووظائفه. من يزور موقعك الإلكتروني؟ كيف يستخدمون هذه الميزة ولماذا؟ ما هو ميزانية الأداء؟ إذا لم تكن متأكّدًا من الإجابة عن هذه الأسئلة، جرِّب تمارين جمع المتطلبات من موارد التدريب على التطبيقات المتوافقة مع الأجهزة الجوّالة (PWA): جمهورك ومحتوى تطبيقك والتصميم لجميع المستخدمين.
من هم الجهات المعنية، وما هي أولوياتها؟ سيؤثّر ذلك في طريقة تنظيم بيانات التدقيق وعرضها ومشاركتها.
إذا لم تتمكّن من تدقيق موقعك الإلكتروني بالكامل، اطّلِع على إحصاءات الصفحة للحصول على فكرة عن النقاط التي يجب التركيز عليها. يمكن أن تكون معدلات الارتداد العالية والوقت المستغرَق المنخفض في الصفحة وصفحات الخروج غير المتوقّعة مؤشرًا جيدًا لتحديد نقطة البدء. وكذلك مقاييس النشاط التجاري، مثل تكاليف الاستضافة والنقرات على الإعلانات والإحالات الناجحة. احصل على نظرة عامة من الأطراف المعنية حول البيانات المهمة بالنسبة إليهم.
الاختبار، التسجيل، الإصلاح، التكرار
سجِّل حالة موقعك الإلكتروني قبل إجراء أي تغييرات، وذلك لرصد المشاكل وتحديد نقطة بداية للتحسينات أو التراجعات. يمنحك ذلك بيانات لتبرير جهد التطوير ومكافأته.
احرص على اختبار أنواع صفحات متعدّدة داخل موقعك الإلكتروني، وليس الصفحة الرئيسية فقط. بالنسبة إلى التطبيقات المكوّنة من صفحة واحدة، اختبِر المكوّنات والمسارات ومسارات تجربة المستخدم المختلفة، وليس فقط تجربة التحميل الأولى.