Tip:
Highlight text to annotate it
X
مايلي أويي: مرحبًا.
اسمي مايلي أويي.
أعمل كرئيسة قسم تقنية برامج المطورين في Google
ضمن فريق دعم مشرفي المواقع.
يتناول هذا الفيديو كيفية العثور على إصلاحات سريعة
يمكنك أنت أو أحد أعضاء الفريق الفني
تطبيقها بسهولة لتحسين الأداء
على موقعك الإلكتروني على الجوّال.
ولكن قبل أن نتحدث عن كيفية تحقيق تقدم سريع
دعنا نطلع على الإحصاءات.
الأداء قد يؤثر في الأرباح - وهذه حقيقة لا يمكن إغفالها.
من خلال تجربة أجراها فريق إدارة موقع Strangeloop
تمت إضافة مهلة إضافية بمقدار ثانية واحدة
إلى الصفحات التي يتم عرضها لمستخدمي الهواتف الذكية.
ومن خلال مهلة بمقدار ثانية واحدة فقط، اكتشفوا
نقص عدد مشاهدات الصفحة بنسبة تزيد عن 9%
فضلاً عن زيادة بنسبة تزيد عن 8% في معدل الارتداد
بخلاف هبوط معدل التحويلات بنسبة 3.5%.
وما زاد الطين بلة في نهاية الأمر بعد انتهاء التجربة
تناقص احتمالات عودة المتسوقين لتصفح الموقع الإلكتروني
إلى حد كبير.
لذا يتعين علينا التعرف على الحالة الحالية للمستخدمين
وسرعة صفحات مواقع الويب على الجوّال.
حسنًا؛ تشير الدراسات إلى عدم تشتت انتباه المستخدم
في حالة استخدام مهلة لا تزيد عن ثانية واحدة.
بينما الآن يبلغ متوسط سرعة تحميل الصفحة
سبع ثوانٍ على الجوّال.
هذا معناه توفر ست ثوانٍ إضافية
يمكن من خلالها تجربة موقع إلكتروني آخر
أو نسيان المطلوب فعله أو ربما الشعور بالإحباط.
دعني أوضح لك المزيد عن أسباب
تصفح الويب على الجوّال بشكل أبطأ من سطح المكتب.
يمكننا المقارنة بين المهلة عند تصفح الويب على كل من الجوّال وسطح المكتب.
لنفترض أن مستخدم كمبيوتر محمول أثناء تصفحه الموقع google.com
على وشك إجراء عملية بحث.
بعد إدخال مستخدم طلب بحث،
قد تستغرق مدة انتقال البيانات من متصفح المستخدم للاتصال بمحرك بحث Google
ومعالجة خوادم Google لطلب البحث، ثم عرض محرك البحث Google
للنتائج في متصفح الكمبيوتر المحمول
مدة تقل عن نصف ثانية.
في الواقع هذا هو ما اعتاد الكثيرون عليه في ما يتعلق
بالأداء.
بينما يستحيل تقريبًا أن تبلغ فترة انتقال البيانات بالكامل على الهواتف الذكية
أقل من نصف ثانية.
السبب في ذلك أنه عندما يدخل مستخدم
طلب بحث على الهاتف الذكي، يحتاج البرنامج
إلى الاتصال بشبكة الهاتف الجوّال
ليتسنى له الوصول إلى الخادم.
وتتم تهيئة شبكات الهاتف الجوّال بطريقة
تستدعي أن يستغرق الهاتف الذكي ما لا يقل عن
0.5 ثانية للاتصال بخادم مثل Google
سواء كانت هذه الشبكات من الجيل الثالث أو الرابع.
وبعد اتصالها بالخادم بعد انقضاء نصف ثانية
لا يزال محرك بحث Google بحاجة إلى معالجة طلب البحث وتقديم
النتائج وعرض صفحتها على الهاتف الذكي.
الدرس الرئيسي هو أن الزائرين المحتملين عبر الهواتف الذكية
سينتظرون ما لا يقل عن 0.5 ثانية للاتصال بالخادم
فقط.
ثم بعد مرور حوالي 0.6 ثانية
عندما يزيد الوقت المنقضي عن ثانية واحدة، من المحتمل فعلاً أن يصاب زائرو موقعك
بتشتت الانتباه.
لذا دعنا نتحدث عن كيفية زيادة سرعة انتقال البيانات.
بالنسبة إلى هذا الفيديو، سأوضح الأفكار باستخدام Google Analytics
مع موقع التجارة الإلكترونية، Google Store، على
www.googlestore.com.
دعنا نبدأ في Google Analytics وننشئ جزءًا لحركة البيانات عبر
الجوّال.
ابدأ بإنشاء جزء جديد.
في الشهر الماضي فقط، أطلق زملاء العمل في فريق سرعة الصفحة
ميزة جديدة في Google Analytics اسمها سرعة الموقع.
دعنا ننتقل إلى توقيتات الصفحة في سرعة الموقع.
مع تخصيص الجزء لحركة بيانات الجوّال
حدد علامة تبويب "التوزيع".
تقدم علامة تبويب "التوزيع" عرضًا على مستوى عالٍ
لأداء أحد المواقع.
ويمكننا أن نلاحظ أن متوسط سرعة تحميل الصفحة
على الجوّال للموقع Google Store
يزيد عن ست ثوانٍ.
ونلاحظ أيضًا أن تحميل 46% من صفحات موقعي
يستغرق فترة تتراوح من ثلاث إلى سبع ثوانٍ على الجوّال.
الجيد في الأمر توفر العديد من فرص التحسين.
ومن خلال توقيتات الصفحة في سرعة الموقع أيضًا،
انقر على علامة تبويب "المستكشف".
وفي هذه الصفحة، وبالترتيب الافتراضي لمشاهدات الصفحة
بما يتيح الاطلاع على الصفحات الأكثر زيارة على موقعنا
يمكنك الاطلاع على السرعة النسبية لكل صفحة.
ويتضح أن ثالث أكثر صفحة شيوعًا، ضمن فئة YouTube
تبيع أشياء مثل زجاجات المياه والمغناطيسات عبر YouTube
تتسم ببطء لا يحتمل وهي أبطأ بنسبة تبلغ 350% من
سرعة صفحة الجوّال المتوسطة والتي عرفنا سابقًا أنها لم تكن
بالقدر المطلوب من السرعة للبدء بها.
ويمكننا استخدام هذه الميزة لإنشاء قائمة بالصفحات الشائعة البطيئة
التي نريد دراستها.
الآن، دعنا ننتقل إلى اقتراحات سرعة الموقع
للتعرف على ما سيتم إدخاله من تحسينات.
نرى أن لصفحة YouTube هناك
تتوفر تسعة اقتراحات متعلقة بسرعة الصفحة.
يؤدي النقر على الاقتراحات إلى تشغيل إحصاءات سرعة الصفحة
في نافذة جديدة.
الأمر أشبه بتصحيح اختبار أمام عينيك.
بعد اكتمال عرض الإحصاءات اطلع على أداء مواقع الجوّال.
ولم يفاجئنا تحقيق صفحتنا على YouTube
نسبة 55 في المئة في ما يتعلق بأفضل ممارسات
الأداء.
تعادل هذه النتيجة التقييم "ضعيف جدًا". ونظرًا لأن هذا الفيديو يتناول
إجراء إصلاحات سريعة في أداء المواقع على الجوّال
سينصب تركيزنا على إصلاح أبسط الاقتراحات بعلامة التعجب
الحمراء.
قد تكون بعض هذه الاقتراحات معروفة وبعضها أقل شيوعًا.
ولكن بالنسبة إلى أحد الاقتراحات، يمكنك توسيعه للحصول على المزيد من التفاصيل.
وأود أن تتعرف على
مدى سهولة تنفيذ اقتراحات الأداء هذه
والفوائد المكتسبة منها في نهاية الأمر.
لقد صممت مخططًا بغرض تناول شريحتين
حيث يُرجى أن يوضح اقتراحات الأداء السهلة
ويقدم السياق المتعلق بالاقتراحات الأكثر صعوبة إلى حد ما.
لا تتردد في إيقاف الفيديو مؤقتًا إذا كنت تريد مراجعة بعض النقاط مرة أخرى.
ويتناول الجزء العلوي من المخطط الأشياء التي يسهل تنفيذها
في بضع ساعات
عن طريق مطور برامج أو شخص ما لديه مهارات فنية أعلى.
الإجراء الأول هو تمكين الضغط.
يؤدي تمكين الضغط إلى ضغط الموارد.
بذلك ستقل البيانات المطلوب نقلها بين خادم الويب
والبرنامج.
يمثل هذا تغييرًا بسيطًا في إعدادات ملف تهيئة
الخادم.
ويسهل تصغير الموارد عبر
أدوات متوفرة بشكل شائع.
يمثل استخدام النصوص البرمجية غير المتزامنة إلى حد كبير
نسخ ولصق مقتطفات شفرة جديدة
لاستبدال النسخ الأقدم منها.
ولتحقيق أقصى الاستفادة من التخزين المؤقت في المتصفح، يمكنك ببساطة
إضافة رؤوس HTTP مناسبة إلى مواردك.
الاقتراح الأخير السهل إلى حد كبير بشأن السرعة
هو تجنب عمليات إعادة توجيه الصفحات المقصودة.
في حالة وجود صفحات في سلسلة عمليات إعادة توجيه
يعني هذا تصحيح عنوان URL للمصدر للتوجيه مباشرةً
إلى الهدف بدلاً من أية صفحات وسيطة.
يمكننا الاطلاع مرة أخرى على مدى الفائدة التي تعود من تصحيح عمليات إعادة التوجيه الخارجية
عن طريق فحص المهلة قبل عرض مواقع الويب على هاتف ذكي.
وستتطلب كل عملية إعادة توجيه من مستخدم الهاتف الجوّال
الانتظار ما لا يقل عن 0.5 ثانية إضافية قبل تحميل الصفحة.
بالرجوع إلى اقتراح آخر منخفض الصعوبة
تماثل سهولة تمكين الضغط سهولة نسخ الشفرة إلى
ملف تهيئة خادم.
ويوجد هناك فعلاً ملفات تهيئة رئيسية مفتوحة المصدر
يمكنك الإشارة إليها، أي نسخها، للحصول على
إعدادات الأمان والأداء المناسبة
للخادم.
تزداد اقتراحات السرعة في الصفحة الثانية من هذا المخطط
من حيث الصعوبة لمطوري البرامج.
فالعديد منها لن تكون تصحيحات
يمكنك إجراؤها خلال بضع ساعات.
بل تتطلب المزيد من التفكير والتحسينات في المعالجة.
مع ذلك، أود قضاء بعض الوقت للدردشة
حول اقتراح تحسين الصور.
تتضمن عملية تحسين الصور مجموعة
من التحسينات بدءًا من الضغط بدون التأثير في الجودة
وانتهاءً بإنشاء الصور واقتصاصها
لموقعك الإلكتروني على الجوال خصيصًا.
إن عملية تحسين الصور ليست بالقدر نفسه من البساطة
التي تتسم بها بعض اقتراحات السرعة في
الشريحة السابقة.
ولكن تأثيرها قد يكون كبيرًا.
تشكّل الصور 65% من بيانات الويب على الجوّال.
ويمكن أن يقلل تحسين هذه الموارد وقت التنزيل
ومن ثم يتم تحميل الصفحات بسرعة أكبر في نهاية الأمر.
المخرج الرئيسي من كل ذلك هو أنه
إذا كانت لديك صفحة على الجوّال تشهد حركة بيانات مرتفعة
ومقترنة باقتراحات سرعة ذات علامة التعجب الحمراء بمستوى منخفض
من الصعوبة لمطوري البرامج، سيكون رائعًا لزائري صفحتك
ولمؤسستك أن يتم تصحيح مشكلات السرعة.
ولكن لاستلهام المزيد من الأفكار دعنا نطلع على
WebPageTest.org.
من خلال اختبار صفحة الويب، يمكننا إدخال صفحة
مثل الصفحة ضمن فئة YouTube، وتحليلها من حيث السرعة.
حدد وكيل مستخدم على الجوّال مثل iPhone أو هاتف Android
الذكي.
عند اكتمال اختبار صفحة الويب للصفحة البطيئة
يمكننا حينئذٍ التعرف على مواضع الخلل.
لقد راجعت هذه الصفحة مع زميلي، إيليا جريجوريك،
الذي يركز في المقام الأول على الأداء.
كان رده -- للأسف.
هذا المخطط البياني له مدلولات سلبية.
المخطط يمثل مرئيًا
سبب زيادة وقت تحميل الصفحة عن 15 ثانية.
تمثل الأشرطة الزرقاء تنزيلات المحتوى
المطلوبة لتحميل الصفحة.
ولتبدأ الصفحة في عرض محتواها، تطلب ذلك
سبع ثوانٍ تقريبًا.
وبهذا الأداء، من المتوقع بالضرورة أن ينتظر
المتسوق عبر YouTube سبع ثوانٍ
لاستقبال أية استجابات مرئية وما يزيد عن
15 ثانية ليتسنى تحميل الصفحة بأكملها.
فإذا كنت لا تزال غير راغب في إجراء بعض
هذه التحسينات السريعة
فيرجى ملاحظة أنه وفقًا لمقالة "ما يريده المستخدمون
من المواقع على الجوّال اليوم"، أعلن 61% من المستخدمين أنهم
في حالة عدم عثورهم على ما كانوا يبحثون عنه
مباشرةً على موقع على الجوّال، فسينتقلون
بسرعة إلى موقع آخر.
لذلك يمكنك ممارسة نشاط رائع من خلال مقارنة صفحتك وإحصاءات سرعة
صفحتك بالصفحة المعادلة لمنافسك.
فممارستي الرياضة طيلة حياتي
وكوني أصغر بنت من بين ثلاث بنات
دفعاني إلى أن أتحمس بشكل خاص لإجراء تحسينات
في حالة تفوقي في المنافسة.
ويمكنك أيضًا عند اختبار صفحة الويب، تنزيل عرض شريط صور
لتوضيح طريقة عرض صفحتك على الجوّال.
لا تتردد في مقارنة شريط الصور الذي يتم عرضه لصفحتك
بصفحات المواقع الأخرى في مجالك.
أردت الانتهاء بالإشارة إلى موارد رائعة.
فهناك ميزة سرعة الصفحة التي تتضمن أدوات مثل إحصاءات ومقالات
سرعة الصفحة.
وهناك أيضًا مقاطع فيديو رائعة بواسطة "إيليا"
وأعضاء فريق سرعة الصفحة.
وأخيرًا، فلنشكر WebPageTest.org.
شكرًا للمشاهدة.