تسريع موقعك : أخطر وأجدد الطرق المتطوره لتسريع موقعك

أسعد الله مساءكم بكل خير أخوانى زوار وأعضاء موقعنا الكرام, وكما عودناكم بأن نقدم على موقعنا
المواضيع التى لم تشرح فى اى مكان من قبل , فأنا أقدم لكم هذه الطريقه المتواضعه والرائعه
والتى ستجد بعدها الفرق الواضح فى تسريع وتحميل ملفات الموقعك,


اولا: قبل أن أبدأ وحتى أثبت لكم مدى فعالية الدرس, راح أعطى لكم مثال لملفات موقع , قبل وبعد تطبيق
الدرس, وشوفو ولاحظوا بأنفسكم سرعة تحميل الموقع قبل وبعد تطبيق الدرس


المثال العملى :

قبل تطبيق الدرس عليه:





بعد تطبيق الدرس عليه:





فكرة الدرس:فى هذا الدرس سوف نعتمد بشكل كبير على كيفية ضغط ملفات الموقع ليتم تحميلها بسرعة,
طبعا ممكن كثير شافوا طرق لضغط الصور, لكن فى هذا الدرس سوف نتعلم سويا كيفية ضغط ملفات css,
وضغط ملفات js




ملاحظه: لابد ان تتابع قراءة الدرس للنهاية, فيوجد نقط مهمه راح تفيدك أثناء الشرح .....


اولا: شرح كيفية ضغط الصور عن طريقة خدمة yahoo عن طريق موقع smush.it

موقع smush.it هو أحد الخدمات التى تقدمها الشركه العملاقة ياهو, وهو خاص بضغط الصور
والميزه فى هذا الموقع , هو انه يقوم بضغط الصور بتقنية تختلف عن تقنية الضغط التى تقوم بها برامج تحرير الصور كالفوتوشوب وووالخ...

دعنا نشرحه........

1- اذهب للموقع عن طريق الرابط الاتى اضغـــط هـــنا


2- اختار عبارة uploader ثم select files لاختيار الصور المراد ضغطها....




3-نقوم بأختيار الصور المراد ضغطها, ولاحظ جيدا انه لابد ان تختار الصور الغير متحركة ذات الامتداد jpg,png فقط





4-بعد الاختيار, انتظر لحظات لحين يتم رفع الصور وضغطها.......



5-فى النهاية راح يعطيك رابط لتحميل ملف الصور التى تم ضغطها......




بعد هيك فك الملف المضغوط, ثم استبدل هذه الصور بالصور الاصلية فى موقعك ,

ملاحظه: يفضل بالأحتفاظ بالصور الاصلية الغير مضغوطه, بحيث لو أحببت ان ترجع لها يمكنك الرجوع لها...


ولاحظ: العبارة المكتوبة فى الصوره السابقه , فالموقع يخبرك انه قام بضغط حوالى 60% من حجم الصور الكلى, تخيل الفرق الذى ستلاحظه فى موقعك من سرعة تحميل بعد ضغط الصور بهذه الطريقه الرائعه
والغير مؤثره على جودة الصور اطلاقا.................ويمكنك الرجوع للمثال اللى وضعته فى اول الدرس
لترى اذا كان فيه فرق بين الصور المضغوط ولا لا..........




ثانيا: شرح كيفية ضغط ملفات الcss عن طريق موقع cssdrive

موقع cssdrive هو واحد من أشهر المواقع المختصه ب css,والذى يقدم خدمات رائعه ومنها خدمة
ضغط ملفات css, وأعتقد يمكن اول مره ان تسمع عن ضغط ملفات css, فصدق فهى حقيقه وراح تشوفوا بنفسكم

1-اذهب للموقع عن طريق الرابط الاتى اضغط هــــنـــا

2-الحين روح لملفات موقعك, وشوف ملفات الcss الموجوده به, وليكن على سبيل المثال فى المثال اللى
وضعته راح أطبق الشرح على ملف css الخاص بهذا الموقع واللى اسمه style.css



3-افتح هذا الملف بأحد المحررات وليكن الدريم ويفر......
4-قم بنسخ كود هذا الملف بالكامل.....




5-الحين اذهب لموقع cssdrive ,ثم اختار الاختيار supercompact , ثم قم بلصق الكود فى المربع السفلى




ثم اضغط على زر compress it, الموجود أسفل المربع.....وسيقوم الموقع بضغط الملف


6-بعد الانتهاء راح يعطيك الكود مضغوط, وبالاسفل سوف تجد نسبة الضغط الذى قام بها الموقع فى ضغط الملف




الموقع يخبرك انه وفر حوالى 24% من الحجم الكلى السابق, يعنى نحن فى طريق السرعة الخارقه
لموقعك ههههه


7-الحين ركز معى جيدا فى هذه الخطوه, لابد الان الملف الاصلى ان تقوم بأخذ نسخه منه والاحتفاظ بها
ولابد ان تقوم بذلك, يعنى مثلا الملف الاصلى اسمه style.css راح نغير اسمه مثلا ونسميه styleoriginal.css , ثم نقوم بعمل ملف جديد ونسميه style.css ونلصق به الكود المضغوط




طبعا الغرض من الاحتفاظ بالملف الاصلى, هو لان الملف المضغوط سوف يكون من الصعب عليك التعديل عليه لان اوامر الcss كلها ورا بعضها, على عكس ملف css الاصلى , فهو منظم وكل أمر فى سطر لوحده




ثالثا: شرح كيفية ضغط ملفات الjavascript عن طريق موقع jscompress

موقع jscompress هو أحد المواقع المشهور والتى تقدم خدمة ضغط ملفات javascript ذات الامتداد js

وهو بالظبط نفس فكرة موقع cssdrive

1-اذهب للموقع عن طريق الرابط الاتى اضغــط هــنــا

2-نحدد ملفات js الموجوده داخل موقعك





3-نفتح الملف بأحد المحررات وليكن الدريم ويفر, ثم ننسخ الملف ونقوم بلصق كوده فى الموقع




نضغط على compress it ليقوم بضغط الملف


4-ثم نقوم بأخذ الكود المضغوط ونضعه بدل الكود الاصلى , مع الاحتفاظ بالملف الاصلى كما ذكرنا سابقا
بالظبط مثل ملف css.........




بهيك أصبح موقعك للاقلاع بسرعة الصاورخ .........


انتهى الدرس

أرجو ان تكون استفدتوا معنا.......


أخوكم vista-design

:w3ee3:

][][§¤°^°¤§][ مشكور][§¤°^°¤§][][
O?°· ( على المرور اخي\تي) ·°?O
~¤ô_ô¤~ مع تحياتي~¤ô_ô¤~
¨¨¨°~*§¦§ لك §¦§*~°¨¨¨

:w3ee3:

الْسَّلام عَلَيْكُم وَرَحْمَة الْلَّه وَبَرَكَاتُه


الْلَّه يُعْطِيَكـ الْعَافِيَة عَلَى الْمَوْضُوْع...وَعَسَاكـ عَلَى الْقُوَّة


نَنْتَظِر الْجَدِيْد الْمُمَيِّز مِنْكـ دَآَئِمـأ....لَا تَطُوْلـ عَلَيْنـأ


مودتي ..~