طراحی سایت ، سئو سایت ، طراحی سایت فروشگاهی
طراحی سایت ، سئو سایت ، طراحی سایت فروشگاهیطراحی سایت ، سئو سایت ، طراحی سایت فروشگاهی
طراحی سایت ، سئو سایت ، طراحی سایت فروشگاهیCDN چیست و دلایل استفاده از CDN در وب سایت
CDN چیست و دلایل استفاده از CDN در وب سایت
دلایل استفاده از سرویس CDN در وب سایت
به عنوان مدیر یک وب سایت شما همیشه به دنبال افزایش سرعت وب سایت خودتان برای بالا بردن رضایت کاربرانتان یا همان تجربه کاربری هستید. یکی از جدیدترین و مدرن‌ترین مدل‌های افزایش سرعت سایت در حال حاضر استفاده یک سرویس CDN می‌باشد. (CDN به معنای شبکه تحویل محتوا یا شبکه توزیع محتوا یاد می‌شود).
این سرویس‌ها بار اضافه را از سرور اصلی سایت شما کاهش داده و باعث می‌شود سرعت تحویل محتوا به کاربران بالاتر رود، تجربه کاربری بهتری در مدیریت وب سایت به شما و کاربرانتان هدیه می‌دهند.
امروز ما می‌خواهیم شما را با نحوه کار CDN ها و همچنین دلیل استفاده از آنها و معرفی برخی مزایای اضافی CDN ها آشنا کنیم. همچنین با نمایش چندین آزمایش سرعت قبل و بعد از فعال سازی سرویس CDN شما را به چالش می‌کشیم که خود تفاوت استفاده کردن و استفاده نکردن CDN را قضاوت کنید.
۴۰ درصد کاربران اگر وب سایتی بیشتر از ۳ ثانیه لود شود آن رها می‌کنند. (این یک شاخص جهانی است ولی در ایران با توجه به سرعت بسیار پایین اینترنت و حجم بالای وب سایت ها این شاخص تا ۷ ثانیه پیش‌بینی می‌شود).
شبکه تحویل محتوا (CDN) چیست؟
کلمه CDN مخفف کلمه content delivery network به معنای شبکه تحویل محتوا (شبکه توزیع محتوا) می‌باشد. این سرویس یک شبکه از سرورها در سراسر جهان می‌باشد که برای میزبانی اطلاعات استاتیک (و گاهی داینامیک) وب سایت شما نظیر تصاویر، ویدیوها، فایل‌های CSS و فایل‌های جاوااسکریپت طراحی شده است. توجه داشته باشید که وقتی از میزبانی صحبت میکنیم منظور میزبانی وب سایت شبیه هاست‌های اشتراکی یا اختصاصی سایت شما نیست. CDN به طور کامل یک سرویس جداگانه میزبانی می‌باشد. سرویس‌های CDN جایگزین هاست‌های میزبانی شما نیست ولی راهی اضافه برای بهبود سرعت سئو سایت می‌باشد.
سرویس CDN چگونه کار می‌کند؟
سرویس CDN دقیقا چگونه کار می‌کند؟ خب، به عنوان مثال ، وقتی شما قصد خرید یک هاست میزبانی وب را دارید ، می‌بایست مکان یک دیتاسنتر فیزیکی مثل آلمان، فرانسه، امریکا، ایران و غیره را انتخاب کنید. به عنوان نمونه فرانسه را برای میزبانی انتخاب کردیم. این به معنی آن است که مثلا وب سایت شما توسط سرور‌هایی واقع در پاریس میزبانی می‌شود. حال در نظر بگیرید فردی در ایران بخواهد وارد وب سایت ما شود و فردی نیز از فرانسه وارد وب سایت ما شوید، به علت مکان قرارگیری سرور و همچنین انتقال داده‌ها از مبدا به کشور مقصد، زمان لود وب سایت در ایران بیشتر از فرانسه خواهد بود. این چیزی است که به آن لِی‌تنسی یا تاخیر گفته می‌شود (latency). لی‌تنسی به زمان یا تاخیری گفته می‌شود که برای انتقال اطلاعات در شبکه‌ها لازم است. بنابراین هرچه فاصله کاربر از مکان قرارگیری سرور وب سایت دورتر باشد لی‌تنسی نیز بیشتر می‌شود.
همچنین لی‌تنسی را در تبادل داده‌ها فراموش نکنید، هنگامی که شما به عنوان کاربر داده‌ها را دریافت می‌کنید و با پر کردن فرم یا کلیک روی کلیدی درخواستی را برای سرور ارسال می‌کنید، باز هم فاصله شما با سرور باعث تاخیر در دریافت پاسخ می‌شود. حال جایی است که CDN وارد بازی می‌شود و ما در این زمان برای کاهش لی‌تنسی سرویسی به نام CDN را وب سایت خود اضافه میکنیم. سرویس CDN اطلاعات را از نزدیک‌ترین سرور برای کاربر نمایش می‌دهد و این کار باعث کاهش لی‌تنسی لود وب سایت می‌شود. سرورهای CDN را گاهی نقطه حضور (POPs) می‌نامند.
کاربران وردپرسی در ابتدا برای استفاده از CDN بی‌میلی نشان می‌دهند. در اینجا ما در ۳ مرحله خیلی ساده نحوه عملکرد CDNو همچنین نحوه فعالسازی آن در وب سایتتان را آموزش می‌دهیم.
مرحله اول :
یک ارائه دهنده سرویس CDN را انتخاب کنید و در وب سایتش ثبت نام کنید. سرویس دهی آنها بیشتر به صورت ماهیانه یا حجم پهنای‌باند می‌باشد و اکثر ارائه دهندگان برای محاسبه قیمت، به صورت هوشمند عمل می‌کنند و نیازی به ارسال تیکت یا تماس با ارائه دهنده نیست.
مرحله دوم :
برای ادغام CDN خود با وردپرس از یک افزونه رایگان مانند CDN Enabler استفاده کنید. این افزونه‌ها به صورت خودکار داده‌های شما را با CDN ادغام می‌کنند. با این افزونه‌ها نیازی نیست که شما به هیچ چیزی دست بزنید و همه کار‌ها به صورت خودکار انجام می‌شود، صرفا برخی اطلاعات اولیه برای وصل شدن به CDN لازم دارند. در حال حاضر استفاده ازCDN نسبت به چند سال پیش خیلی راحت‌تر شده است.
مرحله سوم :
حال هنگامی که کاربران شما وارد وب‌سایتتان می‌شوند، اکنون محتوای وب سایت وردپرسی شما در CDN هایی در سراسر دنیا لود می‌شود و نسبت به مکان کاربر نزدیک ترین سرور CDN انتخاب می‌شود و اطلاعات برایش لود می‌شود. پس اگر حال کاربر از ایران وارد وب سایت ما شود دیگر لی‌تنسی قبلی را برای انتقال از فرانسه به ایران را احساس نمی‌کند زیرا اطلاعات از سروری در آسیا برایش ارسال می‌شود. حال به این بخش می‌رسیم که CDN چگونه مکان کاربر را تشخیص می‌دهد. این سرور برای تشخیص مکان فعلی کاربر از تشخیص IP و همچنین مسیریابی جغرافیایی استفاده می‌کند تا دقیق‌ترین مکان را تشخیص و نزدیک‌ترین سرور را به درستی انتخاب کند.
با این حال، هنوز هم انتخاب یک سرور قدرتمند در یک مکان مرکزی بسیار اهمیت دارد، چون اگر از یک CDN قدرتمند برای لود اطلاعات وب سایت خود استفاده کنید نیز مرورگر باید چند درخواست برای دریافت فایل‌های استاتیکی مثل HTML وPHP ارسال کند، مگر اینکه از تکنیک ذخیره سازی در سرور پروکسی استفاده کنیم که آن بخشی جداست که بعدا به آن می‌پردازیم. در حال حاضر وب سایت‌های میزبانی بسیاری هستند که از نظر ارائه سرور قدرتمند در ایران فعالیت می‌کنند و از مکان‌های مختلفی از جهان از جمله خود کشورمان ایران سرویس دهی می‌کنند.
مزایای استفاده از CDN
در زیر تعداد اندکی از مزایای بسیار زیاد CDN ها را بیان میکنیم.
1 – بهبود عملکرد
بهبود عملکرد یکی از مهم‌ترین دلایل استفاده از این سرویس می‌باشد. با این سرویس هربار که وب سایت را لود می‌کنید سرویس از نزدیک ترین سرور با حداکثر سرعت داده‌ها را دریافت کند و نرخ فرار کاربران یا bounce rate را کاهش دهد (اطلاعات بیشتر درباره bouce rate را میتوانید در مقاله bounce rate چیست بخوانید) و برای شما بازدیدکنندگانی وفادار پیدا کند. و این به معنای تغییر ساده‌ای در تجربه کاربری نیست. آخرین باری که وارد وب سایتتان شدید و وب سایت دیر لود شد چه زمانی بود؟ این چیزی است که دوست دارید براتون خاطره شود و همیشه سرعتی عالی برای لود شدن صفحه داشته باشید. این سرعت به همین راحتی‌ها هم به دست نمی‌آید. در زیر آماری معتبر از بزرگان این صنعت براتون آماده کردیم که بهتر است به آن توجه کنید :
- به ازای هر یک ثانیه تاخیر در لود داده‌های وب سایت ۷ درصد باعث افزایش زمان لود می‌شوید. (منبع: Kissmetrics)
- شبکه‌های خبری به علت سرعت پایین به ازای هر ثانیه تاخیر ۱۰٪ درصد از کاربران را از دست می‌دهند. (منبع: Creative Bloq)
- بیشتر از ۵۳٪ کاربران موبایلی وب سایت شما اگر وب سایت شما بالای ۳ ثانیه لود شود، وب سایت شما را کنار خواهند زد. (منبع: DoubleClick)
- وب سایت AliExpress با کاهش ۳۶ درصدی زمان لود وب سایت خود توانست ۱۰.۵ درصد سفارشات خود را افزایش دهد و همچنین ۲۷ درصد به مکالمات بین کاربران خود اضافه کند. (منبع: Akamai)
تمامی این مشکلات و نکات توسط CDN امکان پذیر است.
کاهش TTFB
ما قبلا در بالا ذکر کردیم که اتصال یک CDN به وب سایت وردپرسی شما باعث می‌شود که لی‌تنسی وب سایت شما با کم شدن مسافت فیزیکی کاربران نسبت به سرور کاهش یابد. همچنین میتواند باعث کاهش زمان دستیابی شما به اولین بایت وب سایت شود.(TTFB یا time to first byte)
در تعریف ساده TTFB باید بگویم که برای دریافت اولین بایت داده‌های وب سایت، مرورگر موظف است زمانی منتظر بماند. هرچقدر که این زمان بیشتر باشد، لود وب سایت نیز دیرتر انجام می‌شود. ولی پیشنهاد مهمی برای شما داریم و آن این است که حتما مقاله TTFB چیست را مطالعه نمایید تا باعث بهینه سازی زمان بارگذاری سایت خود شوید.
یک تصور غلط در رابطه با محاسبه TTFB این است که بیشتری‌ها تصویر می‌کنند که زمان دستیابی مرورگر به اولین بایت وب سایت بعد از بررسی DNS می‌باشد که این تصوری کاملا اشتباه است. زمان تاخیر TTFB به لی‌تنسی وب سایت شما بستگی دارد و هرچه پایین‌تر باشد TTFB شما نیز پایین‌تر است.
به طور کلی لود شدن اولین بایت در وب سایت باید ۳ مرحله پردازش، تاخیر و لی‌تنسی را بگذراند. TTFB بالا در وبسایت شما ممکن است به علت کدنویسی اشتباه ویا استفاده اشتباه از سیستم کش باشد.ولی مکان کاربران نیز یکی از دلایل موجود می‌باشد. ما با انجام آزمایشی تفاوت فعال بودن و نبودن CDN را در TTFB وب سایتمان بررسی کردیم که نتیجه آن به صورت زیر می‌باشد.
TTFB وب سایت بدون CDN
ما در ابتدا یک تست را بدون فعالسازی CDN انجام دادیم که در نتیجه تست زمان لود وب سایت ۱.۴۵ ثانیه نمایش داده شد که از این زمان ۱۳۶ میلی ثانیه اش به TTFB وب سایت مربوط بود.
TTFB وب سایت پس از فعالسازی CDN
پس از فعالسازی CDN و تست دوباره وب سایت، همانطور که مشاهده می‌کنید زمان لود وب سایت ۷۸۸ ثانیه و TTFB وب سایت نیز 37 میلی‌ثانیه شده است. حال وقت آن است که بگویید، واو CDN چه تغییری ایجاد کرد.
CloudFlare
CDN
افزایش سرعت سایت
طراحی سایت
ساخت سایت
طراحی سایت شرکتی
طراحی سایت فروشگاهی
سئو سایت
قیمت طراحی سایت
مقاله جامع نحوه بهینه سازی تصاویر برای افزایش سرعت سایت
مقاله جامع نحوه بهینه سازی تصاویر برای افزایش سرعت سایت
سرفصل‌های پست
- 1 نحوه بهینه سازی تصاویر برای افزایش سرعت وب سایت
- 2 مزایای قالب بندی تصاویر
- 3 نحوه بهینه سازی تصاویر برای وب و عملکرد بهتر وب سایت
- 3.1 انتخاب فرمت فایل تصویری صحیح
- 3.2 کیفیت و سایز فشرده سازی
- 3.3 متد بهینه سازی lossy و lossless
- 3.4 ابزار‌ها و نرم افزار‌های بهینه سازی تصاویر
- 3.5 تغییر اندازه تصاویر برای مقیاس بندی
- 4 افزونه های بهینه سازی که میتوانید استفاده کنید
- 4.1 افزونه Imagify Image Optimizer
- 4.2 افزونه ShortPixel Image Optimizer
- 4.3 افزونه Optimus Image Optimizer
- 4.4 افزونه WP Smush
- 4.5 افزونه TinyPNG (همچنین فرمت JPEG را نیز فشرده سازی می‌کند)
- 4.6 افزونه ImageRecycle
- 5 تاثیر بهینه سازی تصاویر بر روی وب
- 5.1 تصاویر JPEG بهینه سازی نشده
- 5.2 تصاویر JPEG بهینه سازی شده
- 6 استفاده از فرمت SVG
- 7 بهترین روش‌ها
نحوه بهینه سازی تصاویر برای افزایش سرعت وب سایت
هیچ کس به دنبال این نیست که گوگل را نسبت به وب سایتش متنفر سازد، خوشبختانه، شما با بهینه سازی تصاویر میتوانید عملکرد وب سایتتان را بهبود بخشید. یکی از مشکلات موجود در قالب بندی تصاویر و عکس ها، کاهش کیفیت شدید پس از کم حجم کردن تصاویر می‌باشد، که این موضوع به نوبه خود خیلی مهم است و در دید کاربران نسبت به طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی،قیمت طراحی سایت) شما تاثیر گذار است. بهینه سازی تا وقتی خوب است که با کم کردن حجم باعث کاهش کیفیت و زشت شدن تصویر نشوید. در این مقاله به شما نکاتی را ارائه می‌دهیم که اجازه می‌دهد تصاویر و عکسها را به اندازه‌ای کم حجم و بهینه سازی کنید که کیفیت بالای خود را از دست ندهند و بتوانید آنها را با افتخار در وب سایتتان به نمایش بگذارید.
بنابراین بیایید نگاهی به نحوه قالب بندی تصاویر بدون زشت کردن آنها و همچنین نحوه بهینه سازی عکس ها برای افزایش سرعت وب سایت بیاندازیم.
مزایای قالب بندی تصاویر
در ابتدا بهتر است که پاسخ این سوالات را بدانیم : چرا باید تصاویر وب سایتمان را قالب بندی کنیم ؟ مزایای این کار چیست ؟
در سئو عکس چندین مزیت مختلف وجود دارد. با توجه به تاریخچه HTTP مربوط به 15 سپتامبر 2017 به طور میانگین 65 درصد حجم یک صفحه وب به عکسها و تصاویر آن بستگی دارد. بنابراین ، هنگامی که میخواهید وب سایت وردپرسی خود را برای افزایش سئو و سرعت سایت، بهینه سازی کنید ، با توجه به این آمار باید عنصر مهمی به نام تصاویر را در اولین مرحله بهینه سازی قرار دهید. این عنصر نسبت به اسکریپت‌ها و فونت‌ها اهمیت بسیار بیشتری دارد.
و از قضا ، یکی از راحت‌ترین و بهترین راه‌های بهینه سازی سئو سایت ، بهبود حجم تصاویر است ولی بیشتر مدیران وب سایت‌ها به آن توجه نمی‌کنند.
در اینجا نگاهی به مزایای اصلی بهینه سازی عکسها می‌پردازیم:
- سرعت لود صفحه شما را بهبود می‌بخشد و در نتیجه باعث سئوی بهتر و نتیجه ای موفقیت آمیز در موتورهای جستو می‌گردد، البته بارها درباره اهمیت عکس در مقالات اشاره کردیم و در سئو داخلی گفتیم که گوگل چه میزان در سرعت سایت و بهینه سازی تصاویر اهمیت می‌دهد. کم شدن دیدگاه‌ها ، کمتر شدن بازدید کنندگان روزانه و … میتواند به دلیل کم بودن سرعت و بیش از حد منتظر ماندن کاربران برای لود وب سایت باشد. اگ شما قصد دارید سرعت وب سایت خود را بهبود بخشید میتوانید از خدمات منحصربه‌فرد افزایش سرعت سایت سئوراز استفاده نمایید.
- فایل‌های بک آپ (پشتیبان) خیلی سریع تر ساخته می‌شوند.
- باعث افزایش رتبه سایت در گوگل می‌شود. وب سایت شما نسبت به قبل رنک بهتری در صفحات موتور جستجو می‌گیرد. فایل‌های سنگین باعث کاهش سرعت وب سایت شما می‌شوند و موتورهای جستجوگر از وب سایت‌های کند متنفر هستند. گوگل دوست دارد که تصاویر شما را هرچه سریع‌تر در بخش تصاویر خود مرتب و ایندکس کند. تا به حال کنجکاو نشدید که چه مقدار از ترافیک وب سایت شما از طریق بخش تصاویر گوگل می‌باشد ؟ وارد گوگل آنالیتیکس وب سایت خود شده و طبق این آموزش ، ترافیک ورودی از بخش تصاویر گوگل خود را بررسی کنید.
- تصاویر کم حجم ، ترافیک کمتری مصرف می‌کنند که شبکه اینترنت و مرورگرها از همچنین تصاویری استقبال می‌کنند.
- حجم کمتری از سرور شما را اشغال می‌کند. (بستگی به تعداد تصاویر شاخص بهینه شده شما دارد)
نحوه بهینه سازی تصاویر برای وب و عملکرد بهتر وب سایت
هدف اصلی در بهبود تصاویر سایت ، پیدا کردن تعادل بین کمترین حجم و بهترین کیفیت قابل قبول است. تقریبا برای روش‌های بهینه سازی بیشتر از یک راه وجود دارد. یکی از بهترین راه‌های موجود انجام بهینه سازی در تصاویر ، فشرده سازی عکس قبل از آپلود در سایت می‌باشد که در بیشتر اوقات در نرمافزارهایی مانند Adobe Photoshop و Affinity Photo امکان پذیر است. بعضی از بهینه سازی‌ها نیز توسط افزونه‌ها انجام می‌شوند که در ادامه مقاله به آنها می‌پردازیم.
دو نکته اصلی که در بهینه سازی تصاویر باید به آن توجه کنید ، فرمت فایل و نوع فشرده سازی که استفاده می‌کنید، می‌باشد. با انتخاب بهترین نوع ترکیب بندی فرمت تصویر و بهترین نوع فشرده سازی ، میتوانید به میزان قابل ملاحظه‌ای حجم تصاویر خود را کاهش دهید. شما باید هر تصویر یا هر فرمتی از تصاویر را آزمایش کنید تا متوجه شوید که کدام نوع فشرده سازی بهترین نوع برای آن نوع از فرمت یا تصویر می‌باشد.
انتخاب فرمت فایل تصویری صحیح
قبل از شروع به اصلاح تصاویرتان ، باید بدانید که کدام نوع از فرمت تصویری برای تصاویر شما مناسب است و از انتخاب بهترین فرمت اطمینان یابید. در زیر با فرمت‌هایی که میتوانید در وب سایتتان استفاده کنید آشنا می‌شوید :
- فرمت PNG – با کیفیت‌ترین نوع تصویر را به شما تحویل می‌دهد ولی با حجمی بسیار بالا. برای فشرده سازی تنها از lossless استفاده می‌کند. البته گاهی فرمت PNG از بقیه فرمت‌ها حجم کمتر و کیفیت بهتری دارد و باید تست کرد، مخصوصا در تصاویری که دارای تعداد رنگ کمتر هستند.
- فرمت JPEG – از فشرده سازی lossy و lossless استفاده می‌کند . شما میتوانید سطح کیفیت تصاویرتان را تا دریافت کیفیتی خوب و حجمی قابل قبول کنترل کنید.
- فرمت GIF – تنها از 256 رنگ استفاده می‌کند. بهترین انتخاب برای تصاویر متحرک است و تنها از نوع فشرده سازی lossless استفاده می‌کند.
فرمت‌های دیگری نظیر WebP و JPEG XR نیز وجود دارد ، ولی متاسفانه توسط تمامی مرورگرها پشتیبانی نمی‌شوند. در حالت ایده‌آل، شما برای تصاویر حجیم و پر از رنگ بهتر است که از فرمت JPG (JPEG) استفاده کنید و برای تصاویر ساده، شفاف (Transparent) و یا عکس هایی با تعداد رنگ کمتر از فرمت PNG استفاده کنید.
کیفیت و سایز فشرده سازی
تصویر زیر مثالی از فشرده سازی بیش از حد می‌باشد. تصویر اول ، تصویری با درجه فشرده سازی بسیار پایین و دریافت بهترین کیفیت (ولی با حجمی بالا) می‌باشد . تصویر دوم ، تصویری با درجه فشرده سازی حداکثر و دریافت کیفیت بسیار نامناسب و کم (ولی با حجم کم) می‌باشد.
نکته : تصویر اصلی قبل از فشرده سازی حجمی بالغ بر 2.06 مگابایت را داشته است.
همانطور که مشاهده می‌کنید، تصویر ابتدایی بیشتر از 540 کیلوبایت حجم دارد. به عنوان یک تصویر ، یک تصویر بسیار زیبا و پر کیفیت است. اگر بتوانید صفحه خود را با بقیه تصاویر کمتر از 1 یا 2 مگابایت نگه دارید، حجم قابل قبولی برای یک تصویر است. همچنین در نظر داشته باشید که 590 کیلوبایت نسبت به تصویر اصلی یک چهارم شده است. تصویر دوم که از نظر کیفیت وحشتناک می‌باشد ولی 39 کیلوبایت حجم دارد. کاری شما باید انجام دهید ، ایجاد کردن تصویری با کیفیت و حجمی میانه بهترین و بدترین کیفیت می‌باشد.
بنابراین ما تصویر را دوباره فشرده سازی کردیم ولی این بار درجه فشرده سازی را در حالت معمولی (Medium در فتوشاپ) قرار دادیم. کیفیت تصویر قابل قبول و حجم آن نیز 132 کیلوبایت شد که برای یک تصویر با چنین کیفیت بالایی قابل قبول است. این تصویر حدودا 4x کوچکتر از تصویر ابتدایی با فشرده سازی کم و 8x کوچکتر از تصویر اصلی می‌باشد.
به طور معمول ، تصاویر ساده PNG باید 100 کیلوبایت یا کمتر باشند تا وب سایت بهترین عملکرد را داشته باشد.
متد بهینه سازی lossy و lossless
یکی از مهم‌ترین مورد‌هایی که باید در بهینه سازی تصاویر به آن توجه کنید، دانستن و انتخاب بهترین متد بهینه سازی عکسها با انتخاب یکی از دو متد lossy و lossless می‌باشد.
Lossy : یک فیلتر می‌باشد که هنگام بهینه سازی بخشی از داده‌های تصویر را حذف می‌کند. این متد تصویر را ضعیف می‌کند و باید هنگام بهینه سازی توجه لازم را در کیفیت تصاویر داشته باشید. حجم تصاویر در این متد بسیار کاهش پیدا می‌کند. در نرمافزارهایی مانند Adobe Photoshop ، Affinity Photo و دیگر نرم افزار‌های موجود میتوانید با انجام تنظیماتی از این متد استفاده کنید و همچنین کیفیت تصویر را کنترل کنید. برای مثال در Adobe Photoshop هنگام گرفتن خروجی JPEG از شما متد خروجی را درخواست می‌کند که میتوانید از متد lossy compression و lossless compression استفاده کنید.
Lossless : یک فیلتر می‌باشد که هنگام بهینه سازی، داده‌ها را فشرده سازی می‌کند. این متد کیفیت تصویر را کاهش نمی‌دهد ولی تصاویر نباید از قبل فشرده سازی شده باشد تا به بهترین روش عمل کند. با نرم افزار‌هایی مانند Adobe Photoshop ، Affinity Photo و … و همچنین بعضی از افزونه‌های وردپرس نیز با متد Gzip این کار را انجام می‌دهند.
بهتر است که برای هر تصویر تکنیک‌های فشرده سازی مختلف را بررسی کنید تا بهترین کیفیت و حجم را پیدا کنید. اگر نرم افزار‌های شما گزینه ذخیره سازی مخصوص وب (Save for Web در فتوشاپ منوی File) را دارند ، مطمئن شوید که به صورت وب ذخیره سازی کنید. این گزینه در بیشتر ویراستار‌های تصویر موجود است و به شما اجازه می‌دهد که به اندازه مورد نیاز تصویر را بهینه سازی کنید. شما در فشرده سازی مقداری کیفیت تصویرتان را از دست می‌دهید ، بنابراین باید توجه کنید که این مقدار را کنترل کنید و بهترین را انتخاب کنید.
ابزار‌ها و نرم افزار‌های بهینه سازی تصاویر
ما در اینجا چندین ابزار و نرم افزار را به شما معرفی میکنیم که بعضی‌هایشان پولی و بعضی‌هایشان رایگان است و با آنها میتوانید تصاویرتان را بهینه سازی کنید. بعضی‌هایشان بهینه سازی را به صورت دستی به خودتان می‌سپارند و بعضی‌هایشان به صورت خودکار بهینه سازی را برایتان انجام می‌دهند. بنده به شخصه طرفدار نرم افزار Affinity Photo هستم ، که هم ارزان است و هم بیشتر امکانات نرم افزار Adobe Photoshop را دارد.
بعضی از ابزار‌ها و نرم افزار‌های خوب برای بهینه سازی تصاویر :
- Adobe Photoshop
- Gimp
- Paint.NET
- GIFsicle
- JPEGtran
- JPEG Mini
- OptiPNG
- pngquant
- FileOptimizer
- ImageOptim
- TinyPNG
- Trimage
تغییر اندازه تصاویر برای مقیاس بندی
یکی دیگر از مشکلات موجود در بهینه سازی تصاویر، هنگامی رخ می‌دهد که باید آنها را برای مقایس بندی یا سایز (Scale) اقدام به آپلود کنید و اجازه ندهید که CSS اندازه آنها را تغییر دهد. این بخش به اندازه فشرده سازی مهم نیست، اما نکته دیگریست تا تصاویر شما با حداکثر سرعت ممکن در تمامی دستگاه‌ها اجرا شوند. اگر از وردپرس استفاده می‌کنید ، به صورت پیشفرض تصاویر شما توسط سیستم تغییر اندازه داده می‌شوند. در بخش تنظیمات> رسانه ، میتوانید حداکثر طول و عرض تصاویر را تعیین کنید. با اینکار دیگر CSS تصاویر شما را با کدگذاری‌های خود کوچک نمی‌کند.
بخش رسانه وردپرس به صورت پیشفرض ریز تصویرهایی (thumbnails) با توجه به تنظیمات وردپرستان می‌سازد. با این‌حال ، تصویر اصلی بدون تغییر سایز و به همان شکل باقی می‌ماند. اگر میخواهید در حجم وب سایتتان صرفه جویی کنید و تصاویر اصلی را ذخیره سازی نکنید میتوانید از افزونه رایگانی به نام Imsanity استفاده کنید.
افزونه Imsanity به شما اجازه می‌دهد که تمامی تصاویر وب سایت خود را محدود به یک سایز کنید و تا تصاویر بزرگ‌تر از یک اندازه‌ای در رسانه شما باقی نمانند و حذف شوند. افزونه Imsanity بلافاصله بعد از آپلود تصویر به وردپرس متصل می‌شود، ولی قبل اینکه وردپرس روی تصویر عملیاتی انجام دهد ، تصویر را نسبت تنظیماتی که ایجاد نموده اید، بررسی و تنظیمات را اعمال می‌کند. بنابراین با توجه به کاری که افزونه انجام می‌دهد متوجه می‌شوید که به صورت پیشفرض وردپرس نیز همین کار را می‌کند ولی تنها تصویراصلی را قبل از آپلود کامل تغییر سایز نمی‌دهد.
افزونه های بهینه سازی که میتوانید استفاده کنید
خوشبختانه ، در وردپرس نیازی نیست که هیچ یک از فشرده سازی‌ها و تغییر سایزها را به صورت دستی انجام دهید. شما میتوانید با نصب افزونه‌هایی یک سری از کار‌های بهینه سازی تصاویر را به صورت خودکار انجام دهید. در زیر به افزونه‌هایی اشاره میکنیم که بلافاصله پس از دانلود شروع به انجام عملیات بهینه سازی تصاویر می‌کنند و تصاویری مطلوب و بهینه تحویل شما می‌دهند. همچنین، این افزونه‌ها امکان بهینه سازی تصاویری که از قبل آپلود کرده‌اید را نیز دارند.این یک ویژگی بسیار مفید است، به خصوص اگر شما وب سایتی پر از تصاویر آپلود شده داشته باشید. در این مقاله تعدادی از بهترین افزونه‌های تصاویر را به شما معرفی میکنیم که با آنها میتوانید بهترین عملکرد را در وب سایت خود داشته باشید.
فقط توجه داشته باشید که نباید تنها به افزونه‌ها تکیه کنید. به عنوان مثال، در بعضی از سرورهای میزبانی کم کیفیت شما اجازه ندارید که تصاویر و فایل‌هایی بیشتر از 2 مگابایت آپلود کنید و همچنین علاوه‌بر خود در نظر گیری سرورهای میزبانی کم کیفیت ، به طور کلی شما نباید تصاویری بیشتر از 2 مگابایت در بخش رسانه وردپرس آپلود کنید ، زیرا این تصاویر به سرعت حجم وب سایت شما را پر می‌کنند و شما را مجبور می‌کنند که مقدار حجم وب سایت خود را افزایش دهید.
افزونه Imagify Image Optimizer
افزونه Imagify توسط تیم سازنده Wp Rocket ساخته شده است، که افزونه‌هایی بسیار عالی در خصوص بهینه سازی سرعت وب سایت ارائه می‌کند. این افزونه با Woocommerce ، WP Retina و NextGen Gallery سازگار است. همچنین با ویژگی Bulk (بهینه سازی تعداد بالا) میتوانید تصاویرتان را با 3 سطح مختلف فشرده سازی ، عادی (نرمال) ، خشونت آمیز (aggressive) ، فوق العاده (ultra) فشرده سازی کنید.
این افزونه امکان بازسازی نیز دارد و درصورتی که از بهینه سازی راضی نبودید میتوانید دوباره درخواست بازسازی تصاویر را بدهید تا دوباره تصاویر شما را به حالت اولیه برگرداند و دوباره بهینه سازی کند. این افزونه یک نسخه رایگان و یک نسخه تجاری دارد. با هر اکانت رایگان شما ماهیانه اجازه دارید که 25 مگابایت تصویر را بهینه سازی کنید.
خلاص شدن از تصاویر اصلی و تغییر اندازه تصاویر بزرگ نیز در این افزونه امکان پذیر است.
افزونه ShortPixel Image Optimizer
افزونه ShortPixel Image Optimizer یک افزونه رایگان است که به شما این امکان را می‌دهد که در هر ماه 100 تصویر را بهینه سازی کنید و چندین نوع فرمت مختلف مانند JPEG ، PNG ، GIF ، WebP و همچنین فرمت PDF را پشتیبانی می‌کند و برای بهینه سازی از هر دو متد lossy و lossless میتواند استفاده کند. این افزونه میتواند تصاویر CMYK را به RGB تبدیل کند و با انتقال تصاویر شما به فضای ابری و سپس بازگرداندن آنها به وب سایت وردپرسی شما در بهینه سازی پردازنده و حافظه RAM هاست شما نیز کمک می‌کند و همچنین یک نسخه پشتیبان از تصویر اصلی شما نیز تهیه می‌کند که در صورتی که از کیفیت راضی نبودید ، تصویر اصلی را بازگردانید. در بهینه سازی تصاویر در این افزونه محدودیت حجمی وجود ندارد.
افزونه Optimus Image Optimizer
افزونه Optimus Image Optimizer از متد lossless برای بهینه سازی تصاویر شما استفاده می‌کند. همانطور که در بالا گفتیم در متد lossless هیچ اطلاعاتی از تصویر شما پاک نمی‌شود. این افزونه از افزونه‌های WooCommerce ، Multi-Site پشتیبانی می‌کند و یک بخش bulk بسیار خوب دارد تا تصاویر آپلود شده قدیمی را نیز بهینه سازی کند. این افزونه همچنین ازWP Ratina نیز پشتیبانی می‌کند.
یک نسخه رایگان و یک نسخه تجاری برای این افزونه ارائه می‌شود. در نسخه تجاری که شما می‌بایست سالیانه هزینه اشتراک را بپردازید ، حق بهینه سازی بی‌نهایت تصویر را دارید. اگر این افزونه را با افزونه Catch Enabler ترکیب کنید ، امکان استفاده از فرمت WebP که فرمتی برای بهینه سازی تصاویر می‌باشد و به تازگی توسط گوگل توسعه داده شده است، نیز خواهید داشت.
افزونه WP Smush
افزونه WP Smush شاید یکی از پرطرفدار‌ترین و پراستفاده‌ترین این لیست باشد نیز در دو نسخه رایگان و تجاری عرضه شده است. این افزونه اطلاعات پنهان در تصاویر را کاهش می‌دهد تا تصویر بدون کاهش کیفیت ، کم حجم شود. افزونه smush پس از آپلود تصاویر به سرعت تصاویر را اسکن کرده و آنها را بهینه سازی می‌کند و همچنین تصاویر قدیمی شما را نیز میتواند بهینه سازی کند.
در نسخه رایگان میتوانید ۵۰ تصویر را در حال عادی بهینه کنید و اگر نیاز به بهینه سازی دستی داشتید نیز میتوانید هر تصویری که دوست دارید را به صورت دستی بهینه سازی کنید. Smush میتواند فرمت‌های JPEG ، PNG و GIF را بهینه سازی کند . در حالت رایگان Smush تصاویر زیر ۱ مگابایت را بهینه سازی می‌کند.
افزونه TinyPNG (همچنین فرمت JPEG را نیز فشرده سازی می‌کند)
افزونه TinyPNG که تحت فضای ابری TinyPNG و TinyJPG میتواند ماهیانه ۱۰۰ تصویر را برای شما بهینه سازی کند نیز یکی از بهترین‌های وردپرس می‌باشد و میتواند تصاویر PNG و JPEG شما را بهینه سازی کند.
این افزونه به طور خودکار تصاویر جدید و قدیمی وردپرس شما را بهینه سازی می‌کند. این افزونه همچنین ساختار CMYK را به RGB تبدیل می‌کند، به گفته سازنده این پلاگین تصاویر JPEG را تا ۶۰ درصد و تصاویر PNG را تا ۸۰ درصد بهینه سازی می‌کند و هیچ تغییری در کیفیت اصلی تصویر ایجاد نمی‌شود. این افزونه محدودیتی در حجم تصاویر ندارد صرفا با یک ایمیل میتوانید از خدمات این افزونه استفاده نمایید.
افزونه ImageRecycle
افزونه ImageRecycle ، افزونه ایست که تصاویر و فایل‌های PDF شما را به صورت خودکار بهینه سازی می‌کند. این افزونه نه تنها که روی بهینه سازی تصاویر بلکه در بهینه سازی فایل‌های PDF نیز تمرکز دارد. یکی از بهترین امکانات این افزونه امکان تعیین کردن کمترین حجم تصویر برای بهینه سازی است. برای مثال ، اگر نمی‌خواهید که تصاویر با حجم کمتر از ۸۰ کیلوبایت بهینه سازی شوند کافیست که ۸۰ کیلوبایت را حداقل حجم بهینه سازی قرار دهید. و این باعث می‌شود که شما از بیش از حد فشرده نشدن تصاویرتان اطمینان یابید. این افزونه همچنین شامل Bulk برای تصاویر قدیمی (امکان بهینه سازی گروهی عکس های از قبل آپلود شده) و همچنین امکان تغییر اندازه خودکار نیز می‌باشد. نکته : این افزونه یک تست ۱۵ روزه به کاربران خود هدیه می‌دهد ولی به طور کلی افزونه‌ای تجاری به حساب می‌آید و برای استفاده از آن باید هزینه ای بپردازید. در این افزونه تصاویر در سرور های واسطه ای سازنده آپلود و بهینه سازی می‌شوند. برای خرید این افزونه نیازی نیست که به صورت اشتراکی هزینه پرداخت کنید ولی باید بسته‌هایی مخصوص خریداری کنید که در آن تعداد تصاویری که شما مجاز به فشرده سازی هستید معین شده است که بسته ها از ۱۰ دلار برای ۱۰ هزار تصویر شروع می‌شود.
تاثیر بهینه سازی تصاویر بر روی وب
بعد از توضیحات کامل نحوه کاهش حجم عکسها وقت بررسی تاثیر آن و تغییرات در سرعت لود سایت می‌باشد. به همین دلیل تصمیم گرفتیم با انجام آزمایش به شما نشان دهیم که بهینه سازی تصاویر چه تاثیری بر روی وب سایت شما می‌گذارد.
تصاویر JPEG بهینه سازی نشده
در ابتدا ما ۶ تصویر بهینه سازی نشده را در وب سایت آپلود کردیم که تمامی آنها سایزی بیشتر از ۱ مگابایت داشتند. این آزمایش را ما ۵ بار تکرار کردیم تا از تصادفی نبودن نتایج اطمینان یابیم. همانطور که در زیر مشاهده می‌کنید ، زمان لود وب سایت ما ۱.۵۵ ثانیه در حالتی که صفحه ما ۱۴.۷ مگابایت حجم دارد می‌باشد.
تصاویر JPEG بهینه سازی شده
حال پس از بهینه سازی تصاویر با استفاده از افزونه Imagify و حالت خشونت آمیز ، همانطور که مشاهده می‌کنید ، زمان لود صفحه ما ۴۷۶ میلی ثانیه و حجم صفحه ۲.۹ مگابایت شده است . ( این بررسی را نیز ۵ بار تکرار کردیم تا اطمینان کامل حاصل کنیم)
پس از مقایسه نتایج متوجه شدیم که زمان لود وب سایت ما ۵۴.۸۸ درصد و حجم صفحه ۸۰.۲۷ درصد کاهش یافته است.
تقریبا هیچ نوع بهینه سازی دیگری وجود ندارد که بتواند زمان لود وب سایت شما را ۵۰ درصد کاهش دهد. برای همین است که بهینه سازی تصاویر خیلی مهم است و کار سختی نیز نمی‌باشد زیرا تمامی این عملیات‌ها با استفاده از افزونه‌ها صورت می‌پذیرد هر چند باید قبول کرد به اندازه کار دست قوی نیست ولی بد هم نیست. این روش یکی از بهترین روش‌های افزایش سرعت وردپرس است. دیگر راه بهینه سازی سرعت وب سایت شما ، استفاده از یک میزبانی وب مخصوص و مربوط به وردپرس می‌باشد.
با بهینه سازی تصاویر شما خیلی راحت میتوانید خطاهای Optimize Images و Serve scaled images در زمان تست سرعت لود صفحه در ابزارهای Google PageSpeed Insights یا GTmetrix را نیز برطرف کنید.
استفاده از فرمت SVG
توصیه دیگری که می‌توانیم به شما بکنیم ، استفاده از SVG ها در کنار تصاویرتان است. SVG ها یک نوع از فرمت‌های وکتور می‌باشند که برای لوگوها ، آیکون‌ها ، فایل‌های تکست و دیگر تصاویر ساده استفاده می‌شوند.
در زیر دلایل استفاده از SVG ها را به شما می‌گوییم:
- فایل‌های SVG در ویرایشگر‌های تصاویر و مرورگرها امکان تغییر مقیاس دارند و برای طراحان وب و گرافیک کاران رویایی طراحی شده است.
- گوگل همانند PNG و JPEG ، فایل‌های با فرمت SVG را نیز ایندکس می‌کند و این نگرانی شما را بابت سئو برطرف می‌کند برخلاف تصاویر با تکنولوژی base64 که آنها تا این تاریخ ایندکس نمی‌کند.
- فایل SVG در بیشتر اوقات (نه همیشه) حجمی کمتر از فایل‌های JPEG و PNG دارند. این مهم باعث افزایش سرعت لود وب سایت می‌شود.
در زیر تفاوت ۳ فرمت PNG و JPEG و SVG را در تصاویر وکتور(برداری) می‌بینید.
فرمت JPEG (پس از بهینه سازی 81.4 کیلوبایت)
فرمت PNG (پس از بهینه سازی 85 کیلوبایت)
فرمت SVG ( پس از بهینه سازی 6 کیلوبایت)
همانطور که در بالا دیدید ، تصویر SVG ساده ما حدودا ۹۲.۵۱ درصد از فایل JPG و همچنین حدودا ۹۲.۸۳ درصد نیز از PNGکم حجم تر است.
بهترین روش‌ها
در زیر به برخی از شیوه‌های عمومی در مورد چگونگی بهینه سازی تصاویر وب می‌پردازیم :
- تا جایی که ممکن است از تصاویر وکتور به جای تصاویر PNG و JPEG استفاده کنید.
- از CDN برای افزایش سرعت لود تصاویر توسط کاربران در هرجای جهان استفاده کنید.
- تصاویرتان را با استفاده از فشرده سازی Gzip ، بهینه سازی کنید.
- بخش‌های غیر ضروری تصاویر را حذف کنید.
- بخش‌های سفید تصاویر را پاک کنید و توسط CSS آنها را بسازید.
- از افکت‌های CSS3 تا جای ممکن استفاده کنید.
- تصاویرتان را با ابعاد خودشان در html و css سایت لود کنید (اشاره به خطای serve scaled images).
- برای نوشتن متن بر روی تصاویر از وب فونت‌ها استفاده کنید. (آنها عکس را بهینه تر می‌کنند و امکان تغییر اندازه را در تصاویر و نوشته محیا می‌کنند)
- از تصاویر شطرنجی تنها در بخش‌هایی که اشکال و جزئیات وجود دارد استفاده کنید.
- از bit-depth برای کاهش پلات رنگ استفاده کنید.
- در جاهایی که میتوانید از متد lossy برای فشرده سازی استفاده کنید.
- در صورت نیاز به انیمیشن از GIF استفاده کنید.
- برای پیدا کردن بهترین تنظیم در تصاویر با فرمت‌های مختلف، آنها را آزمایش کنید.
- اگر بهترین کیفیت و بهترین جزئیات را نیاز دارید از فرمت PNG استفاده کنید.
- برای تصاویر اصلی و اسکرین شات‌ها از JPEG استفاده کنید.
- مقیاس تصاویر را نسبت به صفحه نمایش تنظیم کنید تا تعداد پیکسل‌ها کاهش یابد.
- هر Metadata غیر ضروری را حذف کنید.
- عملیات فشرده سازی را تا جای ممکن خودکار کنید.
- در بعضی موارد شما نیازمند لود تنبل برای نمایش تصاویر هستید (مقاله جامع lazy loading چیست را مطالعه نمایید).
- در ابزاری مانند photoshop تصاویر را به صورت Save for Web خروجی بگیرید، این گزینه در سربرگ File موجود است.
هنگامی که شما از بهترین شیوه برای بهینه سازی سازی تصاویر و قالب‌بندی آنها استفاده کردید . سایت شما در مرورگرها ، موتورهای جست‌وجو ، شبکه‌ها و همچنین توسط کاربران سریع‌تر لود می‌شود.
لود تنبل تصاویر و ویدیوهای وردپرس برای افزایش سرعت سایت
لود تنبل تصاویر و ویدیوهای وردپرس برای افزایش سرعت سایت
سرفصل‌های پست
- 1 پیاده سازی لود تنبل برای تصاویر و ویدیوها
- 2 لود تنبل چگونه کار می‌کند؟
- 3 لود تنبل وردپرس :
- 3.1 آیا تصاویر و ویدیوها واقعا در کاهش سرعت طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی) موثر هستند ؟
- 4 بهبود سرعت لود صفحه از طریق افزونه‌های لود تنبل
- 4.1 1 – BJ Lazy Load
- 4.2 2 – Lazy Load XT
- 4.3 3 – افزونه a3 Lazy Load
- 4.4 4 – افزونه Rocket Lazy Load
- 5 نتیجه گیری و توصیه‌ها
پیاده سازی لود تنبل برای تصاویر و ویدیوها
به طور کلی میانگین حجم صفحات وب سایت‌ها به همراه تصاویر و ویدیوها 3376 کیلوبایت می‌باشد که بالای ۷۰ درصد آن راHTTP Archive اشغال می‌کند. این مقدار حجم در مرورگر بازدیدکنندگان وب سایت برای مشاهده و دانلود بسیار زیاد است و این حجم با پیشرفت وب سایت و افزایش مقالات و تصاویر بیشتر نیز می‌شود و این افزایش در کاهش سرعت و کاهش رتبه سئو تاثیرگذار است. (برای ارزیابی حجم محتوای سایت خود میتوانید از ابزارهای سئو و یا از سایت httparchive.orgاستفاده نمایید.)
به هر حال ، تمامی این منابع سنگین باید توسط صفحه وب دانلود شوند و یک هزینه بسیار بالا برای کاربرانی که باید کلی برای دانلود این منابع حجیم منتظر بمانند، از جمله فایل‌هایی که در ابتدای نمایش صفحه وب قابل نمایش نیستند به وجود می‌آورد مخصوصا در کشور ما ایران با تعرفه‌های بالای اینترنت و حجم و سرعت‌های نامناسب.
اینجا ، جایی است که لود تنبل (Lazy Load) وارد صحنه می‌شود. لود تنبل یک تکنیک بهینه‌سازی صفحات وب سایت است که توسط آن هنگام ورود به یک صفحه وب تنها اطلاعات قابل مشاهده لود می‌شود و بقیه اطلاعاتی که در زیر وجود دارند ، پس از اسکرول کردن شروع به لود شدن می‌کنند.
لود تنبل یا Lazy Load یکی از اقداماتی است که گوگل در صورت مشاهده بسیار هیجان زده می‌شود و به وب سایت شما اهمیت می‌دهد و همچنین از این تکنیک در وب سایت‌هایی که مقالات و صفحات تعداد زیادی از ویدیوهای ibed شده و تصاویر با رزولوشن بالا را در خود جای داده‌اند، به اجبار باید استفاده کرد.
لود تنبل چگونه کار می‌کند؟
لود تنبل به شکل زیر کار می‌کند :
- مرورگر صفحات وب را به صورت DOM در می‌آورد که در این مدل هنگام لود صفحه، تصاویر و ویدیوها لود نمی‌شوند.
- جاوااسکریپت با تکنیکی به نام Determine تصاویر و ویدیوها را براساس محتوایی که پس از لود صفحه مشاهده می‌شود، دانلود و نمایش می‌دهد. تصاویر و ویدیوهایی که در پایین صفحه هستند نیز به همین ترتیب پس از اسکرول دانلود و نمایش داده می‌شوند.
- دانلود و نمایش فایل‌های اضافی را تا زمانی که کاربر به محل مشخص فایل ویدیویی اسکرول نکند ، به تاخیر می‌اندازد و سپس بعد از اسکرول تمامی فایل‌های مشخص شده برای لود تنبل آن قسمت لود می‌شوند.
نتیجه نهایی آن شد که تصاویر در لود اولیه، دانلود نمی‌شوند و همچنین ویدیوها تا زمانی که نیاز نباشد لود نمی‌شوند. اینکار میتواند بهبود قابل توجهی در عملکرد وب سایت‌هایی که تصاویر با رزولوشن بالا و ویدیوهای ibed شده در خود جای داده‌اند، ایجاد کند و در نتیجه باعث بهبود سرعت ساخت سایت شود اگر از تصاویر حجیم در وب سایتتان استفاده می‌کنید ، لود تنبل به سرعت لود صفحه شما خیلی کمک می‌کند.
لود تنبل وردپرس :
مانند دیگر مشکلاتی که در وبسایت رخ می‌دهد ، برای ایجاد لود تنبل در وردپرس نیز افزونه‌هایی ارائه شده است که میتوانید از طریق آن لود تنبل را فعال و مشکل کند لود شدن صفحات را از بین ببرید. درواقع ، تعداد خیلی زیادی افزونه‌ی رایگان در مخزن افزونه‌های وردپرس موجود است که شما میتوانید برای لود تنبل تصاویر و ویدیو‌هایتان استفاده کنید.
پس از بررسی 12 افزونه مربوط به لود تنبل و فعال کردن و تست چندین باره ، ما 4 افزونه خیلی حرفه ای را که بهبود قابل ملاحظه ای در عملکرد وب سایت شما ایجاد می‌کنند را شناسایی کردیم و قصد داریم در ادامه معرفی کنیم ولی قبل از آن به سوالی پاسخ دهیم:
آیا تصاویر و ویدیوها واقعا در کاهش سرعت سایت موثر هستند ؟
قصد داریم با یک ارزشیابی کوچک، تاثیر تصاویر و ویدیوها را بر سرعت سئو سایت به شما نمایش دهیم. برای نمایش ارزشیابی، تصمیم گرفتیم که روی هاست سئوراز ، یک وردپرس نصب کنیم. پوسته 2016 وردپرس که بدون هیچ افزونه بهینه سازی و تکنیک ذخیره کش و… در وردپرس موجود بود را فعال کردیم. تصویر زیر نمایانگر نتایج آنالیز و بررسی ارزشیابی سئو و سرعت سایت در ابزار آنلاین pingdom قبل از اضافه کردن تصاویر و ویدیو می‌باشد.
همانطور که مشاهده می‌کنید ، وب سایت بسیار سبک است و حجم صفحه کوچکتر از 155 کیلوبایت است و زمان لود صفحه نیز کمتر از نیم ثانیه است و برای پیدا کردن و حل کردن مشکلات در این وضعیت باید خیلی سخت‌گیر باشیم. به نظر شما هنگامی که یک تصویر حجیم و یک ویدیو ibed شده از یوتیوب را در صفحه قرار دهیم ، در این نتایج چه رخ می‌دهد؟
بله ، کلمه واو بسیار در این وضعیت مناسب است. حجم صفحه به 1.7 مگابایت افزایش یافت و زمان لود نیز 3 برابر شد .
پوسته 2016 وردپرس از هر لحاظ که بررسی کنید سبک طراحی شده است و به همین دلیل است که با اضافه کردن تصاویر حجیم و ویدیوها هنوز هم سریع لود می‌شود. ولی به هر حال ، با این ارزشیابی کوچک متوجه شدیم که تصاویر و ویدیوها در کاهش سرعت لود و افزایش بیش از حد حجم صفحه خیلی تاثیر گذارند.
بهبود سرعت لود صفحه از طریق افزونه‌های لود تنبل
افزونه‌های BJ Lazy Load ، Lazy Load XT ، a3 Lazy Load و Rocket Lazy Load چهار افزونه‌ای هستند که سرعت تحویل صفحات وب را به میزان قابل توجهی افزایش می‌دهند. بیایید بررسی کنیم که هرکدام از این افزونه‌ها به نوبه خود چه کارهایی انجام می‌دهند. چندین افزونه دیگر هم مورد آزمایش قرار گرفتند ولی آن‌طور که باید در سرعت وب سایت تاثیر گذار نبودند.
همانطور که درحال امتحان افزونه‌های لود تنبل هستید ، قبل و بعد از فعالسازی میزان تغییرات را بررسی کنید تا با این کار میزان رضایت خود را بسنجید و اطمینان یابید که به آن سرعتی که در نظر داشتید رسیده‌اید.
1 – BJ Lazy Load
افزونه BJ Lazy Load یک افزونه بسیار محبوب در بین کاربران وردپرسی می‌باشد و در بیشتر از 40 هزار وب سایت وردپرسی نصب شده و فعال است و بر اساس 60 بازخورد منتقدان ، رتبه 4.1 را از 5 دریافت کرده است.
نصب و فعالسازی بی درد سری دارد و کافیست وارد بخش افزودن افزونه در وردپرس شوید عبارت BJ Lazy Load را جست‌وجو کنید ، بعد از یافتن افزونه آن را نصب کنید ، سپس فعالسازی کنید . بعد از فعالسازی در منوی تنظیمات یک زیر منو به نام BJ Lazy Load ساخته می‌شود.
تمامی تنظیمات لود تنبل برای شما به صورت پیشفرض انجام خواهد شد و شما درصورتی که یکی از تنظیمات توسط پوسته شما قابل انجام نبود ، میتوانید مشکل را شناسایی و با غیرفعالسازی آن قسمت مشکل را حل کنید.
یک گزینه که در این افزونه و در دو افزونه‌ی دیگر معرفی شده موجود است امکان اضافه کردن لینک یک تصویر برای قرارگیری هنگام لود تصاویر و ویدیوها می‌باشد که پس از لود تصاویر حذف می‌شود و تصویر و ویدیو اصلی جایگزین می‌شود. البته ، برای استفاده از این گزینه شما باید یک تصویر کوچک و با رزولوشن پایین طراحی کنید که به لود وب سایت آسیب نزند.
برای گرفتن سبک‌ترین و بی‌نظیرترین نتیجه ممکن ، من توصیه می‌کنم که یک تصویر تک رنگ و هم‌رنگ با پس زمینه پوسته با فرمت png تهیه کنید.
همچنین شما میتوانید بعضی از class های CSS موجود در فایل html صفحه را نیز در لیست عبور (محروم) قرار دهید تا آن class ها به صورت لود تنبل ، لود نشوند. سپس بعد از اینکار شما میتوانید آن class ها را به فیلم ها و تصاویری که قصدندارید به صورت تنبل لود شوند بدهید تا به صورت عادی لود شوند. در نهایت ، شما میتوانید مقدار لازم برای نزدیکی برای نمایش تصاویر قبل از دانلود و نمایش را بشناسید.
بیایید بررسی کنیم که با BJ Lazy Load چقدر سرعت وب سایت ما تغییر کرده است.
این زمان لود فوق‌العاده سریع است. وب سایت را دوازده بار در ساعت های مختلف شبانه روز تست کردم و متوجه شدم که زمان لود وب سایت میانگین بین 300 تا 400 میلی ثانیه است. آزمودن وب سایت بلافاصله بعد از فعالسازی پلاگین ملاک نیست و باید چندین بار تست صورت گیرد.
درحالی که شاهد افزایش سرعت وب سایت شده‌ایم ولی حجم وب سایت 0.3 مگابایت افزایش یافته است و از 1.7 مگابایت به 2 مگابایت افزایش داشته است. برای حجم چه اتفاقی افتاده است ؟ با توجه به نظریه ای که داشتیم ، با فعالسازی لود تنبل باید حجم صفحه کاهش یابد و صفحه سبک تر شود . پس از بررسی وضعیت حال حاضر این نتیجه چیزیست که دست یافتم :
به صورت پیشفرض، وردپرس برای ارائه تعداد زیادی از اندازه یک فایل تصویری در مرورگر ها از ویژگی‌ای (attribute) به نام srcset برای تصاویر در تگ img استفاده می‌کند. مرورگر از طریق لیستی از اندازه‌ها و لود کوچکترین نسخه از تصویر ، فضای موجود را پر می‌کند. این بدان معناست که اگر شما یک تصویر بزرگ را آپلود کنید ، وردپرس با تکنیک‌های پیشفرض خود تصویر را به چند نسخه به اندازه‌های کوچکتر تبدیل می‌کند و سپس نسبت به سایز صفحه نمایش و تنظیمات پوسته سایز کوچک تولید شده را برای مرورگر بازدید کننده ارسال می‌کند. مرورگر بازدیدکنندگان کوچکترین تصویر مناسب را براساس میزان پیکسل های دردسترس در مکان قرارگیری تصویر دریافت خواهد کرد.
افزونه BJ Lazy Load رفتار پیشفرض وردپرس در مورد تصاویر را به طور کامل تغییر می‌دهد. ویژگی data-lazy-srcset جایگزین ویژگی srcset می‌شود و نتیجه نهایی این است که به جای پایین آوردن اندازه و وضوح تصویر ، تصویر با وضوح و اندازه کامل به صورت تنبل، لود خواهد شد.
این کار ایده‌آل نیست ولی شما با بهینه سازی تصاویر قبل از آپلود میتوانید حجم تصاویر را کاهش دهید تا حجم وب سایت بالا نرود ، گرچه ، در حال حاضر افزونه‌هایی برای بهینه سازی در وردپرس نیز تهیه شده اند که میتوانید جایگزینی برای رفتار تغییر اندازه پیشفرض وردپرس کنید و دیگر این مشکل را نداشته باشید.
با آزمایش دیداری ، شما وب سایت خود را لود می‌کنید و مشاهده می‌کنید که چه رخ داده است . برای مثال اگر از پس زمینه ای غیر سفید در پس زمینه وب سایت خود استفاده می‌کنید ، حتما باید یک تصویر جایگزین برای نمایش قبل از لود تنبل تصاویر قرار دهید. به صورت پیشفرض افزونه یک تصویر gif سفید رنگ برای شما قرار می‌دهد که در تنظیمات میتوانید آن را تغییر دهید.
2 – Lazy Load XT
افزونه Lazy Load XT در آزمایشات ما به خوبی ظاهر شد و یکی دیگر از افزونه های خوب لود تنبل وردپرس به حساب می آید. با آماری حدود 1000 نصب فعال مشخصا به اندازه BJ Lazy Load محبوب نیست ولی از نظر رتبه بندی امتیاز 4.9 از 5 امتیاز را آورده است که تنها یک بازخورد 5 امتیاز را به این افزونه نداده بود.
پس از فعالسازی ، افزونه در منو تنظیمات یک زیر منو Lazy Load XT ایجاد می‌کند و شما میتوانید از آن طریق افزونه را پیکربندی کنید. پس از اولین بررسی دیداری وب سایت متوجه خواهید شد که این افزونه بیشتر از لود تنبل تصاویر و ویدیوها عمل می‌کند. شما علاوه بر لود تنبل میتوانید فایل‌های جاوااسکریپت و سی اس اس را Minify کنید. کتابخانه های جاوا اسکریپت و سی اس اس را توسط انواع CDN مانند CloudFlare لود کنید و اسکریپت‌ها را به فوتر وردپرس منتقل کنید.
در این افزونه چند گزینه اضافی وجود دارد که میتوانید با استفاده از آنها باعث بهبود سرعت سایت وردپرس شوید. به هر حال ، از وقتی که شروع به آزمایش لود تنبل کردیم ، من تنظیمات افزونه را به صورت پیشفرض رها کردم، فایل‌های جاوااسکریپت و سی اس اس را Minify و به فوتر منتقل نکردم ، کش سرور را خالی نکردم . با توجه به این موضوع در وب سایت Pingdom ، وضعیت سرعت حال حاضر وب سایتم را آزمایش کردم.
پس از انجام آزمایش توسط pingdom ، حجم وب سایت همان 2 مگابایت باقی مانده بود ولی زمان لود صفحه کمی بیشتر از افزونه BJ Lazy Load شده بود . گرچه با این افزونه در لود صفحه 50 درصد کاهش زمان لود حاصل شد ولی به هر حال این آزمایش بیانگر قدرت کمتر این افزونه نسبت به BJ Lazy Load می‌باشد. بعد از مشاهده منو درختی فایل‌ها متوجه شدیم که دقیقا همان فایل‌هایی که در BJ Lazy Load لود می‌شوند با فعال سازی Lazy Load XT نیز لود می‌شوند و به جای تصاویر بهینه سازی شده ، پس از فعال سازی افزونه‌ها دقیقا همان تصویر آپلود شده با همان کیفیت به صورت تنبل، لود می‌شود.
پس از بررسی این موضوع ، دلیلی برای اینکه چرا لود BJ Lazy Load بهتر از Lazy Load XT یافت نمی‌شد تا اینکه به تصویر پیش‌نمایش قبل از لود تصویر اصلی توجه کردم که این تصویر به علت اینکه به صورت Transparent بود و به همین علت لود تصاویر قبل از نمایش به خوبی صورت نمی‌گرفت و سرور را بیشتر برای لود مشغول می‌کرد. در این افزونه نیز مانند BJ Lazy Load امکان تغییر تصویر پیش‌نمایش وجود دارد و میتوانید با انتخاب یک تصویر بهتر و بهینه تر کمی سرعت لود را کاهش دهید.
3 – افزونه a3 Lazy Load
افزونه a3 Lazy Load یکی دیگر از افزونه های پرطرفدار مخزن وردپرس در حوزه لود تنبل می‌باشد. این افزونه حدودا 10 هزار نصب فعال دارد ، و امتیاز 4.7 را از 5 امتیاز با توجه به 40 بازخورد به دست آورده است.
افزونه را فعال کنید و سپس مشاهده می‌کنید که در منو تنظیمات یک زیر منو به نام a3 Lazy Load اضافه شده است. برای آزمایش افزونه ، من تنظیمات آن را به همان صورت پیشفرض قرار دادم. من از گزینه بارگذاری رنگ پس‌زمینه برای پیش‌نمایش تصاویر استفاده کردم تا رنگ پیش‌نمایش هم رنگ پس‌زمینه صفحه وب من شود. با توجه به این تغییر و قرارگیری تنظیمات به صورت پیشفرض ، عملکرد وب سایت خیلی عالی شد.
زمان لود وب سایت ما دوباره به زیر نیم ثانیه آمد ، این سرعت با توجه به تعداد تصاویر و ویدیو قابل توجه است.
مقایسه نتایج به دست آمده
بی شک ، شما متوجه کاهش درخواست ها و حجم صفحه شده‌اید. چه چیزی این تفاوت دراماتیک را ایجاد می‌کند؟ در وب سایت pingdom با تهیه اسکرین شات و یا ایمیل کردن نتایج میتوانید هرلحظه که خواستید دو آزمایش را با یکدیگر مقایسه کنید.
در تصویر زیر حجم محتوای وب سایت را هنگامی که افزونه a3 Lazy Load فعال است را مشاهده می‌کنید.
به طور کلی 151 کیلوبایت تصاویر ، حجم صفحه را گرفته اند که این مقدار نسبت به واقعیت کم می‌باشد. دو افزونه BJ lazy load و Lazy Load TX حجم صفحه را 2 مگابایت نشان داده‌اند . تصویر زیر نمایانگر آن است که چطور وب سایت با فعال بودن این دوافزونه 2 مگابایت حجم دارد.
سایز کدهای جاوااسکریپت ، سی اس اس و اچ تی ام ال تقریبا یکسان است. با این حال ، اندازه تصاویر 1.86 مگابایت است، که این اندازه حجم تصاویر با همان رزولوشنی است که آپلود می‌شوند ولی در مقابل در a3 lazy load این حجم 151 کیلوبایت می‌باشد. به نظر شما چه اتفاقی افتاده است؟ همانطور که قبلا گفتم بعد از آپلود تصاویر وردپرس به صورت پیشفرض شروع به بهینه سازی و ساخت اندازه های مختلف از تصویر می‌کند و کاربران کوچکترین اندازه مربوط به صفحه نمایش خود را دانلود و مشاهده می‌کنند.
در افزونه‌های BJ lazy load و Lazy Load TX ، بهینه سازی پیشفرض تصاویر وردپرس غیرفعال شده است ولی در افزونه a3 Lazy Load تصاویر با توجه به تکنیک بهینه سازی تصاویر پیشفرض وردپرس نمایش داده می‌شوند و در نتیجه تصاویر کم حجم تری را مشاهده می‌کنند.
یکی از جالب‌ترین نکات موجود در این مقایسه ، زمان لود صفحه می‌باشد که با افزونه BJ lazy load زمان لود حدودا 100 میلی ثانیه کمتر از a3 Lazy Load می باشد. به همین دلیل من چندین بار از صفحات وب سایت با فعالسازی و غیرفعالسازی هر 3 افزونه آزمایش تست سرعت گرفتم که مطمئن شوم که این نتایج غیرواقعی نباشد. تنها تغییری که در نتایج ایجاد می‌شد تعداد درخواست‌های HTTP بود . در یک نگاه ، به نظر می‌رسد که تعداد درخواست‌های HTTP افزونه BJ lazy load بیشتر باشد. با این حال ، اگر به منوی درختی فایل‌ها نگاهی بیاندازیم ، متوجه دلیل درخواست ها خواهیم شد.
فایل‌های سایت با فعال بودن افزونه BJ lazy load حدودا 20 درخواست از نوع data:image/gif را تولید می‌کند.
این‌ها داده‌های URI هستند نه درخواست های HTTP که در واقع ، به مرورگر می‌گوید که فایل Gif را به صورت محلی (با کدهای Base 64) لود کند نه به صورت دانلود از سرور. در نتیجه ، افزونه BJ lazy load برای لود صفحه نیازمند 17 درخواستHTTP می‌باشد که این در مقابل a3 Lazy Load که 27 درخواست HTTP برای لود صفحه نیاز دارد سریع تر لود می‌شود و کاملا دلیل مشخصی برای سریع لود شدن صفحات می‌باشد.
افزونه Lazy Load TX یک مقدار بیشتر از BJ lazy load نیازمند درخواست های HTTP می‌باشد که این تعداد درخواست بیشتر بیانگر دلیل دریافت نکردن همان نتایج است.
4 – افزونه Rocket Lazy Load
و چهارمین گزینه استفاده در صورتی که هیچ یک از افزونه‌های بالا خواسته شما را محیا نکرد ، افزونه Rocket Lazy Loadمی‌باشد. افزونه‌ای رایگان از تولید کنندگان افزونه WP Rocket است. در حال حاضر این افزونه بیشتر از 6 هزار نصب فعال دارد و امتیاز 4.2 از 5 امتیاز را دریافت کرده است. اگر به‌دنبال یک افزونه لود تنبل ساده و با سرعتی خوب می‌گردید ، یکی از بهترین انتخاب‌های شما این افزونه است. این افزونه تنظیماتی را بر روی تصاویرشاخص ، تمامی تصاویر موجود در مقالات و ابزارک‌ها، آواتار‌ها و شکلک‌ها ایجاد می‌کند.
یکی از مزیت‌های این افزونه نداشتن هیچ کتابخانه جاوااسکریپتی مانند جی‌کوئری در خود می‌باشد و کدهای اسکریپت آن کمتر از 2 کیلوبایت است. هیچ گزینه‌ای برای تنظیم ندارد و خیلی ساده نصب و لود تنبل فعال می‌شود.
نتیجه گیری و توصیه‌ها
هر چهار گزینه‌‌ی بیش‌ترین تلاش را برای بهبود سرعت وب سایت شما، لود تنبل تصاویر و ویدیوها و در نهایت برای سئو عکس انجام می‌دهند. اینکه کدام را برای کار در وب‌سایتتان انتخاب کنید یک انتخاب شخصی است و براساس عملکرد و همچنین به نوعی که ترجیح می‌دهید تصاویر و ویدیوها لود شوند بستگی دارد.
- اگر شما تصاویرتان را قبل از آپلود بهینه سازی نمی‌کنید و حتما هم به آنها نیاز دارید ، بهتر است که از افزونه a3 Lazy Load استفاده کنید ، زیرا این افزونه به شما تصاویری بهینه شده تحویل خواهد داد.
- اگر شما تصاویرتان را قبل از آپلود بهینه سازی می‌کنید و به دنبال این هستید که با حداقل تلاش بهترین تحویل ممکن را به کاربر ارائه دهید ، با افزونه BJ lazy load به هیچ مشکلی بر نمی‌خورید. افزونه Rocket Lazy Load نیز دیگر انتخاب شما میتواند باشد.
- اگر شما تصاویرتان را قبل از آپلود بهینه سازی می‌کنید و قصد دارید که علاوه بر لود تنبل ، بتوانید گزینه‌های اضافه‌تری مانند کوچکتر کردن فایل‌های جاوااسکریپت و سی اس اس و همچنین تغییر مکان آنها به فوتر را داشته باشید ، بهتر است که از افزونه Lazy Load TX استفاده کنید.
لود تنبل یکی از چندین تکنیک موجود برای افزایش سرعت وب سایت وردپرس شماست. با این حال ، اگر از تصاویر و ویدیوهای زیادی در وب سایتتان استفاده می‌کنید باید بدانید که لود تنبل پتانسیل آن را دارد که تاثیر عمیقی بر افزایش سرعت داشته باشد. علاوه‌بر این ، هنگامی که از لود تنبل استفاده می‌کنید ، چندین تکنیک دیگر نیز وجود دارند که میتوانید آنها را هم در نظر بگیرید و با پیاده سازی آن بهترین سرعت عملکرد را در وب سایت خود حس کنید.
نحوه بهینه سازی و افزایش سرعت لود سایت به کمک جدول Wp_options از پایگاه داده
نحوه بهینه سازی و افزایش سرعت لود سایت به کمک جدول Wp_options از پایگاه داده
سرفصل‌های پست
- 1 پاکسازی جدول Wp_options و بارگیری خودکار داده ها
- 2 جدول wp_options چیست و چه وظایفی دارد ؟
- 3 عیب‌یابی Autoload (بارگیری خودکار) در جدول wp_options
- 3.1 بررسی حجم داده‌های ستون Autoload
- 3.2 مرتب سازی داده های Autoload شده در بالا
- 3.3 ایجاد تغییرات در یک داده autoload شده مشخص در جدول wp_options
- 3.4 پاکسازی جدول wp_options
- 3.5 پاکسازی گذرا
- 3.6 یک شاخص برای Autoload اضافه کنید
پاکسازی جدول Wp_options و بارگیری خودکار داده ها
امروز قصد داریم تا نگاهی به جدول wp_options در پایگاه داده وردپرس خود کنیم. به طور کلی این منطقه شامل کلیه عملکردهای وردپرس و پایگاه داده است که در بیشتر اوقات به آن توجه نمی‌شود.
با توجه به بارگیری های خودکار داده ها در پوسته ها و افزونه های وردپرس توجه نکردن به این جدول (مخصوصا در وب سایت‌های پربازدید و قدیمی) میتواند باعث کندی صفحه‌ها و همچنین کاهش سرعت سایت و در نتیجه سئو وب سایت شما شود.
نکاتی که در پایین به شما آموزش می‌دهیم را بررسی کنید تا یاد بگیرید که چطور جدول wp_options را بررسی، عیب‌یابی و پاکسازی کنید.
جدول wp_options چیست و چه وظایفی دارد ؟
جدول wp_options حاوی تمامی نوع داده مربوط به عملکرد وب سایت وردپرسی شما می‌باشد ، دادههایی مانند :
- آدرس وب سایت ، آدرس وردپرس ، ایمیل مدیر ، دسته‌بندی پیشفرض، تعداد مقالات در هر صفحه ، فرمت زمان و …
- تنظیماتی مخصوص ابزارک‌ها ، افزونه‌ها و پوسته‌ها
- داده‌های موقت ذخیره شده
موارد زیر در جدول wp_options وجود دارد که یکی از آنها را که در عملکرد وب سایت نقش بسیاری دارد را پر‌رنگ کردیم:
- option_id
- option_name
- option_value
- autoload ( بارگیری خودکار)
یکی از مهم‌ترین مواردی که باید در رابطه با wp_options بدانید ، اطلاع داشتن از بخشی به نام بارگیری خودکار (autoload) می‌باشد. این بخش شامل دو متغیر بله و خیر (yes or no) می‌باشد . که اساساً برای کنترل تابع wp_load_alloptions() استفاده می‌شود. داده‌های Autoload ، دادههایی هستند که در هر صفحه وردپرسی شما اجرا می‌شوند.
دقیقا مانند غیرفعال کردن بارگیری بعضی از کدهای جاوااسکریپت در بعضی از صفحات وب سایت ، این بخش نیز به راحتی غیرفعال و فعال می‌شود.
به طور کلی ، داده‌های Autoload به صورت پیشفرض در تمامی جداول بر روی “yes” تنظیم شده‌اند که با توجه به اینکه بعضی از افزونه‌ها نیازی نیست که در تمامی صفحات بارگیری شوند، توسط توسعه دهندگان بارگیری خودکارشان (autoload) غیرفعال می‌شود.
تجربه نشان داده است که وجود مقدار زیادی autoload در جدول wp_options میتواند باعث مشکل در وب سایت وردپرس شما شود.
در زیر به تعدادی از مشکلات معمول این دسته اشاره میکنیم:
- داده‌ها به طور کلی توسط خود افزونه‌ها بارگیری خودکار می‌شوند و نیازی نیست که در تمامی صفحات بارگیری شوند و برای مثال داده‌های فرم تماس نیازی نیست که در تمام صفحات وب سایت لود شوند ، بنابراین بهتر است که متغیر داده Autoload را بر روی “no” قرار دهید.
- افزونه‌ها و پوسته‌ها را حذف می‌کنید ولی هنوز تنظیمات مخصوصشان در جدول wp_options وجود دارند . این بدان معناست که ممکن است وب سایت در هنگام بارگیری، اطلاعات غیر ضروری قدیمی را نیز بارگیری خودکار کند.
- بعضی از توسعه دهندگان به‌جای استفاده از جداول مخصوص خود افزونه و یا پوسته ، داده‌های محصول خود را در جدول wp_options ذخیره می‌کنند. استدلال‌هایی برای هر دو طرف وجود دارد، برای مثال بعضی از توسعه دهندگان علاقه ای به استفاده از جداول یکتا برای افزونه خود ندارند. به هر حال ، جدول wp_options جهت قرارگیری صدها سطر اطلاعات طراحی نشده است و بهتر است که بهینه سازی شود تا باعث کاهش سرعت سایت نشود.
حداکثر مجاز استفاده از autoload در یک وب سایت وردپرسی چقدر است؟ این مقدار میتواند در هر نوع وب سایتی متفاوت باشد ولی به طور کلی حجم داده‌ها معمولا بهتر است بین 300 کیلوبایت تا 1 مگابایت باشد.
هنگامی که شما شروع به بررسی جدول wp_options می‌کنید با حجمی حدود 3 تا 5 مگابایت مواجه می‌شوید که حتما چیزهایی را باید غیرفعال یا به طور کلی حذف کنید تا جدول و داده‌های autoload بهینه سازی شوند. اگر هنگام بررسی با حجمی بیشتر از 10 مگابایت مواجه شدید ، باید بگویم که وضعیت بحرانی است و باید سریعا به بررسی جدول wp_options بپردازید. با این حال ، صحبت ما به این معنا نیست که اگر بررسی نکنید با مشکل مواجه می‌شوید ولی در کل اگر از حالا بهینه سازی را شروع کنید ، مشکلات آینده را پیشگیری کرده و همچنین سرعت سئو سایت تان را بهبود می‌بخشید.
عیب‌یابی Autoload (بارگیری خودکار) در جدول wp_options
اگر شما با مشکل کندی سرعت سایت روبه‌رو شده‌اید، یکی از دلایلی که میتواند باعث این مشکل شده باشد ، وجود کوئری‌ها و یا داده‌های خودکار بارگیری شده‌ی یک افزونه قدیمی در جدول wp_options می‌باشد.
در زیر ما به شما نشان می‌دهیم که چگونه حجم داده‌های ستون autoload در جدول wp_options را بررسی کنید و خیلی راحت اطلاعات اضافه را پاکسازی کنید.
بررسی حجم داده‌های ستون Autoload
اولین کاری که باید انجام دهید ، بررسی حجم داده های ستون autoload در حال مصرف در وب سایت وردپرسی شماست. برای اینکار ، وارد phpMyAdmin شوید.
از سمت چپ صفحه دیتابیس خود را انتخاب کنید و سپس وارد سربرگ SQL شوید .
بعد از انجام این کار دستور زیر را در بخش ادیتور وارد کنید و روی کلید GO کلیک کنید.
توجه داشته باشید ما نسبت به نصب پیشفرض وردپرس آموزش می‌دهیم و ممکن است شما به علت امنیت از پیشوندی غیر از wp_ استفاده کرده باشید که برای استفاده از دستور بالا می‌بایست پیشوندی که تعریف کرده‌اید را به جای wp_ وارد کنید.
حجم نمایش داده‌شده از تابع autoload_size بر مبنای بایت می باشد. هر 1000 بایت برابر 1 کیلوبایت است و هر 1000 کیلوبایت برابر 1 مگابایت است . بنابراین در تصویر زیر حجم autoload_size وردپرس ما 249025 بایت به معنای 0.25 مگابایت می‌باشد. به طور کلی این مقدار حجم برای یک وب سایت ، حجمی ایده‌آل است. اگر نتیجه بررسی شما نیز کمتر از 1 مگابایت بود نیازی نیست که نگران چیزی باشید.
برای تبدیل راحت بایت به مگابایت کافی است در گوگل عبارت “byte to mb” سرچ کنید تا در یک rich answers گوگلبتوانید تبدیل را انجام دهید.
بنابراین ، اگر حجم autoload_size وب سایت شما بیشتر از 1 مگابایت بود ، پیشنهاد می‌شود که حتما در ادامه این مقاله سئوراز را دنبال کنید تا سئو و سرعت وب سایت خود را از این طریق بهبود بخشید.
در نمونه زیر حجم autoload_size برابر 137724715 بایت معادل 137 مگابایت می‌باشد. که این مورد نشان دهنده وجود مشکل در یک وب سایت وردپرسی است.
شما همچنین میتوانید برای بررسی تخصصی تر از چندین دستور مختلف دیگر استفاده کنید.
در دستور زیر حجم autoload_size بر حسب کیلوبایت ، تعداد کوئری های autoload و 10 دستور autoload اول دیتابیس به شما نمایش داده می‌شود.
اگر شما از خدمات سایت New Relic استفاده می‌کنید ، میتوانید از آن برای پیدا کردن مشکلات کوئری های جدول wp_options استفاده کنید، در سربرگدیتابیس این وب سایت ، شما میتوانید فهرستی از جداول و کوئری‌هایی که پرمصرف هستند را به دست آورید، اگر روی یکی از گزینه‌های در فهرست کلیک کنید، در رابطه با کوئری‌ها اطلاعات بیشتری کسب می‌کنید. در مثال زیر ، شما میتوانید تعداد انگشت شماری از داده‌های autoload در جدول wp_options را مشاهده کنید.
با اطمینان می‌توان گفت که با جست‌وجویی کوتاه متوجه خواهیم شد که حدودا داده های autoload شده این وب سایت حداقل 250 مگابایت است.
مرتب سازی داده های Autoload شده در بالا
مرحله بعدی بهینه سازی ، مرتب کردن پر مصرف ترین ها در داده های autoload شده می‌باشد. شما میتوانید با دستور SQLزیر به سرعت لیست 10 داده پرمصرف را به دست آورید.
دوباره خاطر نشان کنیم که ممکن است شما پیشوند جداول وردپرس خود را هنگام نصب برای افزایش امنیت تغییر داده باشید و نامی جز wp_ گذاشته باشید، برای اینکه دستور بالا کار کند ، شما باید پیشوند جداول خود را جایگزین wp_ کنید.
ایجاد تغییرات در یک داده autoload شده مشخص در جدول wp_options
مرحله بعدی ایجاد تغییرات در یک داده autoload شده پرمصرف می‌باشد.
ریدایرکت 301
همانطور که مشاهده می‌کنید در تصویر بالا در صدر لیست ریدایرکت 301 قرار دارد. این کوئری به احتمال بسیار زیاد مربوط به یک افزونه سئو وردپرس می‌باشد و وظیفه انتقال دادن صفحات را دارد. در این نوع موارد ، بهتر است که از افزونه برای انتقال صفحات استفاده نکنید و از ابزار پیشفرض وب سرور خود استفاده کنید.
دلیل این پیشنهاد چیست ؟ به این دلیل که استفاده از افزونه‌های رایگان وردپرس برای انجام عملیات انتقال صفحات ممکن است باعث ایجاد اختلال در عملکرد وب سایت شوند ، نیازمند اجرای کد های اضافی و منابع دارد و همچنین ایجاد کوئری autoload در وب سایت می‌باشد ، پیشنهاد می‌شود که از انتقال صفحات از طریق پلاگین استفاده نکنید.
wpurp_custom_tiplate_
در لیست مرتب شده بالا هشت جایگاه را کوئری wpurp_custom_tiplate_ اشغال کرده است. به طور کلی شما باید بتوانید نام این کوئری ها بیابید و همچنین به سرور برای دسترسی به نقاطی از پوسته‌ها و افزونه‌ها دسترسی داشته باشید. اگر دسترسی دارید ، از طریق دستور grep زیر بررسی کنید که آیا میتوانید این کوئری‌ها را پیدا کنید یا خیر! شما همچنین میتوانید از طریق درگاه‌های SFTP نیز این رکوردها را بررسی کنید.
اگرچه در بعضی از سرورها این روش کارایی ندارد ، ما توانستیم با جست‌وجویی ساده در گوگل دریابیم که این کوئری به افزونه‌ای تحت عنوان WP Ultimate Recipe مربوط است. این کوئری یک نمونه از غیرضروری‌ترین کوئری‌های autoload شده در وردپرس می باشد. بنابراین اگر چنین افزونه‌ای در لیست افزونه‌های خود دارید سعی کنید که آن را به طور کامل حذف کنید. درواقع ، منظور ما پاکسازی کامل افزونه و هرچیزی که تا به حال در پایگاه داده تولید کرده است می‌باشد.
um_cache_userdata_
نوع بعدی داده‌های پرمصرف به داده‌های um_cache_userdata_# مربوط می‌شود، این داده‌ها را در چند سطر از لیست 10 داده پر مصرف autoload بالا در می‌بینید.
با توجه به اینکه چند داده um_cache_userdata_ در پایان لیست قرار دارند . ما به سرعت وارد MySQL خود شده و با دستور زیر 40 کوئری Autoload پر مصرف مربوط به این داده را فراخوانی میکنیم.
و یا مجموع تمامی مقادیر بالا مربوط به آن پیشوند :
اگر متوجه شدید که تعداد بیشتری کوئری وجود دارد ، دوباره مجبورید در بین افزونه‌ها و پوسته‌ها جست‌وجو کنید و دستور grep مخصوص آن را اجرا کنید.
با توجه به جست‌وجویی که ما انجام دادید دریافتیم که این داده مربوط می‌شود به افزونه معروف Ultimate Miber و پس از جست‌وجویی کوتاه در گوگل راهی ساده برای حل مشکلات این افزونه نیز پیدا کردیم. سعی کنید قدرت جست‌وجو و تحقیق با گوگل را تمرین کنید تا به راحتی بتوانید نیازهای خود را در یک سرچ هدف‌مند پیدا کنید.
در جست‌وجو متوجه شدیم که برای حل مشکلات این افزونه چندین راه وجود دارد
- Ultimate Miber > Dashboard > User Cache > Clear Cache
- Ultimate Miber > Settings > Advanced > گزینه Stop caching user’s profile data را فعال کنید > سپس تغییرات را ذخیره سازی کنید.
گزینه دیگر برای پیداکردن گزینه های autoload کلیک روی کلید ویرایشگر است که میتواند لیست پوسته‌ها/افزونه‌ها و یا لیست وب سایت توسعه دهندگان آنها را به شما نمایش دهد.
Cron Jobs
یکی دیگر از گزینه‌های پرمصرف در بخش autoload استفاده مکرر Cronjobs ها می‌باشد. در این مورد، هر Cron ممکن است در این مسئله دخیل باشد، بنابراین هنگامی که ممکن است با کلیک روی کلید ویرایش وب سایت خراب شود ، باید چه‌کار کنیم ؟
برای مثال یک کوئری بسیار پرمصرف در وب سایت های وردپرسی کوئری Cron تحت عنوان do_pings می‌باشد که شما با یک جست‌وجوی ساده میتوانید نحوه پاکسازی این نوع کوئری‌ها را پیدا کنید، اگر با نحوه کار و پاکسازی آن اشراف کامل را ندارید این مورد را نادیده بگیرید، یا قبل اجرا بک آپ در دیتابیس خود تهیه نمایید.
پاکسازی جدول wp_options
اگر تعداد زیادی از نمونه‌هایی که در بالا به شما نشان دادیم را مشاهده کردید ، حالا وقت آن است که شروع به پاکسازی تمامی داده‌های autoloaded کنیم. این نکته بسیار پیشنهاد می‌شود که تا جای ممکن سعی کنید که تعداد سطر های جدول wp_options شما در کمترین حالت ممکن باشد. لطفا سعی کنید قبل از هرگونه پاکسازی یا ایجاد تغییرات در پایگاه داده خود از آن نسخه پشتیبان تهیه کنید. اگر امکان این کار را ندارید ، پیشنهاد میکنیم یک متخصص حرفه‌ای استخدام کنید.
مانند اولین نکته‌ای که به شما گفتیم ، برای پاکسازی جدول wp_options باید ابتدا وارد phpMyAdmin شوید. از منو سمت چپ پایگاه داده وردپرس خود را انتخاب کنید و وارد سربرگ SQL شوید. سپس دستور زیر را وارد کنید و روی کلید GO کلیک کنید.
این دستور به شما تمامی داده‌های جدول wp_options را که در آنها autoload بر روی yes ذخیره شده است را نمایش می‌دهد.
با اسکرول کردن سطر‌ها به ترتیب تمامی افزونه‌هایی که در حال حاضر نصب یا درحال استفاده نیستند را مشاهده می‌کنید. به عنوان نمونه در این آموزش ما سطر‌هایی از افزونه Jetpack توسعه داده شده توسط وردپرس را بررسی میکنیم.
به عنوان مثال در حال حاضر وب سایت از افزونه Jetpack استفاده نمی‌کند.
همیشه بهتر است قبل از انجام هرکاری مستندات ارائه شده توسط توسعه دهندگان افزونه‌ها را بررسی کنید ، گاهی اوقات در بعضی از مستندات توسعه دهنده می‌گوید که چطور جداول گذشته را پاکسازی کنید یا شاید گزینه‌ای برای پاکسازی پایگاه داده در تنظیمات افزونه قرار داده بود. در بعضی اوقات بهتر است که ابتدا یک بار افزونه را حذف کنید و دوباره نصب کنید و سپس بررسی کنید که آیا کوئری‌های پایگاه داده آن پاکسازی شده است یا خیر و سپس در صورتی که پاک شده بود آن را به طور کامل حذف کنید. با این حال ، در این مقاله ما به شما آموزش می‌دهیم که چطور به صورت دستی جداول را پاکسازی کنید.
برای مثال در دستور زیر ، ما تمامی داده‌های autoload درون wp_options را که مخصوص افزونه jetpack هستند را فراخوانی میکنیم:
سپس روی کلید Select All کلیک میکنیم و روی Delete کلیک میکنیم تا به طور کامل جداول حذف شوند.
یا شما میتوانید به صورت مستقیم با دستور زیر اقدام به حذف کوئری‌ها کنید:
حالا شما میتوانید با تغییر options_name به عنوان افزونه و یا پوسته قدیمی خود داده های autoload شده جدول را پاکسازی کنید.
پاکسازی گذرا
اگر از یک حافظه کش استفاده می‌کنید، وردپرس رکوردهای گذرا یا transient را در خود جدول wp_options ذخیره می‌کند. به طور کلی این نوع رکوردها باید زمان انقضایی داشته باشند و در طول زمان پاکسازی شوند ، با اینکه ، همیشه اینطور نیست. در حال حاضر پایگاه‌های داده‌ای وجود دارد که بیشتر از هزاران رکورد transient قدیمی را در خود نگاه داشته‌اند. باید توجه داشته باشید که رکوردهای transient به صورت پیشفرض به صورت خودکار بارگیری نمی‌شوند.
شما میتوانید از دستور زیر برای مشاهده رکوردهای transient خودکار بارگیری شده استفاده کنید :
به هر حال ، شما میتوانید از افزونه Transient Cleaner نیز برای پاکسازی داده‌های گذرا از پایگاه‌داده خود استفاده کنید.
یک شاخص برای Autoload اضافه کنید
اگر پاکسازی داده‌های جدول wp_options کافی نبود ، شما بهتر است که از یک شاخص برای autoload استفاده کنید.
این کار اساسا کمک می‌کند که جست‌وجوی شما کارآمدتر شود.
تیم تست به نام 10آپ ، چند آزمون مختلف بر روی جدول wp_options با رکوردهای autoload شده انجام داده است تا نمایش دهد که چطور با افزودن یک شاخص به کوئری‌های wp_options می‌توانیم در عملکرد وب سایت بهبود بخشیم.
افزونه Little Bizzy یک افزونه کاملا رایگان وردپرسی است که با اضافه کردن شاخصی برای autoload جدول wp_options با استفاده از wp_cron برای گزارش روزانه میتواند به شما بسیار کمک کند.
نصب Cloudflare و آموزش تنظیمات کلود فلر
نصب Cloudflare و آموزش تنظیمات کلود فلر
در این مقاله قصد داریم آموزش استفاده از cdn یعنی یکی از بهترین سی دی ان های دنیا به نام کلود فلر را به شما بدهیم در این آموزش بخش‌های مختلف کلودفلیر مورد بررسی قرار گرفته و تنظیمات لازم حتی برای وردپرس هم اشاره شده. و درباره مهم‌ترین دغدغه کاربران یعنی ssl رایگان موجود در Cloudflare.com برای دامنه های ir و سایر دامنه‌ها به شکل کلی آموزش داده شده است. با سئوراز همراه باشید.
سرفصل‌های پست
- 1 Cloudflare چیست و نحوه فعال سازی و آموزش تنظیمات آن
- 2 آموزش نصب کلود فلر (Install Cloudflare)
- 2.1 مرحله اول – اضافه کردن سایت در کلودفلر
- 2.2 مرحله دوم – تنظیم DNS در کلودفلر
- 2.3 مرحله سوم – انتخاب پنل
- 2.4 مرحله چهارم – تنظیمات NameServers
- 2.5 مرحله پنجم – تنظیم IP و DNS
- 2.6 مرحله ششم (اختیاری) – نصب افزونه کلودفلر در وردپرس
- 3 بررسی اجمالی بر روی تنظیمات کلودفلر
- 4 مشکل رایج Cloudflare در طراحی سایت (طراحی سایت شرکتی،طراحی سایت فروشگاهی، قیمت طراحی سایت) ها
- 5 تنظیمات اضافه برای کلودفلر
Cloudflare چیست و نحوه فعال سازی و آموزش تنظیمات آن
کلودفلر یا به انگلیسی Cloudflare یک شرکت ارائه دهنده خدمات شبکه تحویل محتوا (CDN) ، دارای تنظیمات DNSپیشرفته، محافظت کننده از حملات DDOS و خدمات امنیتی می باشد. آنها به علت ارائه SSL رایگان و افزایش سرعت و تنظیمات بهینه DNS ، و ارائه دادن یک شبکه قوی و قدرتمند شامل بیشتر از 100 سرور مختلف در سراسر جهان شهرت بسیار زیادی در جامعه و صنعت شبکه و وب به دست آورده‌اند.
آنها توسط شرکت های نام آشنا و مشهوری مانند گوگل ، مایکروسافت و کوالکام پشتیبانی می‌شوند و از مشتریان معروف آنها می‌توانیم به سیسکو ، zendesk ، Digital Ocean و nasdaq اشاره کنیم.
البته سایت‌های بزرگ ایرانی همانند دیجی کالا و بامیلو هم نیز در مقطعی از زمان از این سرویس CDN قدرتمند استفاده می‌کردند.
برای استفاده از سرویس‌های Cloudflare در وب سایت وردپرسی خود مراحل زیر را با دقت در سئوراز دنبال کنید. ما در وب سایت سئوراز برای افزایش سرعت سایت بیشتر به اکثر کاربرانمان که هاست خارجی دارند استفاده از Cloudflare را پیشنهاد میکنیم و اگر قصد تهیه پنل‌های پولی این شرکت را دارید مکان هاست اهمیت چندانی ندارد. اگر از هاست ایران استفاده می کند و میخواهید کلود فلر را بر روی سایت خود فعال کنید ممکن است ساخت سایت شما با اختلالات لحظه‌ای مواجه شود، اگر سایت شما بر روی هاست ایران است بهتر است از cdn های ایرانی مانند ابر آروان استفاده کنید که با هاست های ایرانی سازگاری کامل دارد.
اگر شما به دنبال یک راه آسان برای بهبود سرعت سایت و افزایش امنیت وب سایت وردپرسی خود هستید، سایت Cloudflare.com با امکاناتی که به شما ارائه می‌دهند یکی از بهترین انتخاب‌های شماست.
بیشتر مشتریان سایت Cloudflare از سرویس رایگان این شرکت استفاده می‌کنند، در سرویس رایگان این شرکت به شما یک پنل با امکان استفاده از CDN با پهنای باندی نامحدود، SSL رایگان ولی با یک سری امکاناتی محدود داده می‌شود.
در این پست آموزش استفاده از سی دی ان cloudflare سعی خواهد شد به جنبه‌های مختلف این ابزار پرداخته شود.
نکته: برای استفاده از سرویس های رایگان Cloudflare شما می بایست DNS مخصوصی که این سایت برای دامنه شما می‌سازد را روی دامنه خود تنظیم کنید و این بدان معناست که شما با استفاده از Cloudflare امکان داشتن DNS اختصاصی با نام دامنه خود را ندارید.
آموزش نصب کلود فلر (Install Cloudflare)
خب به آموزش نصب cloudflare رسیدیم، در آموزش فعال سازی کلود فلیر تصور شده است که شما از قبل یک اکانت کاربری در وب سایت Cloudflare ایجاد کرده اید. اگر تا به حال در این وب سایت ثبت نام نکردید ، وارد وب سایت Cloudflareشوید و ثبت نام کنید چرا که برای استفاده از کلودفلر طبیعتا نیاز به ثبتنام است.
مرحله اول – اضافه کردن سایت در کلودفلر
وارد اکانت کاربری خود در وب سایت Cloudflare شوید و روی “+ Add Site” کلیک کنید. آدرس وب سایت وردپرسی و یا غیر وردپرسی خود را وارد کنید و روی “Being Scan” کلیک کنید. (توجه داشته باشید که نیازی به وارد کردن http/https و www. نیست)
این عملیات 1 تا 2 دقیقه طول می‌کشد ، سپس باید روی “Continue Setup” کلیک کنید.
مرحله دوم – تنظیم DNS در کلودفلر
در مرحله دوم آموزش تنظیمات cloudflare به قسمت مهم DNS ها می‌رویم. کلودفلر برای DNS ها به شما دو خدمت ارائه می‌کند (On Cloudflare و Off Cloudflare) که اولین خدمت استفاده از CDN و امکانات امنیتی است و دیگری نیز تنها متصل کردن یکی از رکورد ها از طریق کلودفلر به سروری دیگر است و در این خدمت هیچ امکان CDN و امنیتی به شما تعلق نمی‌گیرد و شما مستقیم به سرور مقصد متصل می‌شوید .
بیشتر کاربران بسته به نیازشان سعی می‌کنند که هرچیزی که کلود فلر پیشنهاد می‌کند را در DNS خود رعایت کنند .
برای اینکه مطمئن شوید که رکورد DNS شما به کلودفلر متصل است و از خدمات CDN و امنیتی آن استفاده می‌کند به ابر جلوی رکورد DNS نگاه کنید و مطمئن شوید که نارنجی رنگ است و اگر نارنجی رنگ نیست با یک کلیک رو ابر، آن را به ابر نارنجی تغییر دهید (این کار باعث فعال شدن امکانات کلود فلر در رکورد DNS شما می‌شود).
همچنین اگر شما رکوردهای اضافه‌ای مانند رکوردهای MX در دامنه خود دارید سعی کنید که آن رکوردها را از Cloudflare جدا کنید و برای جداسازی باید امکان استفاده از خدمات CDN را در آن رکورد غیرفعال کنید (ابر رنگ طوسی به معنای غیرفعال می‌باشد).
هنگامی که تمامی رکورد ها را وارد کردید روی Continue کلیک کنید . این رکوردها را بعدا نیز میتوانید در هرزمان که خواستید تغییر دهید.
مرحله سوم – انتخاب پنل
در مرحله بعدی آموزش استفاده از CDN وبسایت Cloudflare شما می بایست بسته یا Plan کلودفلر خود را انتخاب کنید که ما در این آموزش بسته رایگان را انتخاب میکنیم، برای هاست‌های داخلی (هاست ایران) پنل رایگان توصیه نمی‌شود.
بعد از انتخاب بسته مورد نظر روی Continue کلیک می کنیم . برای اطلاع بیشتر از امکانات بسته ها به قسمت Plan وب سایت Cloudflare مراجعه کنید.
مرحله چهارم – تنظیمات NameServers
در این مرحله از آموزش cloudflare شما باید نیم سرورهای دامنه (NS) خود را به آنچه Cloudflare تعریف کرده است ، تغییر دهید .
از آنجایی که Cloudflare مانند یک Proxy عمل می‌کند ، با اتصال نیم سرور های دامنه خود به این شرکت ، کاربر برای دسترسی به سایت شما بعد از وارد کردن URL وب سایت شما مستقیما به نزدیک ترین سروری Cloudflare به منطقه محل زندگی وی دارد متصل می‌شود و این باعث افزایش سرعت بارگذاری وبسایت شما می‌شود.
قابل توجه عزیزانی که ترس از قطع شدن وب سایتشان هنگام تغییر نیم سرورها را دارند: با توجه به تغییر نکردن سرور مبدا شما پس از تغییر نیم سرورهای وبسایت هیچگونه قطعی و یا به اصطلاح DownTime نخواهید داشت.
بعد از تغییر نیم سرورها به آنچه که Cloudflare تعریف کرده است ، روی Continue کلیک کنید.
تغییر نیم سرور ها ممکن است از 1 تا 72 ساعت به طول انجامد مخصوصا در دامنه‌های ir که زمان زیادی لازم دارد.
مرحله پنجم – تنظیم IP و DNS
اگر شما از آن دسته افرادی هستید که برای وب سایتتان دی ان اس (DNS) و ای پی اختصاصی (IP) گرفته‌اید و فراموش کردید که در قسمت DNS کلود فلر وارد کنید ، میتوانید از طریق منو وارد بخش DNS ها شوید و DNS و IP اختصاصی خود را در کلود فلر وارد کنید و یا تغییراتی در DNS هایتان ایجاد کنید.
بخش تنظیمات DNS در کلودفلر یک استفاده دیگر هم دارد و آن اینکه اگر زمانی انتقال هاست صورت گرفت کافی است IPهاست قدیم را در این بخش به IP هاست قدیم تغییر دهید.
حال به ادامه آموزش استفاده از این CDN می‌رویم و اگر تمامی مراحل را انجام دادید . سایت شما به کلود فلر متصل شده.
مرحله ششم (اختیاری) – نصب افزونه کلودفلر در وردپرس
یک مرحله اضافه‌تر از آموزش تنظیمات cloudflare برای کاربران استفاده کننده از وردپرس وجود دارد که اجباری نیست ولی استفاده از پلاگین رسمی Cloudflare در وردپرس جلوی اشکالات را می‌گیرد.
شما میتوانید پلاگین رسمی Cloudflare را از مخزن وردپرس و یا با یک جستجو در قسمت افزودن افزونه بهلیست پلاگین های خود اضافه کنید.
از امکانات این پلاگین می توان به امکانات زیر اشاره کرد :
- رفع بعضی از مشکلات بخش نظرات وردپرس
- پاک کردن حافظه کش خودکار
- نوشتن یک سرصفحه برای جلوگیری از انتقال های غیر قانونی هنگامی که SSL فعال است.
- امکان تغییر تنظیمات اکانت Cloudflare از پلاگین
- امکان تماشای تعداد کلی بازدید کنندگان ، میزان پهنای باند ذخیره شده و تهدید های مسدود شده
- پشتیبانی از HTTP2/Server Push
پس از نصب پلاگین رسمی کلودفلر روی وردپرس ، شما باید ایمیل و API اکانت خود را وارد کنید. (برای دریافت API خود وارد اکانت کلودفلر شوید و روی my profile کلیک کنید .
سپس در بخش API روی View API Key رو به روی Global API Key کلیک کنید و API خود را کپی و در پلاگین وردپرس بارگزاری کنید )
بعد از وارد کردن ایمیل و API رو Save API Credentials کلیک کنید.
بررسی اجمالی بر روی تنظیمات کلودفلر
در زیر تب Home ، بهتر است که روی Apply کلیک کنید تا تنظیمات پیشفرض اعمال شود .
در زیر تب Settings ، اگر از کاربران Pro کلود فلر باشید میتوانید بهینه سازی تصاویر و حالت توسعه را فعال کنید .
همچنین میتوانید سطح امنیتی وب سایت خود را تعیین کنید و از طرفی باعث شوید تمام منابع سایت شما بر روی HTTPSتنظیم شود.
در زیر تب Analytics ، شما میتوانید لیست پهنای باند ذخیره شده ، تهدید های مسدود شده و تعداد کل بازدید کنندگان خود را مشاهده کنید.
مشکل رایج Cloudflare در سایت‌ها
سایت Cloudflare به عنوان هدیه به تمامی دامنه های بین المللی (به جز دامنه ir) یک گواهینامه دو ساله SSL می‌دهد (کلودفلر امکان استفاده https را به طور کلی برای دامنه های ir بسته است و به قولی SSL را برای این دامنه‌ها تحریم کرده است).
مشکل رایج آنجا شروع می‌شود که وبسایت شما قبل از ثبت نام در Cloudflare گواهینامه SSL دیگری داشته باشد که در این صورت به علت ناهمخوانی دو SSL و همچنین تلاش برای جایگزین کردن خود به جای آن یکی وب سایت شما دچار مشکل می‌کند.
در این مواقع شما می بایست وارد اکانت کلودفلر خود شده و در بخش SSL ، گواهینامه SSL را به شکل Flexible در بیاورید که مشکلات را از بین ببرید و گواهینامه ها را از جنگ با یکدیگر در بیاورید.
تنظیمات اضافه برای کلودفلر
آنچه ما در این آموزش cloudflare گفتیم تنها آشنایی مختصر شما با کلودفلر بود و امیدواریم آموزش استفاده از تنظیمات اینCDN معروف مورد استفاده شما قرار گرفته باشد.