كيفية الطلب

1 تسجيل الدخول أو إنشاء حساب جديد.
2 راجع طلبك أو اطلب خدمة جديدة.
3 تأكيد الدفع

إذا كنت لا تزال تواجه مشكلات ، فالرجاء إخبارنا بذلك عن طريق إرسال بريد إلكتروني إلى support@natchcenter.com . شكراً لك!

ساعات العمل

الإثنين-للجمعة 9:00AM - 20:00PM
السبت - 9:00AM-17:00PM
أيام الأحد عن طريق موعد مسبق فقط!

كيف تحسن اداء صفحتك ؟

من قبل NatchCenter / يون 25, 2018 / نشرت في المواقع
كيف تحسن اداء صفحتك ؟

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

ولحسن الحظ ، فإن هنري هيلفيتيكا ، المحلل المستقل ومحلل أداء الويب ، هو الاسم الحقيقي هنري بريسارد ، لتقديم أفضل نصائحه حول تحسين أداء موقعك.

01. السعي إلى القياس

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

"يجب أن تقيس ما هو مهم في عملية التحميل لموقعك ومشروعك التجاري. فكِّر في ما هو مهم بالنسبة للمستخدمين للتفاعل معه. فكل موقع له احتياجاته الفردية الخاصة."

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

02. تفقد بعض وزن الصفحة

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

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

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

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

03. انظر كيف كنت كومة

هناك سبب آخر يفضّل Helvetica DevTools لأنه يوفر الآن مقاييس مثل الطلاء الأول (الوقت الذي يستغرقه المستخدم لرؤية البكسل الأول من المحتوى) والطلاء الأول ذي المعنى (الوقت الذي يستغرقه يصبح المحتوى الأساسي للصفحة مرئيًا ).

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

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

04. قطع الفوضى

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

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

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


 

 

تسجيل الدخول إلى حسابك للوصول إلى ميزات مختلفة

او استخدم وسائل التواصل

إنشاء حساب

نسيت معلومات الدخول؟

عرض سعر

سنفعل كل ما في وسعنا لجعل مشروعك أفضل مشروع لدينا!

إشترك معنا في الأخبار

سوف تتلقى إشعارات عن أحدث العروض والعروض الترويجية

لا تظهر هذا مرة أخرى!
TOP