نحوه بهینه سازی تصاویر در وردپرس (برای هر دو سرعت + سئو)

وقتی صحبت از بهینه سازی تصویر می شود ، احتمالاً به اندازه کافی درباره متن alt شنیده اید.


در واقع 20 راه مختلف برای بهینه سازی تصاویر وجود دارد (اگر شما هم SEO و هم بهینه سازی سرعت را در نظر بگیرید). اینها نمرات بهتری در GTmetrix / Pingdom به شما می دهند ، به طور بالقوه شما را در جستجو بالاتر می برند و بارگذاری محتوای شما را خیلی سریع تر می کند. من توانسته ام گزارش 100٪ GTmetrix را با بار بار 0.5 ثانیه بدست آورم … بهینه سازی تصاویر من در وردپرس بخش بزرگی از آن بود.

تصاویر را قبل از بارگذاری بهینه کنید – استفاده از برنامه ای مانند Photoshop برای بهینه سازی تصاویر قبل از بارگذاری آنها می تواند کار زیادی را در خود ذخیره کند. می توانید داده های EXIF ​​را تغییر اندازه داده ، فشرده سازی ، نوار کنید ، در قالب صحیح ذخیره کنید (به عنوان مثال PNG / JPEG) ، و یک نام پرونده توصیفی بنویسید (که در صورت استفاده از متن به طور خودکار به عنوان متن alt استفاده خواهد شد. افزونه Automatic Image Alt Attributes) این 6 بهینه سازی است!

اگر به تصاویر با وضوح بالا نیاز دارید (به عنوان مثال یک وب سایت عکاسی) ، شما ممکن است بخواهید تغییر اندازه و فشرده سازی آنها را انجام دهید (مرحله 3 و 8) زیرا این موارد می توانند کیفیت را کاهش دهند ، حتی اگر این مقدار کمی باشد.

ابزارهای اصلی استفاده می کنم – من استفاده می کنم GIMP برای تغییر اندازه / فشرده سازی تصاویر (ویرایشگر تصویر مورد نظر من), موشک WP برای افزونه حافظه نهان من, تصور کنید برای فشرده سازی بیشتر بدون ضرر + حذف داده های EXIF ​​، هر دو Cloudflare و StackPath CDN, افزونه ویژگی های خودکار تصویر ALT برای استفاده خودکار از نام پرونده تصویر به عنوان alt text ، و کش مطلوب گراواتار برای ذخیره Gravatars در نظرات. من استفاده می کنم WP Review Pro به عنوان افزونه قطعه ثروتمند من, جستجوی بهتر جایگزین کنید برای به روزرسانی انبوه تصاویر (بسیار مفید) ، و GTmetrix به عنوان ابزار تست سرعت من لیست کامل ابزارها را مشاهده کنید.

Contents

1. تصاویر غیرقابل استفاده را پیدا کنید

سایت خود را از طریق اجرا کنید GTmetrix و این موارد را در برگه صفحه Speed ​​/ YSlow مشاهده خواهید کرد. پنج مورد اول معمولاً مخصوص صفحه هستند, به این معنی که GTmetrix فقط تصاویر غیرقابل استفاده را برای صفحه ای که آزمایش می کنید نشان می دهد. 3 مورد آخر معمولاً در کل سایت شما اتفاق می افتد. البته ، این تنها 7 راه برای بهینه سازی تصاویر است ، اما برخی از مهمترین ، بنابراین ما ابتدا این موارد را انجام خواهیم داد.

  • ارائه تصاویر مقیاس پذیر: برای تصحیح ابعاد ، تصاویر بزرگ را تغییر اندازه دهید (گام 2)
  • ابعاد تصویر را مشخص کنید: در HTML یا CSS تصویر یک عرض / ارتفاع را مشخص کنید (مرحله 3)
  • بهینه سازی تصاویر – فشرده سازی تصاویر بدون ضرر (مرحله 4)
  • شانه کردن تصاویر با استفاده از sprites CSS – ترکیب چندین تصویر در 1 تصویر (مرحله 5)
  • از تغییر مسیر URL جلوگیری کنید – تصاویر را از نسخه اشتباه www یا http (بازدید کنندگان) ارائه نکنید (مرحله 6)
  • از یک شبکه تحویل محتوا استفاده کنید – ارائه تصاویر / پرونده ها از CDN (مرحله 7)
  • حافظه پنهان مرورگر – حافظه نهان / فایل های ذخیره شده با استفاده از افزونه حافظه نهان خود (مرحله 8)
  • favicon را کوچک و قابل ذخیره سازی کنید – از یک فاویکون 16x16px استفاده کرده و آن را ذخیره کنید (مرحله 9)

بهینه سازی تصویر در GTmetrix

با ثابت کردن تصاویری که در چندین صفحه ظاهر می شوند ، شروع کنید: آرم ، تصاویر نوار جانبی / پاورقی ، و غیره همچنین با استفاده از تصاویر دارای مقیاس کوچک شروع می شود زیرا ممکن است مجبور شوید آنها را با ابعاد جدید تغییر اندازه / بارگیری مجدد کنید.

2. خدمت تصاویر مقیاس پذیر

اگر دیدید ارائه تصاویر مقیاس پذیر خطاها در GTmetrix ، به این معنی است که شما تصاویر بزرگ دارید و باید اندازه آنها را در ابعاد صحیح تغییر اندازه دهید (که GTmetrix برای شما فراهم می کند). تا زمانی که ورق تقلب در ابعاد تصویر خود را دنبال کنید (به تصویر زیر مراجعه کنید) ، نباید این خطاها را مشاهده کنید. اما اگر قبلاً تصاویر بزرگ را بارگذاری کرده اید ، لازم است آنها را به صورت دستی تغییر اندازه دهید یا از افزونه استفاده کنید.

سرویس-مقیاس-تصاویر

تغییر اندازه فله تصاویر با استفاده از یک پلاگین – مشکل این مسئله این است که تصاویر مختلف خواستار ابعاد مختلف (ابزارک ، اسلایدر ، تصاویر با عرض کامل) هستند. در حالی که اکثر افزونه های بهینه سازی تصویر گزینه ای برای تغییر اندازه تصاویر در یک دارند تنها مجموعه مشخصی از ابعاد ، شما باید واقعاً آنها را قبل از بارگذاری مجدد / تغییر اندازه دهید. اگر تصاویر را با استفاده از یک افزونه تغییر اندازه دهید ، در صورت عدم رضایت از نتایج ، از پشتیبان گیری از تصاویر اصلی (و فقط چند مورد آزمایش کردن) را نگه می دارید..

تغییر اندازه تصاویر بزرگ

تغییر اندازه تصاویر به صورت دستی – از GTmetrix ابعاد صحیح را بدست آورید و اندازه / دوباره بارگذاری مجدد آنها را بدست آورید. به یاد داشته باشید ، GTmetrix فقط برای صفحه ای که آزمایش می کنید ، تصاویر غیرقابل استفاده را نشان می دهد.

یک برگه تقلب از ابعاد تصویر وب سایت خود ایجاد کنید
لغزنده ها ، نوار کناری وبلاگ ، تصاویر برجسته و متن محتوای وبلاگ ، همه از ابعاد مشخصی درخواست می کنند که تصاویر باید به آنها تغییر اندازه دهند. یک ورق تقلب ایجاد کنید تا بتوانید قبل از آپلود کردن آنها در وردپرس از آنها تغییر اندازه دهید. این امر به ویژه در صورتی که بسیاری از زمینه های وب سایت خود را داشته باشید که به اندازه های مختلف تصاویر نیاز دارید ، و اگر چندین طراح / ویرایشگر دارید ، بسیار مفید است.

مثال:

  • تصاویر کشویی: 1900 (w) x 400 (ساعت)
  • تصاویر چرخ فلک: 115 (ساعت)
  • تصاویر ویجت: 414 (w)
  • تصاویر ارسال شده به وبلاگ تمام صفحه: 680 (w)
  • تصاویر برجسته: 250 (w) x 250 (ساعت)
  • تصویر OG فیس بوک Yoast: 1200 (w) x 628 (ساعت) – مرحله 11
  • عکس YOast Twitter OG 1024 (w) x 512 (ساعت) – مرحله 11

مستطیل عرض 680 پیکسل

3. ابعاد تصویر را مشخص کنید

این به معنی اضافه کردن عرض / ارتفاع به HTML یا CSS تصویر است. ویرایشگر ویژوال این کار را برای شما انجام می دهد (اما ابزارک ها ، برخی از سازندگان صفحه و HTML سفارشی انجام ندهید). چند صفحه را در GTmetrix تست کنید.

GTmetrix ابعاد تصویر را به شما می گوید…

ابعاد خاص تصویر GTmetrix

عرض / ارتفاع را به HTML تصویر اضافه کنید …

ابعاد تصویر را مشخص کنید

4. فشرده سازی تصاویر بی باک

این موارد “بهینه سازی تصاویر” در GTmetrix هستند. بسیاری از برنامه ها (به عنوان مثال ، Photoshop و Gimp) امکان صادر کردن در فشرده سازی دارند. اگرچه این یک شروع عالی است ، پلاگین های فشرده سازی تصویر معمولاً نتایج بهتری می گیرند. من ترجیح می دهم تصور کنید, کراکن, ShortPixel, یا دود کردن. سایر افزونه ها به صورت بصری باعث کاهش کیفیت تصویر می شوند و ممکن است باعث ایجاد خطا در تصاویر شما شوند.

فشرده سازی تصاویر با Imagify

  1. ثبت نام برای تصور کنید
  2. نصب کنید پلاگین را تصور کنید
  3. با دستورالعمل زیر از شما خواسته می شود:
  4. کلید API خود را از حساب Imagify خود وارد کنید
  5. سطح فشرده سازی خود را تنظیم کنید (نرمال ، پرخاشگر ، فوق العاده)
  6. تصور کنید همه (عکس زیر) با انبوه همه تصاویر موجود در سایت شما را بهینه می کند
  7. پس از رسیدن به حد خود ، 4.99 دلار بپردازید یا برای بازنشانی حد خود در ماه آینده صبر کنید

تصور کنید

آزمایش کنید که چگونه تصاویر با سطوح مختلف فشرده سازی به نظر می رسند …

مقایسه فشرده سازی را تصور کنید

پس از ورود به سیستم ، بخش عمده ای از تصاویر را در سایت خود بهینه کنید …

تصور-وردپرس-بهینه سازی تصویر

گزینه ای را برای بهینه سازی تصاویر در بارگذاری تنظیم کنید …

بهینه سازی تصاویر در بارگذاری تصور کنید

5. ترکیب تصاویر در CSS Sprites

در صفحه اصلی من ، شما ممکن است فکر کنید که 21 نماد را می بینید ، اما آنها در واقع 1 تصویر واحد هستند. این یک است CSS sprite, جایی که چندین تصویر را در یک تصویر واحد ترکیب می کنید. این تعداد تصاویر (و درخواست ها) را کاهش می دهد به همین دلیل صفحه اصلی من فقط 10 درخواست دارد. به جای بارگذاری 21 تصویر ، بارگذاری می شود 1. برای این کار به دانش CSS نیاز دارید یا از یک استفاده می کنید مولد اسپریت CSS.

CSS Sprites

GTmetrix CSS Sprites

فقط از Sprites CSS برای تصاویر تزئینی استفاده کنید – هنگامی که 21 تصویر را در 1 ترکیب می کنید ، تعداد زیادی از برچسب های alt را از دست می دهید. درصورتی که محتوای آنها را توصیف کنید ، تصاویر مهم را با sprites های CSS ترکیب نکنید. در مورد من ، سرعت صفحه اصلی من مهمتر از SEO است … من از گزارش GTmetrix صفحه اصلی خود در بسیاری از مکان ها استفاده می کنم (بنابراین باید آن را تمیز نگه دارم) و صفحه اصلی خود ، باور کنید یا نه ، یک هدف را هدف قرار نمی دهد. کلمه کلیدی. هدف این است که ترسیم آموزش های من … و سریع بارگذاری شود.

6. از تغییر مسیر URL جلوگیری کنید

اگر به HTTPS ، نسخه های www تغییر یافته یا خدمات CDN را شروع کرده اید ، باید تمام تصاویر (و پیوندها) خود را با استفاده از جستجوی بهتر جایگزین کنید بنابراین آنها در حال ارائه نسخه صحیح هستند. در غیر این صورت ممکن است ببینید تغییر مسیرها را به حداقل برسانید یا از دامنه های بدون کوکی استفاده کنید خطاها.

تغییر مسیرها را به حداقل برسانید

دامنه های رایگان کوکی

از افزونه Better Search Replace استفاده کنید تا آدرس های تصویری به صورت عمده به روز شود …

جستجوی بهتر جایگزین نسخه های WWW شوید

جستجوی بهتر جایگزین HTTP در مقابل HTTPS شوید

7. ارائه تصاویر از CDN

برای تغییر URL های شما به تغییر URL های تصویر نیاز دارد URL CDN

  • URL تصویر قدیمی (بدون CDN): https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • URL تصویر جدید (با CDN): https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare در مقابل StackPath – من از هر دو استفاده می کنم Cloudflare و StackPath از آنجا که مراکز داده بیشتری = تحویل سریعتر محتوا. Cloudflare دارد 200+ مرکز داده, StackPath دارد مراکز داده 34+ که به شدت در ایالات متحده واقع شده اند (جایی که بیشتر بازدید کنندگان من در آن قرار دارند). Cloudflare URL CDN را به شما اختصاص نمی دهد بنابراین ما از CDN StackPath برای ارائه تصاویر استفاده خواهیم کرد.

StackPath-Data-Centers

مرحله 1: CDN را انتخاب کنید. من استفاده می کنم StackPath (آنها یک آزمایش 30 روزه دارند).

گام 2: در داشبورد ، روی زبانه CDN ، سپس کلیک کنید یک سایت CDN StackPath ایجاد کنید

StackPath-CDN-Tab

دامنه StackPath-CDN

CDN-URL-StackPath

مرحله 3: URL CDN خود را کپی کرده و آن را در افزونه حافظه نهان خود بچسبانید (در زیر مربوط به WP Rocket است)…

WP-Rocket-CDN

مرحله 4: URL های تصویری را جایگزین کنید تا URL CDN خود را وارد کنید (با استفاده از جستجوی بهتر جایگزین کنید).

جستجوی بهتر آدرس اینترنتی CDN را جایگزین کنید

مرحله 5: با استفاده از URL های قدیمی تصویر را بررسی کنید Chrome DevTools. گاهی اوقات ، افزونه کش یا CDN Enabler از این امر مراقبت می کند ، به جز پیوندهایی در CSS و JavaScript که دارای کدگذاری سخت هستند. برای پیوندهایی که باقی مانده است ، آنها به طور معمول در هستند فایل ها (مانند CSS یا Javascript) که به بررسی و جایگزینی دستی نیاز دارند. Chrome DevTools همه دامنه های مورد استفاده در حال حاضر را به شما نشان می دهد.

مرحله 6: سایت خود را در سیستم اجرا کنید GTmetrix و “شبکه تحویل محتوا” باید YSlow سبز باشد. در “به حداقل رساندن تغییر مسیرها” یا “استفاده از دامنه های بدون کوکی” نیز نباید مشکلی داشته باشید.

CDN GTmetrix YSlow

8. تصاویر کش

اکثر افزونه های حافظه نهان گزینه ای برای حافظه پنهان مرورگر, که تصاویر را ذخیره می کند. من از WP Rocket استفاده می کنم که به افزونه شماره 1 کش در چندین نظرسنجی در فیس بوک امتیاز داده شد ، و من آموزش آن را دارم. عملکرد سریع به طور کلی در پلاگین کش شماره 1 رایگان رتبه بندی شده است (من یک آموزش هم برای آن دارم).

حافظه پنهان مرورگر

9- Favicon را کوچک و Cacheable کنید

اطمینان حاصل کنید که مورد علاقه شما 16x16px است ، دارای فرمت favicon.ico است ، و با استفاده از افزونه حافظه پنهان ذخیره می شود..

10. داده های EXIF ​​را حذف کنید

داده های Exif حاوی اطلاعاتی مانند دیافراگم ، سرعت شاتر ، ISO ، طول کانونی ، مدل دوربین ، تاریخ گرفتن عکس و موارد دیگر. برای تصاویر در وب سایت خود نیازی به این ندارید. افزونه VA حذف Exif پس از آپلود تصاویر ، داده های Exif را بطور خودکار حذف می کند.

اکثر افزونه های بهینه سازی تصویر (از جمله Imagify ، ShortPixel ، Kraken ، EWWW و Smush) گزینه ای برای حذف داده های EXIF ​​به طور خودکار دارند. در اینجا تنظیمات Imagify…

حذف داده EXIF ​​را تصور کنید

11. بهینه سازی تصویر Cloudflare

Cloudflare همچنین چند روش برای بهینه سازی تصاویر دارد. سراب و لهستانی در شما یافت می شوند تنظیمات سرعت Cloudflare در حالی که محافظت از Hotlink در شما یافت می شود تنظیمات Shape Shield.

Cloudflare Mirage (ویژگی حرفه ای) – درخواست های تصویر را کاهش می دهد ، بارهای زیادی را تنبل می کند و زمان بارگذاری تصویر را در دستگاه های تلفن همراه با اتصالات شبکه کند بهبود می بخشد. در اینجا جزئیات بیشتر …

  • تصاویر را بر اساس دستگاه / اتصال بازدید کننده اندازه می دهد. بازدید کننده در یک ارتباط ضعیف تا زمانی که به پهنای باند بالاتری نرسد ، نسخه کوچکتر (وضوح پایین) را دریافت می کند.
  • میزان درخواست ها را کاهش می دهد – به جای ارسال چندین درخواست برای همه تصاویر در وب سایت ، Mirage این درخواست را به یک درخواست تبدیل می کند تا بازدید کنندگان بتوانند فوراً تصاویر را مشاهده کنند.
  • تصاویر بارهای تنبل (فقط هنگامی که کاربران به پایین حرکت کردند و در واقع تصویر را مشاهده کردند ، آنها را بارگیری می کند).

Cloudflare Mirage تصویر

Cloudflare لهستانی (ویژگی ویژه) – داده های EXIF ​​را نوار می کند و تصاویر را فشرده می کند.

Cloudflare Image لهستانی

Cloudflare Hotlink Protection – از کپی کردن تصاویر و درج قرار دادن آنها در وب سایت خود جلوگیری می کند ، که (از آنجا که شما هنوز هم میزبان آن تصویر هستید) باعث افزایش پهنای باند شما می شود.

Cloudflare Hotlink Protection

12. تصاویر بار بار

این تاخیر می کند بارگذاری تصاویر تا زمانی که کاربران به پایین صفحه بروید و به وضوح تصویر را ببینید. در حالی که بار بار اولیه را بهبود می بخشد ، بارگیری مداوم تصاویر هنگام حرکت می تواند بسیار آزار دهنده باشد. من شخصاً فقط فیلم هایی با بار تنبل دارم ، زیرا بارگذاری این عکس ها بسیار طولانی است.

شما می توانید استفاده کنید افزونه Lazy Load, افزونه Lazy Load For Videos, یا از WP Rocket استفاده کنید …

WP-Rocket-Lazy-Load

13. ذخیره به صورت صحیح

PNG در مقابل JPEG – PNG فشرده نشده است (اندازه پرونده بزرگتر) و باید در تصاویر ساده و بدون رنگ زیاد استفاده شود. JPEG یک فشرده سازی (اندازه پرونده کوچکتر) است که کمی کیفیت تصویر را کاهش می دهد اما در اندازه کوچکتر است و در تصاویر با رنگ های زیادی استفاده می شود. GIMP و دیگر برنامه های ویرایش تصویر باید به طور خودکار از قالب صحیح استفاده کنند ، اما این هنوز هم خوب است که بدانید.

jpg_vs_png

تصویر توسط لابنول

14. نام پرونده های تصویر

موتورهای جستجو از اسناد متنی alt و نام فایل استفاده می کنند ، بنابراین فایل های خود را قبل از بارگذاری آنها در وردپرس نامگذاری کنید. اگر از افزونه ای استفاده می کنید متن alt را بطور خودکار اضافه می کند بر اساس نام پرونده ، نامگذاری پرونده های شما تمام کاری است که شما باید انجام دهید! کلمات کلیدی را پر نکنید ، فقط تصویر را توصیف کنید.

نام پرونده های برچسب

15. متن Alt

اینها باید همانند نام پرونده تصویر شما باشند. شما می توانید استفاده کنید افزونه Automatic Image Alt Attributes به طور خودکار از نام پرونده به عنوان متن alt استفاده کنید. تا زمانی که از تصاویر مربوطه استفاده می کنید ، بعضی از آنها باید به طور طبیعی (بیت) کلمه کلیدی شما را درج کنند … هیچ دلیلی برای پر کردن کلمات کلیدی در تصاویر وجود ندارد ، مجازات پر کردن کلمه کلیدی.

Alt Text را به صورت خودکار به تصاویر اضافه کنید – استفاده از افزونه Automatic Image Alt Attributes. اکنون هر وقت یک تصویر اضافه کنید ، افزونه متن alt را اضافه می کند که همان نام پرونده است …

alt ="WP-Fastest-Cache-Plugin" عرض ="577" قد ="247" />

متن Alt موجود نیست – Screaming Frog ابزاری رایگان است که به شما نشان می دهد تمام تصاویر از دست رفته متن alt است.

  • دانلود Screaming Frog SEO Spider
  • وب سایت خود را وارد کرده و روی “شروع” کلیک کنید تا وب سایت را خز کنید
  • روی برگه تصاویر کلیک کنید
  • به مرور کلی بروید متن Alt وجود ندارد (به زیر مراجعه کنید)
  • آن تصاویر را در سایت خود قرار دهید و متن alt اضافه کنید

گمشده قورباغه تصویر از دست رفته در تصویر

16. باز کردن نمودار (فیس بوک + توییتر)

این باعث می شود فرمت محتوا به درستی در اشتراک گذاشته شود در فیس بوک / توییتر ، خصوصاً تصویر شما از آنجا که هر دو شبکه از ابعاد سفارشی برای نمایش آن استفاده می کنند ، در غیر این صورت خنده دار به نظر می رسد.

اشتراک در فیس بوک

در صورت استفاده از Yoast ، به تنظیمات “Social” بروید و Open Graph را برای هر دو Facebook / Twitter فعال کنید …

Yoast-Social-Meta-Data

اکنون یک صفحه / ارسال را ویرایش کنید ، سپس روی پیوند “اشتراک” در Yoast کلیک کنید و گزینه هایی را برای بارگذاری تصاویر سفارشی برای فیس بوک (1200 عرض x 628 ارتفاع) و توییتر (1024 عرض x 512 ارتفاع) مشاهده خواهید کرد..

بهینه سازی رسانه های اجتماعی-اجتماعی

17. تصاویر در قطعه های برجسته

قطعه های برجسته وقتی Google قسمتهای از محتوای شما را در بالای نتایج جستجو نشان می دهد و می تواند (اما تضمین شده نیست) برای شامل یک تصویر. Google این نتایج را از هر نتیجه صفحه 1 می گیرد, با این حال این به عهده آنهاست که آیا آنها حتی یک قطعه یا تصویر برجسته را به نمایش می گذارند. این همچنین باعث می شود قطعه قطعه شما دو بار ظاهر شود و روشی باورنکردنی برای تردد زیاد است.

3 نوع قطعه ویژه

  • پاسخ ها
  • جداول
  • لیست ها

عکس های ویژه

چگونه می توان قطعه های ویژه را در Google دریافت کرد

  • جایی که مردم می خواهند یک کلمه کلیدی را هدف قرار دهید مختصر پاسخ
  • استفاده کنید مرورگر کلمه کلیدی Moz برای شناسایی کلمات کلیدی سوال
  • برای یافتن کلمات کلیدی بیشتر سؤالی از پاسخ عمومی استفاده کنید
  • انتخاب کنید که آیا پاسخ باید یک پاراگراف ، لیست یا جدول باشد
  • یک گرافیک زیبا (یا عکس بگیرید) که کلمه کلیدی را توصیف می کند ، طراحی کنید
  • از طول کاراکتر بهینه استفاده کنید (به عکس زیر که از عکس گرفته شده است مراجعه کنید) موز)
  • با استفاده از منابع با کیفیت (پیوندها ، گرافیک ها و غیره) محتوای مبتنی بر واقعیت ایجاد کنید
  • کلمات کلیدی هدفمند که از قبل دارای قطعه برجسته هستند اما یک کار ضعیف را انجام می دهند
  • اگر قصد جعبه پاسخ را دارید ، با استفاده از یک بازی دقیق ، کلمه کلیدی خود را هدف قرار دهید
  • اطمینان حاصل کنید که در صفحه 1 برای کلید واژه هستید ، در غیر اینصورت ، محتوای را بهبود بخشید

طول قطعه های برجسته بهینه

18. داده های ساختاری

تصاویر قابل استفاده در داده های ساختاری (و نشانها) برای انواع محتوای زیر:

فیلم Snippet Rich

دستور العمل-سرشار از قطعه قطعه

قطعه محصول غنی

از چه پلاگین Rich Snippets استفاده می کنم?
من استفاده می کنم WP Review Pro MyThemeShop (این صفحه ای است که من از آن استفاده می کنم) که از 14 نوع داده شامل دستور العمل ها و بررسی محصولات پشتیبانی می کند. من قبلاً از WP Rich Snippets استفاده می کردم اما توسعه دهنده این افزونه را رها می کند و به مدت 2 سال به روز نشده است ، و افزونه All In One Schema فقط خسته کننده است (کمبود گزینه و یک ظاهر طراحی شده). استفاده از WP Review Pro بسیار آسان است.

19. تصاویر سبک

سبک خود را فراموش نکنید! من در بیشتر موارد از مرز استفاده می کنم.

  • عناوین تصویر
  • پیوندهای تصویر
  • مرزهای تصویر
  • شرح تصاویر

20. تغییر اندازه GIF

درست همانطور که تصاویر را در ابعاد صحیح تغییر اندازه می دهید ، GIF ها نیز باید اندازه گیری شوند (استفاده کنید GIF GIF).

تغییر اندازه GIF…

تغییر اندازه GIF

سپس آن را فشرده کنید …

GIF ها را فشرده کنید

نتیجه :-)

GIF سگ را بهینه کنید

21. کش کشش گراواتار

اگر پست دارید با نظرات زیادی, گراواتارس می تواند گزارش شما را کاملاً خراب کند. می توانید آنها را غیرفعال کنید ، نظرات را خراب کنید تا فقط تعداد مشخصی از نظرات را نشان دهید ، یا یک افزونه کش کشش Gravatar را امتحان کنید. ممکن است لازم باشد کمی آزمایش کنید زیرا برخی از افزونه ها در بعضی از وب سایت ها کار نمی کنند.

  • کش گراواتار (حالت مطلوب, هری, یا FV Gravatar Cache)
  • Gravatars را به طور کامل غیرفعال کنید
  • Gravatar پیش فرض خود را خالی کنید
  • نظراتی را که ارزش افزوده ندارند حذف کنید
  • Gravatar پیش فرض خود را روی یک تصویر دلخواه روی سرور خود تنظیم کنید
  • تصاویر Gravatar خود را در ابعاد کوچکتر محدود کنید (مثلاً 32 پیکسل)
  • نظرات در صفحه WP غیر ممکن است فقط 20 نظر را همزمان نشان دهید
  • اگر هیچ یک از این کارها نیست ، بررسی کنید آموزش ذخیره سازی موشک WP Rocket

کش-گراواتار-تصاویر

22. از قرار دادن تصاویر در وب سایتهای خارجی خودداری کنید

همیشه تصاویر را در وب سایت خود بارگذاری کنید ، هرگز آنها را کپی / چسب نکنید. در غیر این صورت شما به دلیل درخواستی که در سرور شما میزبانی نشده است به درخواست های اضافی رسیدگی می کنید ، بنابراین مجبور است آن را از جایی دیگر بکشد.

23. ابزارهای بهینه سازی تصویر

از استفاده از افزونه هایی با قابلیت تکراری خودداری کنید – تصور کنید ، ShortPixel ، Kraken ، EWWW و Smush در اصل یکسان را انجام می دهند (فشرده سازی بدون ضرر ، حذف داده های EXIF ​​، تغییر اندازه تصاویر). WP Rocket دارای گزینه هایی برای بار تنبل ، حافظه پنهان و CDN (و پاکسازی پایگاه داده + میزبانی Google Analytics بصورت محلی) است که اکثر افزونه های حافظه نهان ، آنها را از استفاده از افزونه های اضافی نجات نمی دهد..

  • عکس جالب – برنامه افزودنی Chrome برای گرفتن عکس از تصاویر.
  • ویژگی های Alt تصویر خودکار – به طور خودکار متن alt را با استفاده از نام فایل تصویری وارد می کند.
  • جستجوی بهتر جایگزین کنید – از آن برای فله تصاویر به روز استفاده کنید.
  • Cloudflare – CDN رایگان با 200+ مرکز داده, محافظت از لینک مستقیم, سراب ، پرداخت.
  • Chrome DevTools – اگر دامنه خطای تغییر مسیر GTmetrix را دارید ، دامنه هایی را که استفاده می شود نشان می دهد.
  • ژنراتور اسپری CSS – ابزار رایگان برای ترکیب چندین تصویر در 1 Sprite CSS.
  • بهینه ساز تصویر EWWW – فشرده سازی بدون ضرر ، حذف EXIF ​​، تغییر اندازه.
  • GifGifs – اندازه GIF ها را تغییر می دهد.
  • GIMP – نرم افزار ویرایش تصویر رایگان که من استفاده می کنم.
  • GTmetrix – به شما نشان می دهد کدام تصاویر باید بهینه شوند.
  • تصور کنید – فشرده سازی بدون ضرر ، حذف EXIF ​​، تغییر اندازه.
  • بداخلاقی – اندازه بزرگتر از تصویر بزرگ را برای تعمیر “سرویس تصاویر مقیاس” در GTmetrix.
  • کراکن – فشرده سازی بدون ضرر ، حذف EXIF ​​، تغییر اندازه.
  • بار تنبل – افزونه ای که تاخیر در بارگذاری تصاویر را تاخیر می اندازد.
  • تنبل بار برای فیلم ها – افزونه ای که بارگذاری فیلم ها را به تاخیر می اندازد تا زمانی که آنها قابل مشاهده شوند.
  • کش مطلوب گراواتار – انبارهای Gravvatars (یا امتحان کنید) حافظه نهان هری).
  • Screaming Frog SEO Spider – متن alt گمشده ، توضیحات متا ، و غیره را پیدا کنید.
  • ShortPixel – فشرده سازی بدون ضرر ، حذف EXIF ​​، تغییر اندازه.
  • دود کردن – فشرده سازی بدون ضرر ، حذف EXIF ​​، تغییر اندازه.
  • StackPath – CDN 10 دلار در ماه با 31 مرکز داده.
  • سوئیفت عملکرد Lite – # 1 افزونه کش کش در اکثر نظرسنجی های فیس بوک.
  • بررسی WP – افزونه غنی از قطعات (به دریافت تصاویر در نتایج جستجو کمک می کند).
  • موشک WP – پلاگین کش شماره 1 در اکثر نظرسنجی های فیس بوک.
  • VA حذف Exif – نوار داده های غیر ضروری از تصاویر.
  • بزرگنمایی  -افزونه Chrome برای گرفتن بزرگنمایی کامل هنگام گرفتن عکس از تصاویر.
  • جوان – داده های متا فیس بوک / توییتر را قادر می سازد تا تصاویر هنگام اشتراک گذاری به درستی قالب بندی شوند.

سوالات متداول

&# x2705؛ چگونه خطاهای بهینه سازی تصویر را در GTmetrix برطرف می کنید?

با فشرده سازی بدون ضرر آنها را با استفاده از افزونه هایی مانند ShortPixel ، Imagify یا Smush فشرده سازی کنید. من از ShortPixel استفاده می کنم زیرا همیشه این خطا را در GTmetrix برطرف می کند.

&# x2705؛ چگونه خطاهای Serve Scaled Image را در GTmetrix برطرف می کنید?

این بدان معنی است که شما نیاز به برش / تغییر اندازه تصاویر در ابعاد صحیح دارید. اگر تصاویر خیلی بزرگ هستند ، GTmetrix خطاهای تصویر مقیاس شده ای را نشان می دهد و ابعاد صحیحی را که باید تغییر اندازه دهید به شما می گوید..

&# x2705؛ چگونه می توان خطاهای Dimension Image را در GTmetrix برطرف کرد?

HTML تصویر را مشاهده کنید و بررسی کنید که از عرض و ارتفاع مشخصی برخوردار باشد ، همانطور که در این آموزش نشان داده شده است.

&# x2705؛ هر روش دیگری برای سریعتر بارگذاری تصاویر?

حذف داده های EXIF ​​و استفاده از CDN برای ارائه تصاویر ، بیشترین تفاوت را در خارج از توصیه های GTmetrix ایجاد می کند.

&# x2705؛ کدام یک از بهینه سازی تصویر بهتر است?

من از ShortPixel استفاده می کنم زیرا تقریباً از دست دادن کیفیت صفر وجود دارد و آیتم Optimize Images را در GTmetrix برطرف می کند.

شما چی فکر میکنید?
آیا گزارش GTmetrix شما کمی بهتر به نظر می رسد؟ بگذارید در نظرات بدانید! و اگر می خواهید نکات بیشتری که نمرات / بار بار شما را حتی بهتر می کند ، به راهنمای سرعت کامل وردپرس من مراجعه کنید.

به سلامتی,
تام

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map