كيفيـة تحسين أداء موقعك على الويب ؟ - مقال كلاود
 إدعم  المنصة   
makalcloud
تسجيل الدخول

كيفيـة تحسين أداء موقعك على الويب ؟

للحـصــول علي تجـربـة مستـخـدم جيـدة يجـب تحسيـن أداء الـموقـع وسـرعتـه سنذكـر بعض النصائـح لتحسيـن أداء وسرعـة المـوقع.

  نشر في 14 فبراير 2016  وآخر تعديل بتاريخ 25 نونبر 2016 .

أداء المـوقـع و سـرعـة تحميـله تعطـي دائمـا أنطبـاع جيـد للمسـتخـدم و دائمـا "الأنطبـاع الأول هـو الأنطبـاع الأخيـر".


طبقـا لمـوقع Aberdeen Group 

كـل 1 ثانيـة تأخيـر في تحمـيـل المـوقـع تؤدي الـي:

- هبـوط نسبـة مشـاهدة المـوقـع بنسـبة 11 %. 

- إنخفـاض بنسـبة 16 % من رضـا العمـلاء.

- فقـدان 7 % من التحـويـلات.


اذا عليـك التفكيـر مجـددا فـي سـرعـة مـوقعـك و كيفيـة تأثيرها بـالسلـب أو الأيجـاب عليك.


أشيـاء عليـك فعـلهـا لأداء أفضـل لمـوقعـك ؟


قبـل البـدء بـذكـر ما عليـك فعـله يجـب فـي البـداية التنـويه علي كيفيـة عمـل وتحميل الملفـات الي المـوقع وعرضهـا علي شاشة الويب.

فـي البـدايـة اذا عـرفـت كيفيـة عمـل المتصفـح وأستقبـاله للملفـات ستعـرف ما عليك فعـله لتقلـل الوقت اللازم لتحميـل المـوقع و في الصـورة توضيـح لما يحـدث للملفـات و كيفيـة أستقبالهـا حتي يتـم عرض الموقـع علي صـورتة الأصليـة.

هنا ستجد كيف يقوم المتصفح بإظهار صفحة الويب للمستخدم وكيف يقوم بترجمة الملفات ورسمها علي الشاشه للمستخدم.


أسبـاب تـأخـر تحميـل المـوقع ؟

1- مسـاحـة الملـفـات : من الأسبـاب الرئيسـة لوقـت أكثـر في تحميـل المـوقـع هي مسـاحـة الملفـات فكما تلاحظ في الصـورة في الأعلي ان ملف الHTML عندما يبـدأ بأرسال استجـابة يتـم عنـدهـا بدأ تحميـل ملفات الـCSS و الـJS فكلمـا كـان مسـاحة الملفـات صغيـرة تـم تحميـل المـوقع بصورة أسـرع.

ولحـل هـذة المشـكـلة يجب عليـك تصغيـر حجـم الملفـات (Minify) يـوجد مـواقـع لعمـل تصغير للملفـات مثل Cleancss , minifier يـوجد الكثيـر من المـواقع يمكنك البحـث عنهـا واذا كنت من مستخدمي gulp/grunt يمكنك استخدام اداة gulp-uglify و grunt-uglify لتصغير ملفات الـjs   ويمكنك استخدام gulp-cssmin و grunt-cssmin لتصغير ملفات الـcss  يوجد ادوات اخري مشابهه تقوم بنفس الوظيفة يمكنك ايضا البحث عنها واستخدامها.


2- ضغط الملفات: ضغط الملفـات يشبـه وضـع موقعـك في حزمة ملفـات مضغوطة (zip file)

ضغط الملفات يمكنـك من الحفـاظ علي 50 - 70 % من ملفات الـHTML , CSS , JS من التحميـل لدي المستـخدم ممـا تـزيـد من ســرعـة تحميـل المـوقـع.

ولحـل هذة المشكـلة يمكنك تفعيل (Gzip compression) .


3- التخـزيـن المـؤقـت للمتصفـح (browser Caching): فـي كـل مـرة يزور الـزائر موقعـك يتـم تحميـل الملفـات من جديـد مما  يؤدي الي زيادة فـي وقـت تحميـل المـوقع.

و لحـل مشكـل  التحميـل يجـب عليـك تخـزين الملفـات في المتصفـح حتي لايتـم تحميل الملفـات من جديد عـند كل مرة يزور المستخدم الموقـع يمكنـك معرفـة المـزيـد عـن التخزين المؤقت وحل المشكلـة من هنــا و هنا ايضا.


هـذة هي الأسبـاب الـرئيسيـة التـي يمكنهـا تقليـل سـرعة موقعـك و تحميلـه، ولكـن يـوجد أيضـا أسبـاب أخري مثـل: 

- الصـور:


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

مثـال : حجـم الصـورة الأصـلي = 90kb  و عرضهـا = 500px و الطـول: 250px ، وأنت أستخـدمـتها في موقعـك علي أبعـاد عرض = 150px  ، وطـول = 70px من المفترض أن يقـل حجـم الصـورة لعـدم أستخـدامها بابعادها الأصليـة و لكـن هذا لايـحـدث سيتـم تحميـل الصـورة بحجمهـا الأصـلي.

ولحـل هذه المشكـلة عليك أن تقـوم :

- بقـص الصورة قبل أستخدامها في المـوقع ووضعهـا بحجمهـا المطلوب كمـا توضح الصورة حجـم الصورة قبـل قصها و بعد التعديل عليها.

 - يمكـنـك ايضـا أستـخدام مـواقع لتصغير حجم الصـورة مثل tinypng أو أي موقـع يقـوم بتصغير حجـم الصـورة واذا كنت من مستخدمي gulp/grunt يمكنك استخدام اداه gulp-imagemin و grunt-imagemin واذا كنت تعمل علي برنامج الـPhotoshop يمكنك حفظ الصورة للويب "save for web".


- ملف النمط (CSS file): تجنب استدعاء ملفات اخري داخل ملف النمط لان هذا يعمل علي زياده وقت تحميل الملف ، يمكنك قراءة اكثر عن الموضوع وكيفية تفادي هذه المشكلة من هنا.


- ملف الجافاسكريبت(JS file) : ملف الجافاسكريبـت يمكنـة تقـديم أو تعطيل محتوي الصفحـة مما سيؤثر علي سرعـة وأداء الموقـع وكما قلنـا سابقـا أن المـوقع لن يتم تحميله قبـل أستكمـال تحميل ملفي الـJS,CSS ويمكنك أستـخدام defer , async في المكـان الخاص بالاسكريبـت اذا كان محتـوي الأسكريبـت لن يؤثر علي المـوقـع بشرط أن يكون الأسكريبـت في ملف خارجـي.

<script src = "/path/filename.js" async></script>

<script src = "/path/filename.js" defer></script>

async: تعني أن الأسكريبـت سيتـم تنفيذة في أقرب وقت متاح.

defer: تعني أن الأسكريبـت سيتم تحميـله بعـد أنتهاء الموقـع من التحميل.

 

- الأضافات الجاهزة(plugins): كثـرة أستـخدام الأضافات الجاهزة يـزيـد من الوقـت لتحميـل المـوقـع ، يجـب عليـك التقليـل من أستخـدام الأضافات الجـاهزة أولا بسـبب سـرعـة المـوقع و ثانيـا بسبب المشاكل الأمنيـة التي تسببهـا.


- مستضيف الملفات(Web Host)  من الأسباب المهمه ايضا هو مستضيف الملفات الذي تعمل عليه كلما كان مستضيف الملفات افضل كلما كان موقعك أفضل فدائما ضع في الأعتبار سرعة موقعك عندما تختار مستضيف الملفات الذي ستعمل عليه ويمكنك استشارة احد المختصين بترشيح مستضيف ملفات لك. 


وفـي النهايـة  

تذكـر دائمـا أن ثانيـة واحـدة قـادرة علي خلق فارق كبيـر بيـن العمـلاء فلا تدع فـرصـة بين يـديـك تذهب هباء بسـبب أشيـاء بسيطـة.

ولا تنـسي دائمـا هذة الثـلاثيـة (Minify تصغـيـر - compression ضغـط- caching الذاكرة المؤقتة  ).


المصدر

المصدر





  • 4

   نشر في 14 فبراير 2016  وآخر تعديل بتاريخ 25 نونبر 2016 .

التعليقات

فدوى منذ 6 شهر
شكرا عزيزي مهند على المعلومات محتاجه هذه الثقافه في عملي جدا نرجو المزيد والى الامام في الكتابة وفقك الله
0
مهند عبدالرازق
شكرا ، وبالتوفيق دائما ان شاء الله

لطرح إستفساراتكم و إقتراحاتكم و متابعة الجديد ... !

مقالات شيقة ننصح بقراءتها !


مقالات مرتبطة بنفس القسم











عدم إظهارها مجدداً

منصة مقال كلاود هي المكان الأفضل لكتابة مقالات في مختلف المجالات بطريقة جديدة كليا و بالمجان.

 الإحصائيات

تخول منصة مقال كلاود للكاتب الحصول على جميع الإحصائيات المتعلقة بمقاله بالإضافة إلى مصادر الزيارات .

 الكتاب

تخول لك المنصة تنقيح أفكارك و تطويرأسلوبك من خلال مناقشة كتاباتك مع أفضل الكُتاب و تقييم مقالك.

 بيئة العمل

يمكنك كتابة مقالك من مختلف الأجهزة سواء المحمولة أو المكتبية من خلال محرر المنصة

   

مسجل

إذا كنت مسجل يمكنك الدخول من هنا

غير مسجل

يمكنك البدء بكتابة مقالك الأول

لتبق مطلعا على الجديد تابعنا