‏إظهار الرسائل ذات التسميات تصميم مواقع. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات تصميم مواقع. إظهار كافة الرسائل

نصائح لتسريع أداء المواقع المبنية بإطار عمل لارافيل

الكثير من الشركات تستخدم إطار العمل لاراڤيل (Laravel) لبناء موقع الويب الخاص بالشركة. اليوم سنقوم بعمل تحسين لسرعة بي اتش بي لارافل في خطوات بسيطة.

استخدام Laravel Mix لتحسين وتصغير الملفات

لارافيل ميكس تقوم بخلط العديد من ملفات الـ CSS لينتج ملف واحد. وبذلك يحتاج الموقع لطلب ملف واحد في http request واحد فقط. مثال على طريقة استخدام ميكس.

mix.styles([ 
'public/css/vendor/normalize.css',

'public/css/styles.css', 

], 'public/css/all.css');

استخدام الحفظ المؤقت cache دائماً

الكاش في مجال البرمجة معناه استخدام المعلومات التي تم تكوينها أو انتاجها في خطوات سابقة. الكاشينج (caching) يلعب دور كبير في تحسين أداء مواقع الويب.

على سبيل المثال، يتم طلب API معين كثيراً جداً. إن استخدمنا نفس الرد على الطلب السابق بدلاً من إجراء طلب جديد للـ API . وبذلك نوفر الكثير من الوقت اللازم لإجراء الطلب، ونقلل من استهلاك قواعد البيانات وتقليل عدد مرات التواصل مع قاعدة البيانات.

إطار العمل لاراڤيل يوفر لنا أمر سهل وبسيط لعمل حفظ مؤقت للكثير من الأمور. يمكنك عمل cache من خلال هذا الأمر.

php artisan config:cache

على سبيل المثال عمل cache للمسارات routes بهذا الأمر.

 php artisan route:cache

استخدام الطوابير Queues

من هياكل البيانات الضرورية في تحسين الأداء هي الطوابير (queue). نستخدم الطابور (queue) غالباً لإرسال رسائل من المستخدم إلى الخدمة أو العكس. سنقوم بالحديث عن استخدام الكيوز (queues) في مقال منفصل إن شاء الله لأنها مهمة جداً في تحسين أداء المواقع المبنية بـ لارافيل.

تسريع إطار عمل لارافيل

تحديث لارافيل و بي إتش بي

التحديثات تقوم بعمل الكثير من التحسينات في سرعة وأداء إطار العمل لارافيل ولغة البرمجة PHP لذلك أنصحك بعمل تحديث لإطار العمل واللغة دائماً.

التصغير minification

معني minification تصغير حجم أجزاء التطبيق قدر الإمكان. يُمكنك تقليل حجم الكود ، اعدادات السيرفر ، والكثير من الملفات الثابتة في الموقع الإلكتروني. والآن أقدم لك الأشياء التي يمكن تصغيرها.

تصغير HTML

تصغير HTML معناها تقليل حجم الكود وتقسيمه إلى عدّة أجزاء مما يساعد في تكوين صفحة الويب أسرع مما يجعل رد السيرفر أسرع.

تصغير CSS

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

تصغير جافاسكربت

تصغير كود جافاسكربت يساعد في تقليل وقت تنفيذ الكود على جهاز المستخدم. تصغير جافاسكربت (javascript) يتم عن طريق الكثير من العمليات أهمها إزالة الـ API calls الغير مستخدمه ، وإزالة المتغيرات الغير مستخدمه ، وإزالة الـ imports الغير مستخدمه ، .. إلخ.

مراقبة ومتابعة أداء الموقع بإستخدام أداة Scout APM (أداة مدفوعة)

أداة Scout APM هي أداة متخصصة في مراقبة تطبيقات الويب لمعرفة المشاكل والعيوب بهدف تحسين أداء مواقع الويب. هذه الأداة تدعم لغات وإطارات عمل كثيرة منها لغة PHP و لغة روبي Ruby ولغة بايثون Python ولغة إيليكسير Elixir وغيرها من لغات البرمجة.

تعدم أداة سكوت إيه بي إم إطار عمل لارافيل من إصدار 5.5 أو أحدث. تساعد أداة Scout APM في معرفة وتحديد أوامر قواعد البيانات N+1 queries وهي تعتبر مشكلة أساسية في Laravel Eloquent .

تثبيت Scout APM في تطبيق لارافيل سهل جداً. كل ما عليك هو تنفيذ هذا الأمر في التيرمينال.

composer require scoutapp/scout-apm-laravel

ثم تنفيذ الأمر scout-app وبذلك نتأكد أنه تم التثبيت بنجاح.

بعد ذلك، نقوم بإضافة هذه الثوابت لملف .env لكي تكامل scout apm مع تطبيق لارافيل الخاص بك.

# Scout settings

SCOUT_MONITOR=true

SCOUT_KEY="[AVAILABLE IN THE SCOUT UI]"

SCOUT_NAME="A FRIENDLY NAME FOR YOUR APP" 


إن كنت تريد تثبيت تطبيق لارافيل على منصة هيروكو (Heroku) من خلال إضافة هيروكو (heroku addon) ، فأنت لا تحتاج إلى إضافة SCOUT_MONITOR ولا SCOUT_KEY لأن هيروكو يقوم بإضافتهم تلقائياً.

ثم بعد ذلك تضيف ملف config/scout_amp.php بإستخدام هذا الأمر.

php artisan vendor:publish --provider=\"Scoutapm\\Laravel\\Providers\\ScoutApmServiceProvider\"

وبعد ذلك تقوم بحذف ملفات الكاش (ملفات الحفظ المؤقت) ، وتقوم بإعادة بنائها مرةً أخرى. استخدم هذه الأوامر بالترتيب.

php artisan cache:clear

php artisan route:cache

php artisan config:cache 

ويُمكنك التأكد من حالة الحفظ المؤقت (cache) من خلال هذا الأمر.

php artisan about

إن أردت أن تضيف امتداد / اضافة scoutapm PHP extension استخدم هذا الأمر.

sudo pecl install scoutapm

إن كنت تفضل مشاهدة الفيديو أكثر من قراءة المقالات، اشترك في القناة على اليوتيوب من هنا. إن كنت تستخدم برنامج تليجرام ، يُمكنك الاشتراك في قناة تيليجرام للحصول على الموضوعات الجديدة. لمزيد من المعلومات عن البرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن "موقع أبانوب حنا للبرمجيات" على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.

طريقة تسريع موقع ووردبريس

تسريع تحميل الصفحات على المواقع المصممة بـ ووردبريس هام جداً. لأن سرعة تحميل صفحات موقعك تزيد من تصفح الزوار لموقعك دون أن ينتظروا تحميل الصفحات. لابد أن تقوم بكل طرق زيادة سرعة موقعك لكي تزيد من سرعة ظهور صفحات موقعك أمام الزوار.

١. اختر استضافة قوية
٢. اختر قالب / ثيم ووردبريس احترافي

٣. حدد عدد المراجعات في ووردبريس

ضع الكود التالي في ملف wp-config.php والذي يمكنك الوصول إليه عن طريق cPanel أو FTP
define( 'WP_POST_REVISIONS', 3 );

٤. احذف الإضافات الغير هامة

الإضافات (Plugins) من الأشياء المفيدة والهامة جداً في ووردبريس ، ولكنها تجعل تحميل الموقع بطئ. لذلك إن لم تكن الإضافة مفيدة ، احذفها لتحصل على موقع أسرع في التحميل والتصفح.

٥. احذف المحتوي الغير هام من صفحات موقعك

وجود صفحات غير مفيدة في موقعك ، يجعل الموقع أكبر بدون داعي بالإضافة أن وجود صفحات عديمة الفائدة يؤذي ترتيب موقعك في محركات البحث وخاصةً جوجل.

٦. تصغير حجم الصور لتكون مناسب للعرض في موقعك

هناك الكثير من الأدوات والطرق التي تساعدك في تحسين وتصغير حجم الصور على ووردبريس. يُمكنك استخدام موقع https://squoosh.app من جوجل ، أو موقع كومبريسور. إن كنت تفضّل استخدام بلاجنز (إضافات ووردبريس) سأراجع أفضل الإضافات وأكتبها هنا (قريباً).

٧. استخدم الإمتداد المناسب للصور png أو jpg

إن كانت الصورة عبارة عن لوجو به ألوان بسيطة وتحتاج إلى خلفية شفافة ، استخدم png . أما إن كانت الصور لمنظر طبيعي وبها ألوان كثيرة فالأفضل أن تستخدم  jpg .

٨. استخدم ميزة Jetpack Photon لإستضافة الصور على موقع ووردبريس بدلاً من موقعك

إن كان موقعك به آلاف الصور ، والصور جزء رئيسي من المحتوى ، أنصحك بإستخدام ميزة جت باك فوتون (Jetpack Photon) لإستضافة الصور على موقع ووردبريس نفسه بدلاً من استضافة الصور على موقعك (استضافتك).

٩. ارفع ملفات الفيديو على يوتيوب وليس على موقعك مباشرةً

لا تثقل موقعك بالفيديوهات. انشر الفيديو على موقع يوتيوب ثم خذ رابط الفيديو وضعه (embed) في موقعك. وبذلك تحصل على فيديو يعمل بسرعة وكفاءة دون الضغط على موقعك من ناحية السرعة.

١٠. استخدم CDN

شبكات توصيل المحتوى (Content Delivery Network) واختصارها CDN ، وتُستخدم لكي نقلل عدد الطلبات (http requests) التي تقوم بها صفحة الويب لموقعك. عندما نستخدم موقع آخر متخصص في توصيل المحتوى فإن معظم الطلبات تذهب لهذا الموقع المتخصص وبذلك يخف الضغط من على استضافة موقعك وتستطيع تحميل المحتوى بسرعة وتكسب العملاء ولا تدعم ينتظرون تحميل صفحات موقعك.

نصيحة : متخليش الناس تستنى عشان صفحة من صفحات موقعك تحمّل .. خلي موقعك سريع .. خلي في دماغك إن ٢٠٠ مللي ثانية هو الوقت المناسب لتحميل أى صفحة من صفحات موقعك.

١١. اضافة WP-Optimize
١٢. اضافة WP Rocket
١٣. اضافة W3 Total Cache
١٤. ضغط وتصغير ملفات CSS
١٥. ضغط وتصغير ملفات جافاسكربت
١٦. تحديثات ووردبريس ، وتحديثات الإضافات والثيم
١٧. استخدم خطوط ويب أقل
١٨. تحميل الصور عند الطلب فقط (lazy load images)
١٩. التحميل المسبق، الجلب المسبق، والإتصال المسبق

لمزيد من القراءة عن تحسين سرعة موقعك الذي يعمل بـ ووردبريس (wordpress) اقرأ بعض النصائح على الموقع الرسمي من هنا.

إن كنت تفضل مشاهدة الفيديو أكثر من قراءة المقالات، اشترك في القناة على اليوتيوب من هنا. لمزيد من المعلومات عن البرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن "موقع أبانوب حنا للبرمجيات" على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.

١٠ نصائح بسيطة لتصميم صفحة ويب احترافية

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

التجانس

لابد أن يكون التصميم متجانس أو homogenous أو consistent . إن استخدمت أيقونات ذات خلفية حمراء ، فإستخدم كل الأيقونات بنفس المواصفات. إن استخدمت أيقونة عبارة عن خطوط (outlines) ، استخدم كل الأيقونات بنفس الصفات.

صور واقعية

حاول أن تستخدم الصور الواقعية لتوضيح الفكرة بدلاً من الصور التجريدية. لا تستخدم الصور التجريدية إلا في الشعار (logo).

لا تستخدم التصميم التالي رغم جماله.

مثال سيئ لإستخدام صور كرتونية في الموقع

لكن استخدم هذا التصميم مثلاً.

استخدام صور واقعية في تصميم صفحة الويب

تباين الألوان ووضوح المحتوى

ركز على تباين الكلمات على الخلفية. حاول أن تستخدم ألوان بينهما contrast عالى مما يزيد الوضوح. لأن هذا يؤثر في الـ accessibility ومدى توافق صفحات موقعك مع كل الناس بمواصفاتهم وأمراضهم (لابس نظارة طبية مثلاً). مما يؤثر في ترتيب موقعك على جوجل وليس مجرد جمال الشكل والتصميم.

المساحات الفارغة

لا تجعل تصميم صفحة الويب يظهر مزدحماً. أعطِ مساحة كافية لكل عنصر من عناصر الصفحة ، وأعط مسافة كافية بين العناصر في التصميم. لا تجعل الشكل overwhelming (مُجهِد) للقارئ.

صورة توضح أهمية المساحات الفارغة والمسافات في تصميم صفحات الويب

أهمية العناصر وحجمها (visual hierarchy)

اجعل العناصر الأكثر أهمية أكبر في الحجم من العناصر الأقل أهمية. لذلك تجد العناوين h1 و h2 و .. أكبر حجماً من الكلمات الموجودة في الفقرات النصية. إن وجدت عكس ذلك فهذا خطأ في تصميم صفحة الويب. استخدم أحجام مناسبة لكل عنصر من العناصر الظاهرة المكونة لصفحة الويب.

لماذا تركز على الأحجام ؟ لأن الإنسان يرى العنصر الأكبر أولاً. العنصر الكبير الحجم يجذب بصرياً أكثر من العنصر قليل الحجم. بالإضافة إلى أن الإنسان يعتبر العنصر أكثر أهمية عندما يراه كبيراً.

يُمكنك استخدام الألوان والخلفيات لتدل على أهمية شئ أكثر من شئ آخر ، وتلفت نظر الزائر إلى شئ أكثر من الآخر. مثال الفرق بين زر تسجيل الدخول ، وتسجيل حساب جديد في الصورة التالية.

الفرق بين الزر الأساسي والزر الفرعي في اللون والحجم

خط واحد فقط (one font is enough)

أنصحك أن تستخدم خط واحد فقط (font). وللتنويع استخدم الخط السميك (bold) عند اللزوم، ومائل (italic) أحياناً أخرى. وبذلك تحصل على تنوع مناسب في الكتابة. لكن لا أنصحك بإستخدام أكثر من خط إلا عند الضرورة. لأن وجود أكثر من خط في صفحة الويب يثقل الصفحة ويجعل تحميلها بطئ جداً على الموبايلات.

الظلال والألوان

استخدم ألوان جميلة ومناسبة لبعضها. استخدم درجات مختلفة من نفس اللون لكي تحصل على جمال الألوان. اللون الثابت ممل وغير محبوب. استخدم ظلال بشكل مناسب من نفس اللون. بالإضافة إلى درجات اللون، استخدم ظلال (drop shadow or glow) لكي تزيد جمال ووضوح التصميم.

الدوران و الحِدّة

الحدة تجذب النظر وتدل على الأهمية. ولكن الدوران يقلل من تركيز العين ويعطي هدوء وارحة للتصميم. لذلك تجد في الطبيعة أن معظم الأشياء دائرية و منحنية وليست حادة. لا تستخدم زوايا حادة ، أضف border-radius لكي تصبح الزوايا دوران (curved).

لماذا تجذب عين الزائر لزاوية زر على موقعك ؟! .. لا تستخدم زوايا حادة للأزرار !

الحدود والإطار (border)

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

تصميم خالي من الحدود والإطار مقارنة بتصميم به حدود

لا تضع خطوط تحت روابط شريط التنقل

من المعروف والواضح أن روابط شريك التنقل (nav-bar links) أنها روابط . لماذا تضغط تحتها خطوط لتؤكد أنها روابط ؟!

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