Category Archives: عام

كيفية الحصول على افضل سرعة تحميل لموقعك

بسم الله والصلاة والسلام على رسول الله ، وبعد :

هذه التدوينة هى أول تدوينة لى بعد قرار العودة الى التدوين :

  • فى الفترة الماضية تعاملت مع بعض العملاء سواء داخل الشركة التى اعمل فيها او من خلال العمل الحر. كان غالب الاعمال التى قمت بها خلال هذه الفترة اعمال متاجر الكترونية وانظمة تسويقية.
  • وقت تحميل الصفحة او الموقع (Load Time) بالنسبة لهذه المواقع مهم جدا ، لا تتصور ما يمكن ان تتسبب به ثانية او ثانيتين زيادة فى وقت تحميل الصفحة من مشاكل للزوار. هذه الشىء البسيط فى الماضى اصبح من اهم العوامل فى الحكم على المواقع العالمية،فمثلا غوغل ادخلت سرعة الموقع من العوامل التى تعتمدها فى ايجاد نتائج البحث، من المواقع التى عرفت اهمية وقت تحميل الصفحة بالنسبة للزوار هى منصة التدوين العربية الجديدة منشر كانوا يتحدثون ليل نهار عن سرعة الموقع ومقدار الجهد المبذول فى الوصول الى هذه النتيجة.
  • ملاحظتك انت كمبرمج او مدير مشروع لوجود مشكلة حقيقة بسبب وقت تحميل الموقع ستكون اسرع اذا كان العميل شركة كبيرة او مؤسسة تعتمد فى ربحها عل اراء العملاء، وصدقنى Load Time ليست من المشاكل التى تحب ان تناقشها مع العملاء فقط عليك ان تحلها، وهنا السؤال: كيف نحل هذه المشكلة؟

وهنا سؤال يطرح نفسه ايضا: متى يجب ان اقلق من مشكلة زيادة وقت تحميل الصفحة او الموقع؟

  • بدون مقدمات 3 ثانية هو الوقت الذى يتوقعه الزوار لتحميل موقع تجارة الكترونية به صور لمنتجات واشياء اخرى. والذى اذا زاد عن هذه المدة ستبدأ المشاكل فى الظهور هذا حسب احصائية اجرتها شركة Redware فى 2015.
  • فى هذه الاحصائية ايضا درست الشركة افضل 100 موقع للتجارة الالكترونية حسب ترتيب Alexa من حيث سرعة هذه المواقع، يمكنك الاطلاع على هذا التقرير من هنا .

اذا كيف تحصل على افضل سرعة تحميل لموقعك ؟

 

اولا عليك ان تعلم امرين:

الامر الاول: ان زوار موقعك لا يستخدمون نفس سرعة الانترنت، بمعنى انه عليك اختبار الموقع على اكثر من سرعة للانترنت.

+ يمكنك استخدام محاكى لسرعات الانترنت (connection simulator)على جهازك

مثل Slawy او  Charles لتسهيل اختبار الموقع على سرعات اتصال مختلفة.

الامر الثانى: الوصول الى افضل سرعة تحميل لموقعك لا تعتمد على client side فقط او على server side فقط بل على كليهما. لذلك اذا كنت مدير مشروع فعليك التاكد ان كلا من ال developers وال designers لديك يعملون بتنسيق مع بعضهم البعض.

اذا عرفت ذلك فهاك بعض الاشياء التى عليك اتباعها للوصول الى افضل سرعة تحميل لموقعك:

سنتحدث اولا عن الامور الخاصة بال client side وبعد ذلك نتحدث عن الامور الخاصة بال server side وسنتدرج فى ذكر هذه الامور من الامور السهلة الى الامور التى تحتاج الى وقت وجهد لتنفيذها:

الامور المتعلقة ب client side :

1 – ضغط الصور:

+ ضغط الصور من اكثر الامور التى تساعد فى الوصول الى افضل سرعة لموقعك

خصوصا اذا كان موقعك من مواقع التجارة الالكترونية والتى تحتوى على الالاف من الصور.

+ يمكنك استخدام اشياء كثيرة لضغط الصور مثل موقع http://trimage.org/  او حتى برنامج الفوتوشوب، وفى حالة اذا كنت تستخدم magento او  wordpress فعليك بإضافة tinypeng والتى تقوم بضغط الصور اتوماتيكيا.

2 – قم بضغط ملفات ال css و ال  javascript:

يمكنك استخدام Gruntjs فى هذه الخطوة.

3 -تأكد ان تضع ملفات ال javascript او اى script files قبل انتهاء body tag :

+ يقوم المتصفح بتحميل محتويات الموقع من اعلى الى اسفل، فاذا وجد كود يقوم باستدعاء ملف script سيقوم بإقاف تحميل الموقع حتى الانتهاء من جلب هذا الملف والذى سيؤثر سلبا على ال Load Time الخاص بموقعك.

4 – تأكد من تحميل الملفات الخارجية asynchronously :

+ قد تضطر فى بعض الاوقات لجلب بعض الملفات الخارجية فى بداية الصفحة كجلب ملف javascript يعتمد جزء من الصفحة على محتوى هذا الملف، اذا اضطررت لذلك فتأكد من جلب هذا الملف بشكل asynchronously، لان جلب ملف خارجى بالطريقة العادية ستجعل المتصفح يقوم بعمل block  لكل الموقع حتى الانتهاء من جلب هذا الملف.

مثال:

<!– blocking external script –>

//website.com/javascriptFile.js

فى المثال السابق نحن نقوم بجلب ملف javascript بالشكل العادى والذى سيتسبب فى عمل block للموقع حتى الانتهاء من جلب هذا الملف والذى بدورة سيتسبب فى زيادة وقت Page Load Time الخاص بموقعك.

ß فى 1 ديسمبر 2009 اعلنت شركة Google الدعم ل Asynchronous Google Analytics tracking وسنستخدم هذه  الطريقة فى جلب ملف خارجى بدون عمل block لباقى  DOM:

-< الان سنقوم بجلب هذا الملف asynchronously  :

<!– remote script is loaded asynchronously –>

var script = document.createElement(‘script’);

script.src = “// website.com/javascriptFile.js”;

document.getElementsByTagName(‘head’)[0].appendChild(script);

-> ما الفرق :

  • فى هذا المثال قمنا بعمل inline script يقوم بانشاء script tag يقوم بجلب ملف خارجى. هذا فقط ؟ نعم ، هذا الامر سيوفر عليك على الاقل 1 ثانية من وقت تحميل الصفحة (تذكر ما ذكرته فى البداية عن ما يمكن ان تفعله ثانية واحدة).

ملحوظة : قامت  W3باضافة  async attribute   ل script tag فى html5 والتى تقوم بنفس هذا الامر فقط باضافة كلمة async مع script tag

  • لكن هذه الخاصية غير مدعومه بشكل كامل حتى الان على المتصفحات فتعمل على  IE10p2+, Chrome 11+, Safari 5+, Firefox 3.6+ .
  • يمكنك القراءة عنها اكثر من هنا ، ويمكنك القراءة اكثر عن مبدا جلب الملفات asynchronously فى هذا المقال.

5 – الصور الكبيرة :

  • الان مع تطور تكنولوجيا التصوير اصبحنا نرى صورة بجودة عالية جدا واحجام كبيرة وفى مواقع المتاجر الالكترونية الى تحتوى على اللاف الصور – ذات الجودة  العالية – والتى تظهر كل تفاصيل المنتج للزائر – سيظل حجم هذه الصور كبير حتى بعد ضغضها باستخدام احد الادوات التى ذكرناها فى الخطوة الاولى.
  • -> الحل هو جلب ما يحتاجه المستخدم من هذه الصور فقط فمثلا يمكن جلب صور جزء معين من الصفحة  فقط عندما يقوم الزائر بعمل scroll الى هذا الجزء.

لا تقلق هناك بعض الادوات الجاهزة التى يمكنك استخدامها للقيام بهذا الامر مثل مكتبة lazyload.js.

6 – اخر شىء معنا فى الجزئيات المتعلقة بال client side والتى تؤثر على load time الخاص بالموقع هو انه عليك كمصمم ان تحدد بيئة العمل التى تستهدفها ثم تجلب ما يناسب هذه البيئة من ادوات.

فما الفائدة مثلا من كتابة 100 سطر كود لتشغيل افضل مشغل فيديو على موقعك ثم فى النهاية مشغل الفيديو هذا لا يعمل على اجهزة الموبايل والتابلت ؟

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

يمكنك استخدام مكتبة modernizer فى التعرف على ما يدعمه جهاز الزائر من خصائص وتنقنيات

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

الان ما هى الاشياء التى تؤثر على سرعة تحميل الموقع بالنسبة لل server side :

1 – تفعيل ال gzip compression  على السيرفر :

  • اولا: ما هو ال gzip compression :

gzip compression  يقدم نسخة مضغوطة من الملفات الموجوده على السيرفر الخاص بك ، نسخة مضغوطة تعنى حجم اقل ووقت تحميل اقل.

  • ثانيا : كيف يعمل ال gzip compression

gzip-browser

عندما يقوم المتصفح بارسال Request الى السيرفر الخاص بك يطلب صفحة معينة تحتوى على بعض الصور مثلا ، سيقوم السيرفر بارسال نسخة مضغوطة من الصور اذا كان هذا المتصفح يدعم ال gzip compression ، الان كل المتصفحات تدعم وتفهم ال gzip compression  .

  • اخيرا كيف اقوم بتفعيل ال gzip compression :

يمكن تفعيل ال gzip compression  عن طريق اضافة الكود التالى الى ملف ال .htaccess الخاص بك :

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

هذا الكود فى الاعلى سوف يقوم بضغط كل الملفات الموجودة فى موقعك.

فى بعض الحالات النادرة قد لا يعمل هذا الكود، اذا لم يعمل معك فقم باستخدام الكود التالى بدلا منه :

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

محلوظة الكود فى الاعلى يعمل فقط مع مستخدمى Apache server .

يمكنك القراءة اكثر عن ال gzip compression  من هنا.

2 – تمكين ال browser caching  او التخذين المؤقت على المتصفح:

  • اولا : لنتعرف على معنى browser caching :

1691_repetitive

يقوم المتصفح بتحميل صفحة معينة عن طريق تذكر بعض المصادر الخاصة بهذه الصفحة مثل مكان ال logo الخاص بالموقع واماكن الصور الاخرى ومسار ملفات ال css/js الى اخرة، وعندما ينتقل الزائر الى صفحة اخرى داخل هذا الموقع سيقوم المتصفح بتحميل نفس ال logo ونفس ملفات ال css/js ونفس الصور الماضية مرة اخرى مما يسبب ثقل تحميل الصفحة كل مرة.

الان ماذا لو تمكنا من جعل المتصفح يتذكر الاشياء التى قام بتحميلها والتى لا تتغير مع كل طلب جديد مثل ال logo مثلا بدلا من تحميلها كل مرة. هذا الشىء يعرف ب browser caching  .

  • ثانيا : كيف نقوم بعمل ال local browser caching :

نقوم بتفعيل ال local browser caching   باضافة الكود التالى فى اول ملف ال .htaccess الخاص بك:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##

هذا الكود يحدد للمتصفح الملفات التى عليه ان يقوم بتخذينها مؤقتا وكم المدة التى عليه الاحتفاظ بهذه النسخة.

  • ثالثا : التحكم فى مدة التخذين المؤقت للملفات (cache) :

تلاحظ فى الكود الماضى كلمة ‘1 Year’  معناها اننا نخبر المتصفح اننا سنقوم بعمل cache للصور ذات امتداد image/jpg مثلا لمدة سنة ، فاذا اردت مثلا عمل كاش لهذا النوع من الصور لمدة شعر فاستبدل كلمة ‘1 year’ الى ‘1 month’.

  • رابعا : مشكلة ال Browser Caching :

عليك معرفة انه عند استخدام ال local browser caching   فان التغييرات التى تجريها على الملفات التى قمت بعمل local browser caching   لها لن تظهر عند كل المستخدمين لان المتصف يقوم بجلب هذه المصادر من ال local storage .

اخيرا يمكنك القراءة عن ال local browser caching   بشكل اكثر تفصيلا من هنا

3 – وجود بعض الاخطاء فى موقعك  بدون حل قد يسبب بطأ فى تحميل الموقع، لذلك عليك البحث عن الاخطاء فى موقعك والعمل على حلها اول باول وكما يقولون “Find bugs before your user do ”  وبمناسبة هذه العبارة يمكنك استخدام raygun.io   لعمل tracking  لل errors الموجودة فى موقعك.

اخيرا الوصول الى اعلى وافضل سرعة تحميل لموقعك سيساعدك على تقديم خدمة جيدة لعملائك وسيوفر عليهم الكثير من المال ، لان سرعة تحميل الموقع ستعنى استهلاك bandwidth اقل مما يؤدى الى تكلفة اقل للسيرفر.

اتمنى ان يكون افادكم هذا الموضوع وفى انتظار تقييمكم للموضوع ، واذا فاتنا بعض الاشياء التى تساعد فى الوصول الى افضل سرعة تحميل للموقع فشاركنا بها فى تعليق لتعم الفائدة على الجميع.

Advertisements

عودة إلى التدوين

كالعادة ابدا ب بسم الله والصلاة والسلام على رسول الله، وبعد : 

25 شهر مرت منذ قررت انشاء هذه المدونة والكتابة فيها ، منها 15 شهر منذ آخر تدوينة لى والتى اعلنت فيها عن اخر دورة قدمتها “Google Maps API”.

أشياء كثيرة اددت الى هذا الانقطاع الطويل أهمها قرارى بالاستقلال عن المنزل منذ سنة وتغير محل اقامتى من اسيوط الى القاهرة 

هذا القرار الذى تبعته فترة من القتال فى العمل والدراسة – غير الجامعية – ليل نهار ، انتقلت من شركة الى اخرى وتعاملت مع عملاء من داخل مصر وخارجها.

تغيرت كثير من الثوابت لدى خلال هذه الفترة وتوسعت دائرة اهتمامتى بشكل كبير 

اصبحت مدمن على القرءاة بشكل يدفعنى لمشاركتكم بعض الفؤاد من هذه الكتب ورأيى الشخصى فيها .

بخصوص البرمجة والدورات فانا اعد هذه الفترة اشياء جديدة اتمنى ان انتهى منها فى القريب.

“عودة إلى التدوين” هو عنوان مقالتى هذه والتى اعلن فيها انى قررت العودة الى هذه المدونة لاكتب فيها لا عن البرمجة وفقط ولكن عن البرمجة والكتب التى أقرأها وخبرات اكتسبها يوما بعد يوما من التعامل مع نفسى  ومع الناس واشياء اخرى اود ان تشاركونى فيها.

فى الختام اتمنى ان نتشارك الاراء والتققيمات وان نساعد بعضنا فى الارتقاء بانفسنا.

دورة فى Google API

بسم الله والصلاة والسلام على رسول الله وبعد

كيفكم شباب ان شاء الله بخير

اليوم ان شاء الله اعلن عن دورة جديدة نشرح فيها Google API

ونتحدث فيها بالتفصيل عن Google Maps API V3 وطريقة استخدامه فى تطبيقات الويب المختلفة

الشرح بالكامل سيكون HD

على هذا الرابط

اتمنى ان تعجبكم الدورة وان تستفيدوا بها وفى انتظار تعليقاتكم

اخوكم

اشرف حفنى

دورة كاملة فى مكتبة PHP PDO

بسم الله والصلاة والسلام على رسول الله وبعد.

مرحبا اخوانى الاعزاء

ان شاء الله تكونوا بخير وبصحة وعافية

اقدم لكم اليوم دورة كاملة فى شرح مكتبة PHP Data Object (PDO) بكل جزئياتها

الدورة تتكون من 24 درس مدة الدروس كلها 3 ساعات و 42 دقيقة تقريبا

على الرابط التالى

اتمنى ان تستفيدوا بها وان تنال رضاكم

اخوكم / أشرف حفنى

سورس كود موقع كامل بلغة php للمبتدئين من برمجتى

بسم الله والصلاة والسلام على رسول الله وبعد
فكل عام انتم بخير بمناسبة شهر رمضان اعاده الله علينا وعليكم بالخير والبركات

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

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

لذلك عزمت ان شاء الله على عمل ثلاث مواقع مبنية بلغة php متدرجة فى المستوى وعرض السورس كود لها مجانا للجميع .

الموقع الاول سيكون للمبتدئين كود عادى مفهوم .
الموقع الثانى سنقوم ياتخدام API & OOP مع الاهتمام بالحماية .
الموقع الثالث سيكون باستخدام نظام MVC وتهية الموقع للعمل على السيرفرات وانظمة التشغيل المختلفة .

وها انا اليوم اقوم برفع سورس كود اول موقع من هذه المواقع وهو موجهة للمبتدئين .

الطريقة التى سرت عليها :
1- قمت بتحميل قالب html & css مجانى من احد مواقع القوالب المجانية للعمل عليه وذلك للاسباب الاتية :
* ان الهدف من السورس كود للموقع هو تعلم البرمجة وليس التصميم.
* جمالية التصميم (لانى لست قوى فى التصميم ويأخذ منى وقت كبير ): ).
* التوافق مع جميع المتصفحات .
* قمت باختيار القالب باللغة الانجليذية لتجنب اخطاء الترميز للغة العربية مع قواعد البيانات والتى يقع فيها المبتدئون .

2- قمت بكتابة تعليقات تفصيلية على الاكواد.
3- قمت بعمل تصميم للوحة التحكم موافق تماما لتصميم القالب .
4 – قمت بالتحكم فى كل صور القالب واللينكات والمواضيع المضافة والتعديل عليها من داخل لوحة التحكم.
5- قمت بعمل نظام تعليقات على المواضيع .
6- قمت بعمل نظام للتحكم فى صفحات الموقع .
7- التحكم فى لينكات صور مواقع التواصل ووصف الموقع وحقوق العمل.
8- لم اقم بتغيير اى شىء من حقوق ملكية القالب الاساسى .
9- لم استخدم نظام التغليف API ولا OOP فى كتابة الكود .
10- لم اهتم بالحماية بشكل كبير بل قمت بعمل حماية للمدخلات والمخرجات ورفع الصور بسيطة جدا لاجل ان يكون الكود مفهوم للجميع حتى لو كانت هذه المحاية غير كافية فلا مشكلة فالكود للمبتدئين .
11- قمت بترك اشياء فى الموقع لكم كتدريب فقط اذا كانت مكررة فى موضع اخر وهى قليلة .
راعيت تقسيم العمل الى صفحات لكى لا يطول الكود .

طريقة الاستخدام :
* قم بالدخول الى المسار zerotype/admincp/includes/connect.php وعدل بيانات الاتصال بالقاعدة .
* استخدم user name: admin و password:admin للدخول الى لوحة التحكم .

فى الختام اتمنى الكود ينال رضاكم وتستفيدوا منه وفى انتظار تعليقاتكم .
واذا كان الكود غامض فساقوم بعمل فيديو يشرح كل شىء ان شاء الله .

هذا رابط القالب الاساسى
http://www.freewebsitetemplates.com/preview/zerotype/

وهذا السورس كود
http://www.mediafire.com/download/1l9rn27ujjxan2d/zerotype.rar