نوشته قبلی نوشته بعدی ۳ نکته نکات بهینه سازی تصویر برای سریع تر و رتبه بندی بالاتر

۳ نکته نکات بهینه سازی تصویر برای سریع تر و رتبه بندی بالاتر

۳ نکته نکات بهینه سازی تصویر برای سریع تر و رتبه بندی بالاتر منتشر شده در آوریل 4, 2020ارسال دیدگاه

علاقه مند به حوزه Seo & Sem

برخی از افراد یادگیرنده بینایی هستند ، برخی از جنبش های حساس و برخی دیگر شنوایی هستند. اما من معتقدم که اکثر ما زبان آموزان بی تاب هستند.

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

تبلیغات
ادامه خواندن زیر

در بسیاری موارد ، تصاویر شماره شماره یک است که بر زمان بارگذاری وب سایت تأثیر می گذارد.

همه ما می دانیم که تصاویر با کیفیت بالا به تجربه کاربری مثبت کمک می کنند ، اما نمی دانم آیا ما بیش از حد از Kool-Aid خودمان نوشیده ایم؟

۲۰۱۶ گوگل و SOASTA مطالعه تایید کرد که صفحات وب پیچیده با تصاویر بیشتر نرخ تبدیل پایین تر از صفحات وب با تصاویر کمتر بود.

در حالی که برخی وب سایت ها ممکن است از "سنگین بودن تصویر" بهره مند شوند ، ما باید واقعاً به سرعت صفحه به عنوان یک منبع کمیاب نگاه کنیم. هرچه بیشتر این منبع را به بارگذاری منابع بزرگ ، حجیم اختصاص دهیم ، اثربخشی کمتری خواهد داشت.

با طراحی مجدد صفحه GoogleSpeed Insights ، بسیاری از مردم در مورد معنی ارائه خدمات به "فرم های نسل بعدی" و اینکه چه پشتیبانی پشتیبانی از مرورگر برای برآوردن نگرانی های Google وجود دارد ، گیج می شوند.

تبلیغات
ادامه خواندن زیر

علاوه بر این ، بسیاری از مردم برای فشرده سازی و ارائه تصاویر در وب سایت خود هنوز به فن آوری های قدیمی تکیه می کنند.

برخی از نکات کاربردی را بخوانید تا به شما در بهینه سازی تصاویر برای سرعت بیشتر صفحه ضمن حفظ UX خود کمک کند.

۱٫ از تصاویر با مسئولیت پذیری استفاده کنید

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

تبلیغات
ادامه خواندن زیر

برای صفحات وب پویاتر ، می تواند تصاویر را به صورت تعاملی و حتی یک کانون طراحی شما وسوسه کند.

مگر اینکه عکاس باشید ، می توانید به جای تصاویر برای بهبود UX خود از منابع جایگزین استفاده کنید ، مانند:

  • CSS3 برای عناصر تعاملی.
  • گرافیک وکتور مقیاس پذیر برای آرم ها و طرح های ساده.
  • فیلم های جاسازی شده به جای GIF های بزرگ.
پیشنهاد ویژه  چگونه موتورهای جستجو به سؤالات پاسخ می دهند

در حقیقت ، تصاویر برداری هنگام بارگیری در دستگاههای با وضوح بالاتر تمایل به حفظ وضوح بیشتر دارند.

علاوه بر این ، به جای رمزگذاری متن در تصاویر ، که موتورهای جستجو قادر به خواندن آن نیستند ، می توانید به سمت قلم های وب که UX را بهبود می بخشد ، روی آورید.

تبلیغات
ادامه خواندن زیر

در داخل ابزار PageSpeed Insights ، اغلب متوجه می شوید که Google برای بهبود میزان مصرف بار ، توصیه می کند تصاویر را از صفحه نمایش خارج کنید. این در واقع به معنای حرکت دادن تصاویر در زیر برابر است تا حداقل بار اولیه برای کاربران سریعتر باشد.

برای دستیابی به این هدف ، باید رندر مسیر حساس خود را بهینه کنید.

چند روش برای بهینه سازی رندر مسیر حساس خود وجود دارد ، از جمله کوچک سازی ، ذخیره سازی ، و فشرده سازی همه منابع در صفحه (CSS ، JavaScript ، HTML).

تحویل درون CSS برای ماژول هدر و اسناد اصلی همچنین می تواند بارگیری فوری را در اختیار کاربران قرار دهد در حالی که تمام CSS و منابع استفاده نشده در باطن بارگذاری می شوند.

تبلیغات
ادامه خواندن زیر

علاوه بر این ، می توانید از انسداد JavaScript جلوگیری کنید تا از بارگیری منبعی که می خواهید بارگیری شود ، در اولین بار خارج شوید.

در حالی که این مسئله کاملاً پیچیده است ، ابزاری برای کمک به WordPress وجود دارد.

W3 Total Cache حافظه پنهان را ذخیره می کند و تقریباً تمام منابع CDN شما را از HTML تا عناصر وردپرس به حداقل می رساند.

علاوه بر این ، از حافظه نهان W3 Total می تواند برای بهینه سازی رندر مسیر حساس استفاده شود ، مانند استفاده از رفع انسداد جاوا اسکریپت با "async" و "تعویق" و سایر ویژگی هایی که می توانند بدون نیاز به خلاص شدن از شر تصاویر ، به بهبود بارگذاری صفحه کمک کنند.

این ابزار همچنین قابلیت های HTTP / 2 را برای بهبود بیشتر بارگذاری ها ارائه می دهد.

تبلیغات
ادامه خواندن زیر

۲٫ خودکار فشرده سازی تصویر

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

پیشنهاد ویژه  3 راه برای استفاده از XPaths با حسابرسی سایت بزرگ

اگر با WordPress کار می کنید ، می توانید Imagify را نصب کنید و کلیه تصاویر خود را بصورت عمده با یک کلیک فشرده سازی کنید. تمام تصاویر بیشتر که به کتابخانه شما اضافه می شوند با استفاده از این ابزار فشرده می شوند.

این افزونه حتی برای فشرده سازی سرعت JPG و PNG ها یک تنظیم تهاجمی ارائه می دهد.

ابزار فشرده سازی فله را تصور کنید

اگر نگران افزونه سایت خود هستید و یا با CMS با منبع بازتر کار می کنید ، می توانید از Image Optim برای فشرده سازی کلیه تصاویر خود در یک پوشه خاص استفاده کنید. این ویژگی های کشیدن و رها کردن باعث می شود که فشرده سازی تصاویر بسیار آسان باشد و سپس آنها را به سایت خود اضافه کنید.

تبلیغات
ادامه خواندن زیر

علاوه بر این ، اگر نگران فشرده سازی تصاویر در CMS خود هستید و اندازه های بزرگ پرونده را رها نمی کنید ، می توانید در Adobe Suite یا Affinity Photo با فشرده سازی نیز آزمایش کنید.

از نظر تغییر اندازه تصاویر برای دستگاه های مختلف ، طراحی پاسخگو وردپرس می تواند با استفاده از ویژگی 'srcset' این کار را برای شما انجام دهد.

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

در فشرده سازی در مقیاس بزرگتر ، فشرده سازی از بین می رود عمق بیت بیشتری را از بین می برد و وضوح پرونده را به طرز چشمگیری کاهش می دهد.

۳٫ ارائه تصاویر در قالب های نسل بعدی

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

تبلیغات
ادامه خواندن زیر

به طور سنتی ، ما به دو قالب تصویر JPEG (ضرر) و PNG (فشرده سازی بدون ضرر) اعتماد کرده ایم.

اما ابزارها توصیه می کنند فرمت های جدید تصویر ، به ویژه برای ایجاد سرعت سریع بار و حفظ نسبت های صاف نسبت به دستگاه های تلفن همراه را نشان دهند.

می توانید تعدادی از قالب های جدید از جمله JPEG 2000 ، JPEG XR و WebP را انتخاب کنید.

JPEG 2000 بسیار شبیه JPEG سنتی است ، اما با فشرده سازی بدون ضرر. این بدان معنی است که فایلهای JPEG 2000 فشرده ، ابرداده خود را بدون از بین رفتن کیفیت حفظ می کنند.

پیشنهاد ویژه  الگوریتم جدید Google ممکن است رتبه بندی صفحه را بروز کند

JPEG XR از هر دو فشرده سازی بدون ضرر و بدون ضرر در نسبت های فشرده سازی بالاتر پشتیبانی می کند.

متأسفانه ، هر دو این قالب توسط اکثر مرورگرهای اصلی از جمله Google Chrome و Firefox پشتیبانی نمی شوند. این بدان معناست که شما بدون در نظر گرفتن نیاز به قالب JPEG یا PNG دارید.

تبلیغات
ادامه خواندن زیر

تنها قالب تصویری که توسط Google Chrome و Firefox پشتیبانی می شود ، WebP است. WebP فشرده سازی بدون ضرر و بدون ضرر و همچنین پشتیبانی از انیمیشن را ارائه می دهد.

افزونه های WebP زیادی برای آزمایش وجود دارد و می توانید با استفاده از مبدل آنلاین یا Photoshop ، یک فایل JPEG یا PNG را به WebP تبدیل کنید.

البته ایده آل برای تهیه نسخه پشتیبان از یک فایل WebP ایده آل است. برای تحقق این هدف ، باید عنصر <picture> را در HTML خود به کار بگیرید تا از پشتیبان تهیه کنید.

افزونه هایی مانند WebP Express برای WordPress به طور خودکار این کار را در HTML انجام می دهند و می توانند برای تبدیل فله در کتابخانه شما استفاده شوند.

تبلیغات
ادامه خواندن زیر

در نهایت ، گزینه ای برای ارائه تصاویر در قالب های نسل بعدی با توجه به پشتیبانی محدود مرورگر ، خیلی جذاب نیست.

اما فرمت های اعمال شده مانند WebP برای ارائه تصاویر سایت به نسبت فشرده سازی بیشتر و اندازه پرونده های کوچکتر نسبت به دستگاه های تلفن همراه ، تفاوت چشمگیری در سرعت صفحه ایجاد می کند.

افکار اضافی

حفظ سرعت صفحه از طریق موبایل سخت است ، به خصوص در سایت های سنگین تصویر.

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

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

تبلیغات
ادامه خواندن زیر

منابع بیشتر:


اعتبار تصویر

تصویر برجسته: Pexels
تمام تصاویر گرفته شده توسط نویسنده ، آوریل ۲۰۱۹

منبع مقاله

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *