اميرة عبد الدايم
07-05-2015, 10:28 PM
http://www.cloudwings.com.sa/images/bfi_thumb/fast-furious-vs-need-for-speed-438-2z2v58oatc0hdjwas73qio.jpg
أحد أهم الإعتبارات الأساسية لإنشاء المواقع الإلكترونية هو مدى سرعة التحميل. قبل أن تبدأ في تحسين موقعك، من المهم أن تكون على دراية بمدى بجودة عمله أو كيفية تسريع المواقع . أحد الطرق لإنجاز هذه المهمة هي بتوظيف أحد أدوات تسريع الويب من جوجل (https://developers.google.com/speed/) أو Pingdom (http://tools.pingdom.com/fpt/)أو YSlow (http://yslow.org/). كل من هذه الأدوات ستساعدك على إنشاء قاعدة مرجعية للأداء.
استخدام الأدوات
بعد ذلك، يمكنك استخدام الأدوات لزيادة عدد مرات تحميل الصفحة. أدناه شرح لما سيحدث عند استخدام أي من هذه الأدوات. كمثال يتم استخدام موقع HowToEndYourSuffering.com. لتجربة الأدوات، هذا الموقع يستخدم قالب Genesis .
نتائج جوجل
http://www.cloudwings.com.sa/images/2015/05/download.png (http://www.cloudwings.com.sa/images/2015/05/download.png)
يقوم Google PageSpeed Insights بعرض نتائج العرض على الهواتف الذكية و الأجهزة المكتبية، بالإضافة إلى قائمة بالنقاط التي من الممكن إصلاحها و كيفية إصلاحها.
نتائج Pingdom
http://www.cloudwings.com.sa/images/2015/05/1download.png (http://www.cloudwings.com.sa/images/2015/05/1download.png)
نتائج Yslow
http://www.cloudwings.com.sa/images/2015/05/download-1.png (http://www.cloudwings.com.sa/images/2015/05/download-1.png)
في الجزء السفلي من منتصف الصفحة نتائج Yslow مع التحسينات المقترحة. استناداً إلى ما يمكن أن توفره الأدوات، إليكم نصائح لكيفية تحسين سرعات التحميل على مواقعكم:
النصائح
1- قلل ال HTML،ال CSS و الJavaScript: لتنفيذ هذه الخطوة، قم بإزالة كافة التعليقات و الأكواد و المساحات البيضاء غير الضرورية . ستؤدي هذه الخطوة إلى تحسين الأداء بسبب انخفاض حجم الملف. لتقليل ال HTML يمكنك الإطلاع على HTML Compress (http://download.cnet.com/HTML-Compress/3000-2381_4-10056164.html). بالنسبة لل JavaScript، استخدم YUI Compressor (http://yui.github.io/yuicompressor/) أما لل CSS جرب CSS Compressor (http://csscompressor.com/). كخيار آخر للاستفادة من الإضافة الخاصة بكروم PageSpeed Insights (https://developers.google.com/speed/docs/insights/MinifyResources) ، يمكنك استخدامه لإنشاء نسخة محسنة من كود ال HTML . توجد برامج آخرى مقترحة من قبل The PageSpeed Insights.
2- أجعل ال CSS و ال JavaScript عناصر خارجية: استخدام ملفات خارجية سيساعد بشكل عام على رفع سرعة تحميل الصفحات لأن ملفات ال JavaScript و ال CSS سيقوم المستعرض بجلبها.
على صعيدٍ آخر، إذا استخدمت ال CSS على صفحة ويب، أجعله ضمن ال HEAD element. بهذه الطريقة ستم تحميل الصفحة بشكل أسرع و تدريجي. بالنسبة لل JavaScript، أنقل النصوص إلى نهاية الصفحة.
3- الغي النصوص المكررة ضمن صفحة الويب: قد تبدو هذه النقطة غريبة و لكنها شائعة. تكرار ملفات ال JavaScript و ال CSS تقلل من أداء الموقع عن طريق تكوين طلبات HTTP غير ضرورية بالإضافة إلى امتدادات JavaScript مهملة. بالإضافة إلى ذلك، من المهم التأكد من ما إذا كانت النصوص مكررة في الملفات الخارجية كذلك. لتجنب هذه المشكلة يمكن استخدام نموذج إدارة النصوص ضمن القوالب.
http://www.cloudwings.com.sa/images/2015/05/download-2.png (http://www.cloudwings.com.sa/images/2015/05/download-2.png)
الكود أعلاه خاص بال JavaScript و ال PHP.
4- تحسين الصور: قلل أحجام الصور باستخدام صيغ GIF أو PNG-8 أو JPEG . تأكد من أن الحجم يلائم احتياجك، تأكد من الطول و العرض الخاص بكل صورة على كل صفحة. لا تستخدم خيار إعادة التهيئة خاصة من الصور الكبيرة إلى الصغيرة حيث أن مقاسات الصورة من الممكن أن يكون ملائماً على الشاشة إلا أن الحجم سيبقى هو نفسه. يمكن استخدام برنامج تعديل صور للتأكد من أن المقاسات و الأحجام ملائمة.من الجيد اختبار ضغط الصور حيث أنه مع التجربة ستصل إلى حجم ملائم مع مستوى الجودة الذي تريده.
5-استخدم ضغط GZIP : إذا كانت خدمة الاستضافة تستخدم GZIP ، يمكنك استخدامها لإحداث تأثير ملحوظ لتسريع موقعك الإلكتروني. يمكن تقليل حجم الملف إلى 70% من دون التأثير على جودة الصورة أو حجم الفيديو. للتأكد من أن موقع يدعم GZIP يمكنك استخدام هذا الاختبار (http://www.gidnetwork.com/tools/gzip-test.php).
http://www.cloudwings.com.sa/images/2015/05/download-4.png (http://www.cloudwings.com.sa/images/2015/05/download-4.png)
الصورة أعلاه توضح أن GZIP تم استخدامه و أن الموقع مضغوط.
6- تجنب CSS Expressions: تسمح لك CSS Expressionsبتحديد خصائص ال CSS بصورة ديناميكية. الجانب السيء هنا هو أن التعبيرات يتم تقييمها كلما يتم تعديل الصفحة من ناحية الحجم الكلي أو أعادة تعيين الجزء الظاهر منها بتحريك الفأرة عبرها. هذه التغييرات المستمرة تؤدي إلى تقويض تجربة المستخدم.
7- أضف الرؤوس المنتهية Expires Headers: بسبب تعقيدات صفحات الويب، يجب تحميل العديد من طلبات ال HTTP لضمان تحميل كافة العناصر المطلوبة. عندما تقوم باستخدام Expires headers، فإن هذه العناصر من الممكن استجلابها و بالتالي تجنب طلبات ال HTTP غير الضرورية لمشاهدات الصفحة المتكررة. بينما ترتبط ال Expires headers بالصور إلا أنه من الممكن توظيفها مع النصوص و الفلاش.
بعض هذه الحلول بسيطة و البعض الآخر يتطلب وقت مطول لتنفيذه و لكن لتوظيف أحدها لابد أن يساهم في تسريع وقت تحميل صفحات موقعك لتجنب خسارة الزوار.
أحد أهم الإعتبارات الأساسية لإنشاء المواقع الإلكترونية هو مدى سرعة التحميل. قبل أن تبدأ في تحسين موقعك، من المهم أن تكون على دراية بمدى بجودة عمله أو كيفية تسريع المواقع . أحد الطرق لإنجاز هذه المهمة هي بتوظيف أحد أدوات تسريع الويب من جوجل (https://developers.google.com/speed/) أو Pingdom (http://tools.pingdom.com/fpt/)أو YSlow (http://yslow.org/). كل من هذه الأدوات ستساعدك على إنشاء قاعدة مرجعية للأداء.
استخدام الأدوات
بعد ذلك، يمكنك استخدام الأدوات لزيادة عدد مرات تحميل الصفحة. أدناه شرح لما سيحدث عند استخدام أي من هذه الأدوات. كمثال يتم استخدام موقع HowToEndYourSuffering.com. لتجربة الأدوات، هذا الموقع يستخدم قالب Genesis .
نتائج جوجل
http://www.cloudwings.com.sa/images/2015/05/download.png (http://www.cloudwings.com.sa/images/2015/05/download.png)
يقوم Google PageSpeed Insights بعرض نتائج العرض على الهواتف الذكية و الأجهزة المكتبية، بالإضافة إلى قائمة بالنقاط التي من الممكن إصلاحها و كيفية إصلاحها.
نتائج Pingdom
http://www.cloudwings.com.sa/images/2015/05/1download.png (http://www.cloudwings.com.sa/images/2015/05/1download.png)
نتائج Yslow
http://www.cloudwings.com.sa/images/2015/05/download-1.png (http://www.cloudwings.com.sa/images/2015/05/download-1.png)
في الجزء السفلي من منتصف الصفحة نتائج Yslow مع التحسينات المقترحة. استناداً إلى ما يمكن أن توفره الأدوات، إليكم نصائح لكيفية تحسين سرعات التحميل على مواقعكم:
النصائح
1- قلل ال HTML،ال CSS و الJavaScript: لتنفيذ هذه الخطوة، قم بإزالة كافة التعليقات و الأكواد و المساحات البيضاء غير الضرورية . ستؤدي هذه الخطوة إلى تحسين الأداء بسبب انخفاض حجم الملف. لتقليل ال HTML يمكنك الإطلاع على HTML Compress (http://download.cnet.com/HTML-Compress/3000-2381_4-10056164.html). بالنسبة لل JavaScript، استخدم YUI Compressor (http://yui.github.io/yuicompressor/) أما لل CSS جرب CSS Compressor (http://csscompressor.com/). كخيار آخر للاستفادة من الإضافة الخاصة بكروم PageSpeed Insights (https://developers.google.com/speed/docs/insights/MinifyResources) ، يمكنك استخدامه لإنشاء نسخة محسنة من كود ال HTML . توجد برامج آخرى مقترحة من قبل The PageSpeed Insights.
2- أجعل ال CSS و ال JavaScript عناصر خارجية: استخدام ملفات خارجية سيساعد بشكل عام على رفع سرعة تحميل الصفحات لأن ملفات ال JavaScript و ال CSS سيقوم المستعرض بجلبها.
على صعيدٍ آخر، إذا استخدمت ال CSS على صفحة ويب، أجعله ضمن ال HEAD element. بهذه الطريقة ستم تحميل الصفحة بشكل أسرع و تدريجي. بالنسبة لل JavaScript، أنقل النصوص إلى نهاية الصفحة.
3- الغي النصوص المكررة ضمن صفحة الويب: قد تبدو هذه النقطة غريبة و لكنها شائعة. تكرار ملفات ال JavaScript و ال CSS تقلل من أداء الموقع عن طريق تكوين طلبات HTTP غير ضرورية بالإضافة إلى امتدادات JavaScript مهملة. بالإضافة إلى ذلك، من المهم التأكد من ما إذا كانت النصوص مكررة في الملفات الخارجية كذلك. لتجنب هذه المشكلة يمكن استخدام نموذج إدارة النصوص ضمن القوالب.
http://www.cloudwings.com.sa/images/2015/05/download-2.png (http://www.cloudwings.com.sa/images/2015/05/download-2.png)
الكود أعلاه خاص بال JavaScript و ال PHP.
4- تحسين الصور: قلل أحجام الصور باستخدام صيغ GIF أو PNG-8 أو JPEG . تأكد من أن الحجم يلائم احتياجك، تأكد من الطول و العرض الخاص بكل صورة على كل صفحة. لا تستخدم خيار إعادة التهيئة خاصة من الصور الكبيرة إلى الصغيرة حيث أن مقاسات الصورة من الممكن أن يكون ملائماً على الشاشة إلا أن الحجم سيبقى هو نفسه. يمكن استخدام برنامج تعديل صور للتأكد من أن المقاسات و الأحجام ملائمة.من الجيد اختبار ضغط الصور حيث أنه مع التجربة ستصل إلى حجم ملائم مع مستوى الجودة الذي تريده.
5-استخدم ضغط GZIP : إذا كانت خدمة الاستضافة تستخدم GZIP ، يمكنك استخدامها لإحداث تأثير ملحوظ لتسريع موقعك الإلكتروني. يمكن تقليل حجم الملف إلى 70% من دون التأثير على جودة الصورة أو حجم الفيديو. للتأكد من أن موقع يدعم GZIP يمكنك استخدام هذا الاختبار (http://www.gidnetwork.com/tools/gzip-test.php).
http://www.cloudwings.com.sa/images/2015/05/download-4.png (http://www.cloudwings.com.sa/images/2015/05/download-4.png)
الصورة أعلاه توضح أن GZIP تم استخدامه و أن الموقع مضغوط.
6- تجنب CSS Expressions: تسمح لك CSS Expressionsبتحديد خصائص ال CSS بصورة ديناميكية. الجانب السيء هنا هو أن التعبيرات يتم تقييمها كلما يتم تعديل الصفحة من ناحية الحجم الكلي أو أعادة تعيين الجزء الظاهر منها بتحريك الفأرة عبرها. هذه التغييرات المستمرة تؤدي إلى تقويض تجربة المستخدم.
7- أضف الرؤوس المنتهية Expires Headers: بسبب تعقيدات صفحات الويب، يجب تحميل العديد من طلبات ال HTTP لضمان تحميل كافة العناصر المطلوبة. عندما تقوم باستخدام Expires headers، فإن هذه العناصر من الممكن استجلابها و بالتالي تجنب طلبات ال HTTP غير الضرورية لمشاهدات الصفحة المتكررة. بينما ترتبط ال Expires headers بالصور إلا أنه من الممكن توظيفها مع النصوص و الفلاش.
بعض هذه الحلول بسيطة و البعض الآخر يتطلب وقت مطول لتنفيذه و لكن لتوظيف أحدها لابد أن يساهم في تسريع وقت تحميل صفحات موقعك لتجنب خسارة الزوار.