تحسين سرعة أداء الموقع الإلكتروني
صفحة 1 من اصل 1
تحسين سرعة أداء الموقع الإلكتروني
سرعة موقعك الإلكتروني من العوامل المهمة لنجاحه بغض النظر عن مدى روعة تصاميمه أو اتقان عملية إنشاءه. كون موقعك قابل للتحميل على المتصفح بسرعه معناه أن موقعك له فرصة أكبر للظهور في أعلى مستويات نتائج البحث . بالإضافة إلى ذلك، تشير الدراسات إلى أن 40% من الأشخاص سيتركون الموقع إذا استغرق أكثر من ثلاث دقائق للتحميل على متصفحاتهم. و لجعل الأمور أسوء، فإن كل ثانية إضافية يستغرقها الموقع للتحميل ستتسبب في تقليل معدلات التحويل بنسبة 7%.
السؤال هنا، كيف يمكن تقليل وقت التحميل من أجل زيادة العوائد في الموقع سواءً المادية أو من حيث عدد الزوار؟
السؤال هنا، كيف يمكن تقليل وقت التحميل من أجل زيادة العوائد في الموقع سواءً المادية أو من حيث عدد الزوار؟
هذه التدوينة تتضمن شرح كيفية زيادة سرعة التحميل بمعدل 5 ثواني ، إذا اتبعت التعليمات التالية ستتمكن من زيادة سرعة التحميل لديل بمعدل 4 إلى 6 ثواني، و لكن النتيجة يمكن أن تختلف من موقع إلى آخر!
الأساسيات:
. HTTP بالنسبة للمبتدئين، فإن السر يكمن في تقليل وقت تحميل الواجهة الأمامية. بالنسبة للمستخدم فإن 80% من الوقت يتم استهلاكه في طلبات ال
قم بتقليل هذه الطلبات و سيرتفع مستوى الأداء لديك. و للقيام بذلك يمكنك اتباع الخطوات التالية:
التزم بالبساطة – يجب ان يكون تصميم الصفحات لديك بسيطاً. يمكنك الاكتفاء بصورة أو اثنتين مع نص مناسب. -
في محتوى واحد. CSS التجميع – تجميع الأوامر النصية في محتوى واحد، بالإضافة إلى تجميع محتوى ال -
.HTTPتهدف بقية الأساليب كذلك إلى تقليل طلبات ال
قم بتقليل هذه الطلبات و سيرتفع مستوى الأداء لديك. و للقيام بذلك يمكنك اتباع الخطوات التالية:
التزم بالبساطة – يجب ان يكون تصميم الصفحات لديك بسيطاً. يمكنك الاكتفاء بصورة أو اثنتين مع نص مناسب. -
في محتوى واحد. CSS التجميع – تجميع الأوامر النصية في محتوى واحد، بالإضافة إلى تجميع محتوى ال -
.HTTPتهدف بقية الأساليب كذلك إلى تقليل طلبات ال
CSS جمع الصور مع مكونات
إذا احتوى الموقع لديك على عدد كبير من الصور، سيضطر الخادم لديك إلى استهلاك وقت أكبر لضمان أن مصادر هذه الصور لا تشكل خطراً على الموقع، و بالتالي سيؤثر على وقت التحميل. تقوم السبرايتس أو الرسوم الحاسوبية بتجميع الخلفيات و الصورفي صفحة واحدة و على شكل صورة واحدة و بسبب خصائص مواقع الصور المذكورة في السي إس إس ستظهر كل صورة في موقعها الصحيح.
تقليل الرسوم الحاسوبية لل CSS
- التقليل الناتج عن حاجة الخادم لتحميل موارد إضافية.
أو المتطلبات الإضافية . - Request Overhead -
-التقليل من عدد الخوارزميات الكلي الذي تقوم كل صفحة بتحميله.
لتسهيل القيام بهذه العمليات. أو يمكنك اتباع الخطوات التي تنصح بها [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]في هذا الخصوص.
يمكنك استخدام أحد الخدمات مثل
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
.gzip أو deflate يمكنك تقليل عدد الخواريزميات التي يجب تحميلها من كل صفحة بضغطهم عن طريق استخدام
بالرغم من ذلك يجب تجهيز المحتوى حتى يتم ضغطه بصوره ملائمة. حتى يتحقق ذلك، يجب التأكد من التالي حتى يتم ضغط المحتوى بصورة فعالة:
و ذلك عن طريق: CSSو ال HTMLحافظ على الاتساق بين أكواد ال
بطريقة منطقية مثلاً بترتيب هجائي.CSSقم بطلب أزواج ال -
.HTMLقم بالمثل مع المتطلبات المرتبطة بال -
إذا كنت تستخدم اللغة الإنجليزية.lowercase التزم بنسق معين بالنسبة لنمط الأحرف و حاول استخدام الأحرف الصغيرة-
الخاص بك. HTMLتأكد من أنك متوافق مع سمات الاقتباس الخاصة بال -
عن طريق التخلص من الفواصل و الفوارق الغير لازمة. بهذه الطريقة سيتم تسريع عمليات التحميل و التحويل و التنفيذ. CSS و ال JavaScript قلل من ال -
.[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ، [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ، [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]مثل :JavaScriptينصح باستخدتم أحد هذه الوسائل للتقليل من ال
أو المتطلبات الإضافية . - Request Overhead -
-التقليل من عدد الخوارزميات الكلي الذي تقوم كل صفحة بتحميله.
لتسهيل القيام بهذه العمليات. أو يمكنك اتباع الخطوات التي تنصح بها [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]في هذا الخصوص.
يمكنك استخدام أحد الخدمات مثل
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
.gzip أو deflate يمكنك تقليل عدد الخواريزميات التي يجب تحميلها من كل صفحة بضغطهم عن طريق استخدام
بالرغم من ذلك يجب تجهيز المحتوى حتى يتم ضغطه بصوره ملائمة. حتى يتحقق ذلك، يجب التأكد من التالي حتى يتم ضغط المحتوى بصورة فعالة:
و ذلك عن طريق: CSSو ال HTMLحافظ على الاتساق بين أكواد ال
بطريقة منطقية مثلاً بترتيب هجائي.CSSقم بطلب أزواج ال -
.HTMLقم بالمثل مع المتطلبات المرتبطة بال -
إذا كنت تستخدم اللغة الإنجليزية.lowercase التزم بنسق معين بالنسبة لنمط الأحرف و حاول استخدام الأحرف الصغيرة-
الخاص بك. HTMLتأكد من أنك متوافق مع سمات الاقتباس الخاصة بال -
عن طريق التخلص من الفواصل و الفوارق الغير لازمة. بهذه الطريقة سيتم تسريع عمليات التحميل و التحويل و التنفيذ. CSS و ال JavaScript قلل من ال -
.[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ، [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ، [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]مثل :JavaScriptينصح باستخدتم أحد هذه الوسائل للتقليل من ال
انشر محتواك الثابت مع CDNs
بما أن زوار موقعك يمكن أن يكونوا من أي مكان فإن سرعات التحميل لديهم ستختلف لذلك يمكنك نشر محتويات موقعك على أكثر من خادم و بالتالي ستتسرع عملية التحميل لمختلف المستخدمين. لتحقيق ذلك ، يمكنك الاستعانة بخدمة توصيل المحتوى .هذه الخدمة عبارة عن مجموعة من الخوادم الموجودة في مواقع مختلفة من العالم، و التي يمكن أن تقوم ب:
ارسال الملفات بطريقة اسرع – يتم ارسال الملفات التي تكون قريباً على مستخدم بعينه.
تقليل حجم الملفات – يتم ارسال الملفات بدون الكوكيز.
على سبيل المثال يمكن أن تمتلك هذه الخدمة خوادم في الولايات المتحدة و مصر و الأردن. عندما يدخل أحد المستخدمين إلى موقعك يقوم الخادم الأقرب بتولي مهمة تزويده بالملفات المطلوبة.يمكن الحصول على هذه الخدمة عن طريق إجراء تعديل بسيط على الأكواد و لكنها خدمة مكلفة مادياً.
ارسال الملفات بطريقة اسرع – يتم ارسال الملفات التي تكون قريباً على مستخدم بعينه.
تقليل حجم الملفات – يتم ارسال الملفات بدون الكوكيز.
على سبيل المثال يمكن أن تمتلك هذه الخدمة خوادم في الولايات المتحدة و مصر و الأردن. عندما يدخل أحد المستخدمين إلى موقعك يقوم الخادم الأقرب بتولي مهمة تزويده بالملفات المطلوبة.يمكن الحصول على هذه الخدمة عن طريق إجراء تعديل بسيط على الأكواد و لكنها خدمة مكلفة مادياً.
قم بترقية التصفح عن طريق استخدام عناوين منتهية
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
عندما يقوم أحدهم بزيارة موقعك سيتم حفظ ملفات من موقعك على جهازه لتقليل وقت التحميل فالمرات القادمة و لكن مثل هذه الملفات تحتوي على تاريخ إنتهاء. يمكنك القيام بشيئين بخصوص هذا الموضوع:
المكونات الثابتة – يمكنك استخدام المكونات الغير قابلة للإنتهاء بدلاً من تلك التي يمكن أن تنتهي بعد فترة من الزمن مما سيوفر الوقت على زوار موقعك.
لمساعدة المتصفح عند وجود طلبات مشروطة. cache-control header المكونات المرنة – استخد
مثال على موعد الإنتهاء:
Expires: Thu, 20 September 2013 20:00:00 GMT
المكونات الثابتة – يمكنك استخدام المكونات الغير قابلة للإنتهاء بدلاً من تلك التي يمكن أن تنتهي بعد فترة من الزمن مما سيوفر الوقت على زوار موقعك.
لمساعدة المتصفح عند وجود طلبات مشروطة. cache-control header المكونات المرنة – استخد
مثال على موعد الإنتهاء:
Expires: Thu, 20 September 2013 20:00:00 GMT
[b]headers بالحفاظ على تجاوب ال HTTPاسمح ل
بسيطة بالعادة: حيث تقوم بجلب و ارسال ملف واحد ثم تغلق. بالرغم من بساطة مثل هذه العملية لكن الوقت المتطلب للتنفيذ ليس بالقليل. HTTP تكون طلبات ال
المحافظة على التجاوب معناه أن المتصفح و الخادم موافقان على استخدام نفس الصلة لجلب و ارسال مختلف أنواع الملفات. بمعنى آخر يحافظ الخادم على قناة التواصل في الوقت الذي تبقى فيه في الموقع بدلاً من الحاجة لإنشاء قنوات أخرى لتنفيذ عمليات آخرى، بهذه الطريقة سيقل الضغط على جهازك و على الشبكة.
لتحقيق ذلك يمكنك استخدام أحد الطريقتين المذكورتين أدناه:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] -
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
-ثلاث أدوات لفحص الأداء
المحافظة على التجاوب معناه أن المتصفح و الخادم موافقان على استخدام نفس الصلة لجلب و ارسال مختلف أنواع الملفات. بمعنى آخر يحافظ الخادم على قناة التواصل في الوقت الذي تبقى فيه في الموقع بدلاً من الحاجة لإنشاء قنوات أخرى لتنفيذ عمليات آخرى، بهذه الطريقة سيقل الضغط على جهازك و على الشبكة.
لتحقيق ذلك يمكنك استخدام أحد الطريقتين المذكورتين أدناه:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] -
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
-ثلاث أدوات لفحص الأداء
هذه ثلاث من الوسائل التي يمكن استخدامها لقياس كفاءة و أداء موقعك.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] فحص أداء المواقع باستخدام بينجدوم
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] فحص أداء المواقع باستخدام بينجدوم
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى