walid
11-01-2013, بتوقيت غرينيتش 07:49 AM
http://www.cmsarabia.com/media/k2/items/cache/780149ddfa09fbd86eb140fe6810d770_L.jpg
السرعة هى شئ اساسي فى موقعك. عندما يكون موقعك سريع سيكون ذلك دافع للزائر للمكوث وقت اطول و النقر على روابط اخرى فلا احد يريد الأنتظار وقت طويل حتى يفتح الموقع
الأمر الخر هو ارتباط سرعة الموقع ارتباكا شؤطيا بالـ SEO و محركات البحث و خصوصا جوجل GOOGLE فهى تتخذ من سرعة تحميل الصفحات اولوية رئيسية فى ترتيب نتائج البحث
فالصفحات او المواقع السرع تحصل بالتبعية على ترتيب اعلى. والسبب هو ان جوجل GOOGLE تريد ان تخدم مستخدميها مع أعطائم المحتوى الأكثر ملاءمة قدر المستطاع، وفي أقصر وقت ممكن. إعطاء الناس الروابط لمواقع بطيئة ليست فكرة جيدة، لذلك كلما كان موقعك يفتح أسرع كلما كانت فرصته افضل أن يظهر في أعلى صفحات نتائج محرك البحث Search Engine.
هناك عدة أشياء يمكنك القيام بها لتحسين سرعة موقعك. الطريقة الولى هى عدم الأفراط فى استخدم الإضافات و الإقتصار على ما تحتاجه منها فقط. وستعرف طرق أكثر لتحسين سرعة التحميل من قرائتك المقالة حتى نهايتها.
تحسين الصور
في رأيي، الصور تشكل جزءا هاما من أي موقع. ويمكن لصورة جيدة ان تزيد من تحسين محتوى الموقع. أعتقد أنك يجب أن تستخدم الصور في كل موضوع تقوم بإنشائه. ربما ليس الإفراط ذلك، ولكن محاولة استخدام الرسوم التوضيحية حيث يمكن تحسين المحتوى. على سبيل المثال، استخدام الرسوم البيانية، والجداول والصور كثيرا على موقعك يجعل من الأسهل أحيانا لفهم جزئية معينة تعجز الكلمات احيانا عن وصفها.
من جهة أخرى، يمكن ان يؤدى استخدام الصور بشكل مكثف الى تبطئ عملية التحميل من الموقع الخاص بك. إذا كان لديك القارئ هي في معظمها في البلدان التي ترتفع فيها عرض النطاق الترددي الاتصال بشبكة الإنترنت، فهو عادة لا مشكلة. ومع ذلك، إذا تم الوصول موقعك عن طريق الناس الذين يعيشون في المناطق ذات التردد المنخفض، قد تحتاج إلى التفكير بشكل مختلف.
أستخدام CSS sprites
تحديد أسلوب استخدام CSS sprites هو فكرة عظيمة. يمكن ان يوفر موقع الويب الخاص بك من الكثير من طلبات HTTP، والذي بدوره سيوفر وقت التحميل.
CSS sprites عبارة عن صور تظهر على موقع الويب الخاص بك، التي هي في الواقع صورة واحدة كبيرة. فإن المتصفح يقوم بتحميل صورة كبيرة مرة واحدة، ثم استخدم CSS لإظهار أجزاء من الصورة فقط في أجزاء مختلفة من الموقع.
بعض المواقع تأخذ هذه التقنية إلى أقصى الحدود، وذلك باستخدام صورة واحدة لصور القالب template بأكمله. أحد الأمثلة على ذلك هو سريع للغاية في التحميل نحن نستخدم هذه التقنية فى قوالبنا.
sprites ليست صغيرة مثل الصور في لعبة فيديو 80. sprites هو في الواقع صورة واحدة كبيرة. هل ترى صور (On & Off) او (التالى & السابق) هذه الصور عبارة عن صورة واحدة في نفس الصورة؟ ويتم ذلك عن طريق اخيار جزء معين من الصورة هو الذى يظهر من الصورة الكبيرة. إن هذا يوفر الوقت، كما يتم تحميل الصورة مرة واحدة فقط.
CSS sprites هو تطبيق أكثر تقدما من تلك التقنية. الفرق هو أنه بدلا من اثنين فقط أو ثلاث صور يتم دمجها في واحد، يمكنك الجمع بين عدد غير محدود من الصور إلى واحدة. أصل "sprites" مصطلح يأتي من العمر رسومات الحاسوب المدرس مفصلية وصناعة ألعاب الفيديو. كانت الفكرة أن الكمبيوتر قد جلب إلى الذاكرة رسم، وبعد ذلك فقط عرض أجزاء من تلك الصورة في وقت واحد، والذي كان أسرع من الاضطرار إلى جلب باستمرار صورا جديدة. كان شبح الرسم كبيرة مجتمعة. CSS sprites هو الى حد كبير نفس نظرية بالضبط: الحصول على صورة واحدة، تحول حولها وعرض أجزاء منها فقط. الذي يحفظ مقدار الحمل من الحاجة إلى إحضار صور متعددة.
في هذا المثال، وضعنا قائمة وحدات ربط لقائمة غير مرتبة لديهم صورة الخلفية:
رمز Code:
#nav li a {background-image:url('../img/image_nav.gif')}
ثم، وضعنا جزء من صورة خلفية لاستخدام عن طريق تحويل موقف الخلفية لكل عنصر فى القائمة. في جملة joomla، يمكنك بسهولة استخدام هذه الفئات عنصر القائمة عند إضافتها في وحدة mod_mainmenu بشكل افتراضي.
رمز Code:
#nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px;}
بهذه الطريقة، يمكنك إضافة رموز لعناصر القائمة الخاصة بك أو ما شابه ذلك. أو يمكنك استخدام هذه التقنية لوضع الرموز أو الصور الخلفية لوحدات. يمكنك أيضا استخدام sprites للعناصر المشتركة على الموقع الخاص بك السوشيال ميديا مثل الأزرار وغيرها. فقط الخيال يحد ما يمكنك القيام به على سعيكم لطلبات HTTP أقل.
كما ذكر، وبعض القوالب استخدام هذه التقنية. على سبيل المثال، عن طريق التركيز على قالب template جملة joomla يستخدم العديدين sprites على نطاق واسع للحد من وقت التحميل.
No browser resizing!
بين الأخطاء الأكثر شيوعا أن جملة joomla تقع ضحية للمستخدمين عن طريق تنظيم الصور في محرر النصوص. في الأساس، الشخص بإدراج صورة (كبيرة) في محرر نص جملة joomla، ومن ثم يقوم بتغيير حجمها هناك. فكرة سيئة!
والسبب في أن هذه فكرة سيئة هو أنه، اعتمادا على محرر، وسيتم تغيير حجم الصورة باستخدام الطول / العرض HTML أو CSS أكواد. بغض النظر عن الطريقة، سيتم تحميل الصورة بالحجم الكامل من قبل المتصفح، ومن ثم حجمها قبل أن يظهر للقارئ. تخيل صورة ما يمثل 10 أضعاف مساحة كما هو مبين في المستعرض. وهذا يعني 10 أضعاف البيانات التي يتم نقلها إلى القارئ قبل ظهور الصورة. وتخيل أن يكون لديك 10 صور على الصفحة الخاصة بك. هذا يعني البيانات 100 مرة أكثر مما تحتاج ..!
بالإضافة إلى ذلك، يمكن عند تغيير حجم الصور في المتصفح تظهر غير واضحة و ذات جودة منخفضة. المتصفح هو في كثير من الأحيان غير قادر على تقديم الصور بوضوح عندما يتم تغيير حجمها. Internet Explorer في مثلا يقوم بعمل رهيب حتى يقوم بتقديم الصور مع المعلمات الطول والعرض.
الحل بسيط: تغيير حجم الصور إلى الحجم الصحيح قبل التحميل. أو، إذا كنت تستخدم مدير JCE صورة، يمكنك تغيير حجم الصور أثناء التحميل أو استخدام وظائف تحرير الصور (يمكنك أيضا اقتصاص وإضافة تأثيرات باستخدام تلك الأداة).
وهذه النقطة هي - الصور يجب أن يكون بالضبط حجم بكسل التي سيتم عرضها على الصفحة الأخيرة على موقعك. وهذا يوفر وقت التحميل وتحسين جودة الصور.
إذا كنت تستخدم CCK أو K2 فى تنظيم المحتوى الخاص بك فلا مشكلة لديك، فقط اختار الصورة التي تريدها كصورة للموضوع. وبعد ذلك، سيقوم التطبيق بعمل عدة مقاسات للصورة لأستخدامها فى اكثر من مكان بدون تدخل منك.
أنه في بعض الأحيان للمستخدمين ببساطة لا يفهمون ما هو المقصود من ذلك، و يقومومن بتغيير حجم الصور كما يحلو لهم. لتجنب تأثير ذلك على الصور في Internet Explorer، يمكنك إضافة قطعة صغيرة من التعليمات البرمجية إلى ملف CSS الخاص بك:
رمز Code:
img { -ms-interpolation-mode: bicubic; }
انقر هنا لمشاهدة مثال عن كيفية هذا يمكن تحسين جودة الصورة في Internet Explorer.
اكتشاف صورا بدون الطول والعرض
وإليك نصيحة لاكتشاف الصور unsized خلال العمل. إضافة هذه القاعدة الى ملف CSS الخاص بك:
رمز Code:
img:not([width]):not() { border: 2px solid red !important; }
وهذا يسليط الضوء على أي صور بدون سمات العرض والارتفاع مع الحدود الحمراء حتى يكون من السهل اكتشافها و التعديل عليها.
الكاش و اهميته
قبل إطلاق موقع الويب الخاص بك، يجب عليك تفعيل ذاكرة التخزين المؤقت فى جملة joomla. سيؤدي هذا إلى زيادة سرعة تحميل صفحات بشكل كبير. قمت بإعداد نوع ذاكرة التخزين المؤقت في الإعدادات. ثم، يجب عليك التحقق إذا تم تنشيط المكونات في ذاكرة التخزين المؤقت قبل الانتقال إلى الإضافات البرمجية في لوحة التحكم. لقد رأيت أن المكونات في بعض الأحيان يتم تعطيلها، حتى لو تم تمكين ذاكرة التخزين المؤقت في شاشة الإعدادات.
تأكد من أن المكونات في الترتيب الصحيح، كما يمكن استخدام اى من الإضافات البرمجية التلا تقوم بإنشاء اختصار فى لوحة التحكم لمسح ملفات الكاش بشكل سريع
اختبار للسرعة
عندما كنت تقوم بإعداد الموقع الخاص بك، يجب عليك إجراء اختبار للسرعة. خاصة بعد تركيب install الإضافات التى ستستخدمها فى الموقع سواء كانت كمبوننت او موديول او إضافات برمجية. يمكننك استخدام اداة قياس السرعة لمتصفح فايرفوكس وجوجل GOOGLE كروم. سوف أعطيك قائمة من التحسينات التي يمكن أن تجعل على الصفحة الخاصة بك. سوف تحصل أيضا على درجة (X/100) وهذا مؤشر لمدى نجاح الصفحة.
عند النظر إلى النتائج، يجب عليك اتباع الإرشادات المتوفرة وإعادة اختبار موقع الويب الخاص بك. وبهذه الطريقة، سوف تقلل من وقت التحميل لموقعك، كما هو موضح من قبل نقاط زيادة سرعة الصفحة.
مصدر المقاله (http://www.cmsarabia.com/ar/%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A9/item/87-%D9%83%D9%8A%D9%81-%D8%AA%D8%AD%D8%B5%D9%84-%D8%B9%D9%84%D9%89-%D8%A7%D9%84%D8%B3%D8%B1%D8%B9%D8%A9-%D8%A7%D9%84%D9%82%D8%B5%D9%88%D9%89-%D9%84%D9%85%D9%88%D9%82%D8%B9%D9%83-%D9%85%D8%B9-%D8%AC%D9%88%D9%85%D9%84%D8%A7.html)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
[h=3]©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السرعة هى شئ اساسي فى موقعك. عندما يكون موقعك سريع سيكون ذلك دافع للزائر للمكوث وقت اطول و النقر على روابط اخرى فلا احد يريد الأنتظار وقت طويل حتى يفتح الموقع
الأمر الخر هو ارتباط سرعة الموقع ارتباكا شؤطيا بالـ SEO و محركات البحث و خصوصا جوجل GOOGLE فهى تتخذ من سرعة تحميل الصفحات اولوية رئيسية فى ترتيب نتائج البحث
فالصفحات او المواقع السرع تحصل بالتبعية على ترتيب اعلى. والسبب هو ان جوجل GOOGLE تريد ان تخدم مستخدميها مع أعطائم المحتوى الأكثر ملاءمة قدر المستطاع، وفي أقصر وقت ممكن. إعطاء الناس الروابط لمواقع بطيئة ليست فكرة جيدة، لذلك كلما كان موقعك يفتح أسرع كلما كانت فرصته افضل أن يظهر في أعلى صفحات نتائج محرك البحث Search Engine.
هناك عدة أشياء يمكنك القيام بها لتحسين سرعة موقعك. الطريقة الولى هى عدم الأفراط فى استخدم الإضافات و الإقتصار على ما تحتاجه منها فقط. وستعرف طرق أكثر لتحسين سرعة التحميل من قرائتك المقالة حتى نهايتها.
تحسين الصور
في رأيي، الصور تشكل جزءا هاما من أي موقع. ويمكن لصورة جيدة ان تزيد من تحسين محتوى الموقع. أعتقد أنك يجب أن تستخدم الصور في كل موضوع تقوم بإنشائه. ربما ليس الإفراط ذلك، ولكن محاولة استخدام الرسوم التوضيحية حيث يمكن تحسين المحتوى. على سبيل المثال، استخدام الرسوم البيانية، والجداول والصور كثيرا على موقعك يجعل من الأسهل أحيانا لفهم جزئية معينة تعجز الكلمات احيانا عن وصفها.
من جهة أخرى، يمكن ان يؤدى استخدام الصور بشكل مكثف الى تبطئ عملية التحميل من الموقع الخاص بك. إذا كان لديك القارئ هي في معظمها في البلدان التي ترتفع فيها عرض النطاق الترددي الاتصال بشبكة الإنترنت، فهو عادة لا مشكلة. ومع ذلك، إذا تم الوصول موقعك عن طريق الناس الذين يعيشون في المناطق ذات التردد المنخفض، قد تحتاج إلى التفكير بشكل مختلف.
أستخدام CSS sprites
تحديد أسلوب استخدام CSS sprites هو فكرة عظيمة. يمكن ان يوفر موقع الويب الخاص بك من الكثير من طلبات HTTP، والذي بدوره سيوفر وقت التحميل.
CSS sprites عبارة عن صور تظهر على موقع الويب الخاص بك، التي هي في الواقع صورة واحدة كبيرة. فإن المتصفح يقوم بتحميل صورة كبيرة مرة واحدة، ثم استخدم CSS لإظهار أجزاء من الصورة فقط في أجزاء مختلفة من الموقع.
بعض المواقع تأخذ هذه التقنية إلى أقصى الحدود، وذلك باستخدام صورة واحدة لصور القالب template بأكمله. أحد الأمثلة على ذلك هو سريع للغاية في التحميل نحن نستخدم هذه التقنية فى قوالبنا.
sprites ليست صغيرة مثل الصور في لعبة فيديو 80. sprites هو في الواقع صورة واحدة كبيرة. هل ترى صور (On & Off) او (التالى & السابق) هذه الصور عبارة عن صورة واحدة في نفس الصورة؟ ويتم ذلك عن طريق اخيار جزء معين من الصورة هو الذى يظهر من الصورة الكبيرة. إن هذا يوفر الوقت، كما يتم تحميل الصورة مرة واحدة فقط.
CSS sprites هو تطبيق أكثر تقدما من تلك التقنية. الفرق هو أنه بدلا من اثنين فقط أو ثلاث صور يتم دمجها في واحد، يمكنك الجمع بين عدد غير محدود من الصور إلى واحدة. أصل "sprites" مصطلح يأتي من العمر رسومات الحاسوب المدرس مفصلية وصناعة ألعاب الفيديو. كانت الفكرة أن الكمبيوتر قد جلب إلى الذاكرة رسم، وبعد ذلك فقط عرض أجزاء من تلك الصورة في وقت واحد، والذي كان أسرع من الاضطرار إلى جلب باستمرار صورا جديدة. كان شبح الرسم كبيرة مجتمعة. CSS sprites هو الى حد كبير نفس نظرية بالضبط: الحصول على صورة واحدة، تحول حولها وعرض أجزاء منها فقط. الذي يحفظ مقدار الحمل من الحاجة إلى إحضار صور متعددة.
في هذا المثال، وضعنا قائمة وحدات ربط لقائمة غير مرتبة لديهم صورة الخلفية:
رمز Code:
#nav li a {background-image:url('../img/image_nav.gif')}
ثم، وضعنا جزء من صورة خلفية لاستخدام عن طريق تحويل موقف الخلفية لكل عنصر فى القائمة. في جملة joomla، يمكنك بسهولة استخدام هذه الفئات عنصر القائمة عند إضافتها في وحدة mod_mainmenu بشكل افتراضي.
رمز Code:
#nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px;}
بهذه الطريقة، يمكنك إضافة رموز لعناصر القائمة الخاصة بك أو ما شابه ذلك. أو يمكنك استخدام هذه التقنية لوضع الرموز أو الصور الخلفية لوحدات. يمكنك أيضا استخدام sprites للعناصر المشتركة على الموقع الخاص بك السوشيال ميديا مثل الأزرار وغيرها. فقط الخيال يحد ما يمكنك القيام به على سعيكم لطلبات HTTP أقل.
كما ذكر، وبعض القوالب استخدام هذه التقنية. على سبيل المثال، عن طريق التركيز على قالب template جملة joomla يستخدم العديدين sprites على نطاق واسع للحد من وقت التحميل.
No browser resizing!
بين الأخطاء الأكثر شيوعا أن جملة joomla تقع ضحية للمستخدمين عن طريق تنظيم الصور في محرر النصوص. في الأساس، الشخص بإدراج صورة (كبيرة) في محرر نص جملة joomla، ومن ثم يقوم بتغيير حجمها هناك. فكرة سيئة!
والسبب في أن هذه فكرة سيئة هو أنه، اعتمادا على محرر، وسيتم تغيير حجم الصورة باستخدام الطول / العرض HTML أو CSS أكواد. بغض النظر عن الطريقة، سيتم تحميل الصورة بالحجم الكامل من قبل المتصفح، ومن ثم حجمها قبل أن يظهر للقارئ. تخيل صورة ما يمثل 10 أضعاف مساحة كما هو مبين في المستعرض. وهذا يعني 10 أضعاف البيانات التي يتم نقلها إلى القارئ قبل ظهور الصورة. وتخيل أن يكون لديك 10 صور على الصفحة الخاصة بك. هذا يعني البيانات 100 مرة أكثر مما تحتاج ..!
بالإضافة إلى ذلك، يمكن عند تغيير حجم الصور في المتصفح تظهر غير واضحة و ذات جودة منخفضة. المتصفح هو في كثير من الأحيان غير قادر على تقديم الصور بوضوح عندما يتم تغيير حجمها. Internet Explorer في مثلا يقوم بعمل رهيب حتى يقوم بتقديم الصور مع المعلمات الطول والعرض.
الحل بسيط: تغيير حجم الصور إلى الحجم الصحيح قبل التحميل. أو، إذا كنت تستخدم مدير JCE صورة، يمكنك تغيير حجم الصور أثناء التحميل أو استخدام وظائف تحرير الصور (يمكنك أيضا اقتصاص وإضافة تأثيرات باستخدام تلك الأداة).
وهذه النقطة هي - الصور يجب أن يكون بالضبط حجم بكسل التي سيتم عرضها على الصفحة الأخيرة على موقعك. وهذا يوفر وقت التحميل وتحسين جودة الصور.
إذا كنت تستخدم CCK أو K2 فى تنظيم المحتوى الخاص بك فلا مشكلة لديك، فقط اختار الصورة التي تريدها كصورة للموضوع. وبعد ذلك، سيقوم التطبيق بعمل عدة مقاسات للصورة لأستخدامها فى اكثر من مكان بدون تدخل منك.
أنه في بعض الأحيان للمستخدمين ببساطة لا يفهمون ما هو المقصود من ذلك، و يقومومن بتغيير حجم الصور كما يحلو لهم. لتجنب تأثير ذلك على الصور في Internet Explorer، يمكنك إضافة قطعة صغيرة من التعليمات البرمجية إلى ملف CSS الخاص بك:
رمز Code:
img { -ms-interpolation-mode: bicubic; }
انقر هنا لمشاهدة مثال عن كيفية هذا يمكن تحسين جودة الصورة في Internet Explorer.
اكتشاف صورا بدون الطول والعرض
وإليك نصيحة لاكتشاف الصور unsized خلال العمل. إضافة هذه القاعدة الى ملف CSS الخاص بك:
رمز Code:
img:not([width]):not() { border: 2px solid red !important; }
وهذا يسليط الضوء على أي صور بدون سمات العرض والارتفاع مع الحدود الحمراء حتى يكون من السهل اكتشافها و التعديل عليها.
الكاش و اهميته
قبل إطلاق موقع الويب الخاص بك، يجب عليك تفعيل ذاكرة التخزين المؤقت فى جملة joomla. سيؤدي هذا إلى زيادة سرعة تحميل صفحات بشكل كبير. قمت بإعداد نوع ذاكرة التخزين المؤقت في الإعدادات. ثم، يجب عليك التحقق إذا تم تنشيط المكونات في ذاكرة التخزين المؤقت قبل الانتقال إلى الإضافات البرمجية في لوحة التحكم. لقد رأيت أن المكونات في بعض الأحيان يتم تعطيلها، حتى لو تم تمكين ذاكرة التخزين المؤقت في شاشة الإعدادات.
تأكد من أن المكونات في الترتيب الصحيح، كما يمكن استخدام اى من الإضافات البرمجية التلا تقوم بإنشاء اختصار فى لوحة التحكم لمسح ملفات الكاش بشكل سريع
اختبار للسرعة
عندما كنت تقوم بإعداد الموقع الخاص بك، يجب عليك إجراء اختبار للسرعة. خاصة بعد تركيب install الإضافات التى ستستخدمها فى الموقع سواء كانت كمبوننت او موديول او إضافات برمجية. يمكننك استخدام اداة قياس السرعة لمتصفح فايرفوكس وجوجل GOOGLE كروم. سوف أعطيك قائمة من التحسينات التي يمكن أن تجعل على الصفحة الخاصة بك. سوف تحصل أيضا على درجة (X/100) وهذا مؤشر لمدى نجاح الصفحة.
عند النظر إلى النتائج، يجب عليك اتباع الإرشادات المتوفرة وإعادة اختبار موقع الويب الخاص بك. وبهذه الطريقة، سوف تقلل من وقت التحميل لموقعك، كما هو موضح من قبل نقاط زيادة سرعة الصفحة.
مصدر المقاله (http://www.cmsarabia.com/ar/%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A9/item/87-%D9%83%D9%8A%D9%81-%D8%AA%D8%AD%D8%B5%D9%84-%D8%B9%D9%84%D9%89-%D8%A7%D9%84%D8%B3%D8%B1%D8%B9%D8%A9-%D8%A7%D9%84%D9%82%D8%B5%D9%88%D9%89-%D9%84%D9%85%D9%88%D9%82%D8%B9%D9%83-%D9%85%D8%B9-%D8%AC%D9%88%D9%85%D9%84%D8%A7.html)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
[h=3]©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
