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

طبقـا لمـوقع 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 الذاكرة المؤقتة  ).

المصدر

المصدر