شرح اضافة shortpixel لزيادة سرعة موقعك في هذا المقال، سترى كيف يمكنك تثبيت اضافة ShortPixel Adaptive Images (SPAI) ، وشرح إعداداتها.
هذا الشرح مخصص لأداة التي تعمل على CDN
الاداة الاخري الشرح بالفيديو لا تقوم بأي شي سواء التفعيل وأختيار الجيل الجديد للصور وهو WEBP والضغط على تحسين فقط هذا كل شي
شرح اضافة ShortPixel
قم بتثبيت الاضافة باستخدام WordPress Plugin Search
أول شيء عليك القيام به هو الانتقال إلى الأضافات من لوحة WordPress الخاصة بك
والنقر فوق إضافات> إضافة جديد. ثم اكتب في حقل البحث “ShortPixel“.
الآن ، انقر فوق “التثبيت الآن” ثم التفعيل ShortPixel. وهذا كل شيء.
معالج الاضافة ShortPixel.
إذا كانت هذه هي المرة الأولى التي تستخدم فيها ShortPixel Adaptive Images
فسيتم الآن إعادة توجيهك إلى معالج الاداة:
سيساعدك هذا المعالج المكون من 4 خطوات على تكوين SPAI بشكل صحيح بحيث يتم تقديم جميع صورك من CDN المحسّن لدينا.
على سبيل المثال ، إذا كنت تستخدم بالفعل SPAI وتم تحديثه إلى الإصدار الجديد ، فيمكنك إعادة تشغيل المعالج بالانتقال إلى الإعدادات> ShortPixel AI والنقر على زر “معالج الإعداد” الموجود في أعلى قائمة المساعدة اليمنى:
يرجى ملاحظة أن ShortPixel Adaptive Images لا تتطلب مفتاح API لبدء العمل. ما عليك سوى ربط موقع الويب / المجال الخاص بك بحسابك حتى يتم استخدام أرصدة ShortPixel الخاصة بك ، وسيتم تنفيذ ذلك تلقائيًا بواسطة معالج Onboarding.
بعد إكمال معالج Onboarding، تأكد من مسح ذاكرة التخزين المؤقت لموقعك:
كيفية مسح ذاكرة التخزين المؤقت لـ WordPress
الإعدادات اضافة shortpixel
يعد ShortPixel سهل الاستخدام للغاية ، حيث يبدأ في القيام بسحره بعد تنشيطه وإعداده باستخدام معالج Onboarding؛ لا حاجة للنقر على أي زر تشغيل أو ما شابه. ومع ذلك ، يوفر لك SPAI أيضًا بعض الإعدادات لضبط تحسين صورتك. للوصول ، ما عليك سوى تسجيل الدخول إلى منطقة إدارة WordPress الخاصة بك والانتقال إلى الإعدادات> ShortPixel AI .
تذكر مسح ذاكرة التخزين المؤقت لموقعك بعد تغيير الإعدادات: كيفية مسح ذاكرة التخزين المؤقت لـ WordPress
اعدادات ضغط الصور
- مستوى الضغط : راجع هذه المقالة لمعرفة المزيد عنها.
- دعم WebP : صور WebP هي الجيل التالي من الصور ، المصممة خصيصًا للويب. باختصار صور WebP أصغر حجمًا بنسبة 26٪ مقارنة بصور PNG و 25-34٪ أصغر من صور JPEG
شرح اضافة shortpixel
- المماثلة. هنا مزيد من المعلومات عنها. يوفر لك ShortPixel إمكانية الحصول على دعم WebP بنقرة واحدة فقط. نوصيك بتنشيط هذا الإعداد ما لم تعلم أنك ستواجه بعض مشكلات التوافق. يمكنك التحقق من المتصفحات التي تدعم تنسيق الصورة هذا هنا .
- إزالة EXIF : تمامًا كما يفعل SPIO ، لجعل الصورة أصغر قليلاً، يمكنك تمكين هذا الخيار وإزالة جميع المعلومات الموجودة في الصورة ، مثل المؤلف والموقع والكاميرا وما إلى ذلك.
سلوك اضافة shortpixel
- تأثير التلاشي : من أجل العمل بشكل صحيح ، يقوم SPAI بتحميل الصور البطيئة. هذا يعني أنه لن يتم تحميلها حتى تكون هناك حاجة إليها، وهو الوقت الذي ستكون فيه مرئية على
- شاشة المستخدم. من أجل جعل الانتقال من غير مرئي إلى مرئي سلس ، يتلاشى SPAI في الصور ، ولكن إذا واجهت لسبب ما مشاكل مع الصور ذات المؤثرات الخاصة ، فحاول تعطيل هذا الخيار.
- الاقتصاص الذكي : سيحدد المكون الإضافي الحالات التي لا يتم فيها عرض كل الصور ويقصها وفقًا لذلك. قد لا يعمل هذا مع بعض الخلفيات ، لكنه لن يضرهم.
شرح اضافة shortpixel
- طريقة الاستبدال : هذا يعدل كيفية قيام SPAI باستبدال الصور بالصور المحسنة (تذكر أن SPAI يغير عنوان URL للصورة ).
- SRC : هذه هي الطريقة الموصى بها . يتأكد من بقاء الصور فقط مع سمة SRC التي يتم تغيير حجمها إلى العنصر النائب.
إنشاء علامة <noscript> : إذا كنت في متصفح لا يسمح / يدعم JavaScript ، فيجب عليك تنشيط هذا للسماح لـ SPAI بالعمل بشكل صحيح.
يرجى ملاحظة أن هذا ليس مفتاح تبديل “no-JavaScript” ؛ هذا هو الحل ، لأن SPAI يعمل بشكل أفضل إذا تم تمكين JavaScript.
شرح اضافة shortpixel
- كلاهما (تجريبي): يقوم بنفس طريقة SRC ولكنه يحتفظ أيضًا بسمة SRCSET أثناء استبدال الصور فيه (ولكن لا يتم تغيير حجمها).
- SRCSET (تجريبي): يستبدل فقط الصور الموجودة في سمة SRCSET.
- عنوان URL الخاص بواجهة برمجة التطبيقات (API) : يمكنك جعل SPAI يعمل مع CDN الخاص بك ، وهذا هو الحقل المطلوب تكوينه. لا تقم بتعديله إلا إذا كنت تعرف ما تفعله . لمزيد من المعلومات حول هذا ، تحقق من هذه المقالة .
- حد التحميل الكسول : يحدد هذا الوقت الذي يتم فيه تحميل الصورة البطيئة قبل الدخول إلى المنطقة المرئية من الصفحة (منفذ العرض). على سبيل المثال ، تعني القيمة الافتراضية 500 بكسل أنه يتم تحميل الصورة عندما تكون أقرب من 500بكسل من منفذ العرض. إذا لم تكن متأكدًا ، فلا تقم بتغييره.
شرح اضافة shortpixel
- معالجة تمرير الصور : ينطبق هذا على المواقف التي يكون لديك فيها صورة مختلفة عند التمرير فوق صورة موجودة. على سبيل المثال ، هناك مواقع بها شعارات شركاء أو عملاء رمادية اللون (في الشهادات) وعندما تحوم فوقها ، تصبح ملونة. قم بتمكين هذا الخيار إذا كانت هذه هي حالتك.
- المستخدمون المسجلون للدخول: بشكل افتراضي، يقدم ShortPixel AI صوركويحسنها حتى إذا قمت بتسجيل الدخول. ومع ذلك ، إذا كنت ترغب في حفظ بعض حركة مرور CDN وائتماناته ، أو يمكنك ببساطة تعطيل هذا الخيار ومن ثم سيعمل SPAI فقط مع تسجيل الدخول. – من المستخدمين (زوار موقعك).
- العناصر النائبة للصور LQ : تعرف على المزيد هنا .
- التحميل البطيء الأصلي : تعرف على المزيد هنا .
إعدادات الاضافة
- خدمة SVGs من خلال CDN : يمكنك جعل SPAI يخدم SVGs من خلال شبكة CDN الخاصة بنا. سوف تظل غير محسَّنة ، رغم ذلك. لا يقوم ShortPixel بتحسين ملفات SVG.
- تحميل كسول الخلفيات :
- تحميل كسول لصور الخلفية من كتل STYLE المضمنة: إذا كان لديك صور خلفية في كتل أنماط مضمنة على صفحة HTML الخاصة بك ، فسيؤدي هذا الخيار إلى تحميلها كسولًا وبالتالي يعمل عليها كـ WebP (إذا تم تمكينها).
التحميل الكسول وتغيير حجم صور الخلفية في أنماط TAGS المضمنة: إذا كان لديك صور خلفية في سمات النمط الخاصة بعلامات HTML ، فسيؤدي هذا الخيار إلى تحميلها كسولًا وبالتالي يخدمها كـ WebP (إذا تم تمكينه).
شرح اضافة shortpixel
- أقصى عرض للخلفيات : إذا لم يتم تحديد الخيار السابق ، يمكنك فرض أقصى عرض على خلفيتك. مفيد لتلك الخلفية الضخمة التي لا تريد تحميلها كسول.
- استبدال في ملفات CSS : راجع هذه المقالة .
- استبدال في كتل JS : تحتوي بعض المكونات الإضافية أو السمات على معارض أو تأثيرات أخرى حيث يتم عرض الصور في كتل JavaScript. في هذه الحالة ، سيتعين عليك تنشيط هذا الخيار.
- استبدال في بيانات JSON : تحقق من هذا إذا كان لديك أجزاء معينة من المحتوى يتم تسليمها بواسطة Javascript في حزم مشفرة JSON. ستستفيد بعض المعارض من ذلك ، مثل Thrive Architect’s. لمزيد من المعلومات ، انقر هنا .
- تكامل مع Lity : إذا كان قالبك يستخدم Lity lightbox ، فيجب عليك تمكين هذا.
الاستثناءات
- المحددات المستبعدة : هنا يمكنك كتابة محددات CSS التي تريد أن يستبعدها SPAI من التحسين.
- إذا قمت بكتابتها في “Don’t lazy load” ، فلن يتم تحميل مثل هذه المحددات بشكل بطيء ، ولكن سيظل تحسينها وتغيير حجمها. يرجى ملاحظة أن أي صور لم يتم تحميلها كسول لن يتم تسليمها على أنها WebP لأسباب فنية.
- إذا قمت بكتابتها في “عدم تغيير الحجم” ، فسيقوم SPAI بتحسين مثل هذه الصور وليس تغيير حجمها .
- إذا قمت بكتابتها في “اتركها تمامًا” ، فسوف يتجاهلها SPAI تمامًا ، بدون تحسين أو تغيير حجم.
شرح اضافة shortpixel
- عناوين URL المستبعدة : إذا كنت تريد أن يتجاهل SPAI بعض صورك عن طريق عنوان URL فهذا هو المكان الذي تستبعدها فيه ، باستخدام التعبيرات العادية (لاستبعاد جميع ملفات GIF أو كل PNG ، على سبيل المثال) أو المسارات (لاستبعاد صورة واحدة ، على سبيل المثال) . يتضمن المكون الإضافي بالفعل شرحًا جيدًا حول كيفية استخدام هذا الحقل ، تأكد من التحقق منه!
تأكد من قراءة المزيد حول الاستثناءات هنا: كيفية استبعاد الصور من التحسين في المكون الإضافي ShortPixel Adaptive Images
مدقق الصورة
بعد أن تكون جميع الإعدادات في مكانها الصحيح ، تأكد من إطلاعك على أداة Image Checker الجديدة: كيفية استخدام أداة Image Checker .
استكشاف الأخطاء وإصلاحها
توقف هنا! امسح ذاكرة التخزين المؤقت قبل المتابعة: كيفية مسح ذاكرة التخزين المؤقت لـ WordPress
الآن ، السؤال الأول الذي يتبادر إلى الذهن هو: ” هل تعمل SPAI بشكل جيد على موقع الويب الخاص بي؟ ” يمكنك معرفة ذلك أثناء قراءة هذا المقال !
قمنا أيضًا بتحديث قاعدة معارفنا بالعديد من المقالات التي ستساعدك شرح اضافة shortpixel
عندما لا يعمل شيء ما كما هو متوقع:
- بادئ ذي بدء ، للأسباب الأكثر شيوعًا لحدوث خلل ، راجع هذه المقالة .
- إذا لاحظت أنه لم يتم تغيير حجم الصور بشكل صحيح ، فستساعدك هذه المقالة في تصحيح كل شيء بنفسك خطوة بخطوة.
- إذا ، بشكل عام ، يعمل SPAI بشكل صحيح ، ولكن لا يزال لديك بعض الصور التي لا يتم تقديمها بواسطة CDN الخاص بنا ، فحاول تنشيط أحد الخيارات التالية ، الموجودة في الإعدادات> ShortPixel AI> المناطق:
- استبدل في ملفات CSS
- استبدل في بيانات JSON
- استبدال في JS كتل
شرح اضافة shortpixel
- هل تستخدم GTmetrix أو PageSpeed Insights؟ هل تلقيت رسالة أو أكثر من
رسائل التحذير المتعلقة بالصور؟
- ” استخدام العرض والارتفاع الصريحين على عناصر الصورة “: اقرأ هذا
- ” P حجم الصور roperly “: اقرأ هذا
- هل تظهر صورك كـ ” data: image / svg ” إذا قمت بفحص الكود؟ ثم اقرأ هذا .
- SPAI لا يخدم صور WebP بشكل صحيح؟ ربما يفعل !
- هل تحصل على خطأ 500 عند تثبيت البرنامج المساعد؟ تأكد من قراءة هذا .
شرح اضافة shortpixel
شرح مبسط للاداة
أعتذر جداً عن أداة التعتيم يوجد بها مشكلة في الفيديو
تسجيل الفيديو المقدم في الشرح هو من موقع رسمي يمكنك تجربته من الرابط التالي
شرح اضافة shortpixel
