سئو تصاویر و سرعت بارگذاری صفحه

سئو تصاویر و سرعت بارگذاری صفحه

گزینه سرعت سایت هم برای رتبه بندی سایت در گوگل و هم برای تجربه کاربر بسیار مهم است. بسیاری از کمپانی ها راه ساده و آسان برای بهبود در این موضوع یعنی بهینه سازی تصاویر را نادبده می گیرند!

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

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

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

 

تصاویر و سرعت بارگذاری

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

اکنون در دوره ارتباطات سریع هستیم و صفحات کنترل خواهند شد. در دورانی هستیم که سایت ها می توانند تصاویری به بزرگی 25MB را در هر صفحه بارگذاری کنند. این سرعت کم صفحات روی رتبه بندی های سایت ها در نتایج جستجو گوگل و سئو سایت اثرگذار خواهند بود.

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

سئو تصاویر و سرعت بارگذاری صفحه

اما چرا نمی توان بطور کامل روی CMS برای تغییر ابعاد و اندازه تصاویر حساب باز کرد؟

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

(پاورقی: البته برای سیستم های مدیریت نظیر وردپرس افزونه هایی نیز جهت کم کردم حجم تصاویر وحود دارد)

اگر CMS تصاویر را به اصطلاح “on the fly” تغییر سایز دهد به این معنی خواهد بود که تصاویر همان طور که دریافت شده اند تغییر سایز داده اند پس تراکم سازی کمی انجام شده است.

این موضع در سایت هایی که تصاویر گوناگون در یک صفحه دارند مشکل ایجاد خواهد کرد. بطور میانگین تصاویر 40 درصد تا 60 درصد از حجم صفحه را شامل می شوند و این امکان وجود دارد که با بهینه سازی قبل از بارگذاری، 30 % تا 50 % از حجم تصاویر کاسته شود!

حالا شما به چه اقداماتی قبل از آپلود عکس در سایت نیاز دارید؟

 

آماده سازی تصاویر برای سایت

تغییر اندازه تصاویر :

تغییر سایز تصاویر بسیار مهم است. اگر یک تصویر 2400px وجود داشته باشد و چیزی که نیاز باشد یک تصویر 500px باشد حتی تغییر ابعاد در سیستم مدیریت محتوا نیاز دارد که تمام داده ها را در تصویر 2400px فشرده سازی کند.

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

در این حالت مهم ترین موضوعی که برای انجام وجود دارد این است که هر تصویر در سایت با بزرگترین سایز فیزیکی مورد نیاز ذخیره شود. یعنی اگر سه نوع تصویر مورد نیاز است و ابعاد 600*800 پیکسل بزرگترین سایز مورد نیاز باشد مطمئن شوید که تصویر اصلی در یک برنامه مانند فتوشاپ به 600*800 تغییر سایز پیدا کرده است. بعد از آن اگر هنوز نیاز به تغییر سایز در CMS باشد با یک ابعاد کوچکتر فایل فعالیت خواهید کرد.

 

انواع فایل های تصویری :

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

بسیاری از افرادی که برای بهینه سازی تصاویر در یک گروه و یا به صورت انفرادی کار می کنند تجربه چندانی نداشته و به جای استفاده از JPG از یک PNG استفاده می کنند و یا برعکس. اگر در انتخاب نوع فایل اشتباهی رخ دهد حجم فایل بالا خواهد رفت و بر سئو تاثیر منفی خواهد گذاشت.

انواع فایل های گوناگونی وجود دارد اما بیش ترین نوع فایل های مورد استفاده JPG و PNG است.

سئو تصاویر و سرعت بارگذاری صفحه

 

همه چیز در باره GIF و WebP

استفاده از فایل GIF تا زمانی که یک تصویر بصورت انیمیشنی نباشد مجاز نیست. فایل های WebP هم باعث از دست رفتن کیفیت می شوند و در بیشتر مرورگرها بجز اپرا و کروم هم پشتیبانی نیمشوند!

این به مفوم عدم توانایی در استفاده از آن ها نیست اما نمی توانید از آن ها تا زمانیکه یک روش و متد خاص برای مرورگرهای غیرپشتیبانی شده ایجاد کنید، استفاده نمایید. برای بسیاری از افراد استفاده از فایل های JPG و PNG راحت تر است اما استفاده از فایل WebP این مزیت را دارد که تصاویر ذخیره شده با حجم کم کیفیت بسیار بالایی دارند.

اگر میخواهید از فایل های WebP استفاده کنید، می توان از امکانات گوگل استفاده نمود.

 

استفاده از نوع فایل صحیح

بسیاری از افراد نوع فایل را با توجه به نوع ارائه شده در حالت اولیه انتخاب می کنند که این کار صحیحی نیست و باید با توجه به موضوعات نوع فایل مورد نظر انتخاب شود چون اگر نوع فایل اشتباهی انتخاب شود تصویر بزرگتر و یا کوچکتر از آن چه مورد نظر است نمایش داده می شود.

در جدول بالا انواع مختلفی از گونه های فایل را ملاحظه فرمودید که باید از چه فایلی در کجا استفاده شود. از خود سوال بپرسید که این نوع از فایل کجا باید استفاده شود؟ آیا این عکس یک اثر هنری است یا یک لوگو؟ برای ذخیره یک عکس از فرمت JPG استفاده شود و برای لوگو و امثال آن از فایل PNG استفاده شود.

 

JPG یا PNG؟ مسئله این است!

اختلاف این است: از دست دادن در مقابل از دست ندادن!

JPG :

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

برای اینکه مشکلی در تصاویر صفحات بوجود نیاید در هنگام ذخیره یک فایل هیچ گاه کمتر از نرخ 50 % کیفیت را استفاده نکنید. با کارت های گرافیکی امروزی نرخ 50 % را می توان کیفیت مناسبی دانست. در هنگام استفاده از این نوع فایل از تنظیمات پروگرسیو و یا تدریجی استفاده کنید چون در زمان بارگذاری امکان پرش صفحه وجود دارد.

PNG :

این نوع با نام تراکم سازی بدون از دست دادن شناخته می شود. در این حالت با ذخیره فایل اطلاعات و داده ها از بین نمی روند. دو دسته از این فایل ها وجود دارد یکی نسخه 24بیتی و دیگری نسخه 8بیتی. وقتی که سعی به کاهش سایز فایل دارید از نسخه و تنظیمات 8 بیتی استفاده کنید. وقتی که یک فایل PNG در فتوشاپ ذخیره می شود از گزینه Export استفاده کنید. می توانید رنگ های کمتر و یا سیاه و سفید استفاده کنید که باعث می شود فایل کاهش حجم 50 % تا 90 % داشته باشد.
در تصاویر زیر تفاوت یک فایل لوگو را در حالات PNG نسخه 8بیتی ، PNG نسخه 8بیتی سیاه و سفید و PSD را مشاهد خواهید کرد.

سئو تصاویر و سرعت بارگذاری صفحه

فایل اصلی = 110KB

سئو تصاویر و سرعت بارگذاری صفحه

Standard Photoshop Export – PNG 8 = 13.8 KB

سئو تصاویر و سرعت بارگذاری صفحه

Web Legacy Photoshop Export – PNG 8 = 4.56KB

سئو تصاویر و سرعت بارگذاری صفحه

Web Legacy Photoshop Export – PNG 8 (grayscale 4 colors) = 1.41KB

با استفاده از نسخه PNG-8 با کاهش رنگ، سایز و اندازه تصویر 95 % کاهش پیدا خواهد کرد. یعنی فایل 110KB به اندازه 1.41KB خواهد رسید!

 

فایل های SVG

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

در این مورد مطمئن شوید که تصاویر SVG کم حجم تر از تصاویر ذخیره شما باشد. هم چنین از اجرای تگ ها و برچسب ها اطمینان حاصل کنید تا از منافع تگ های alt بهرمند شوید. یک ابزار مناسب برای ایجاد فایل ها و تصاویر SVG که می توان مورد استفاده قرار داد Inkscape است.

 

سرعت بارگذاری سایت

گوگل اعلام کرده که پروژه ایندکس اولیه موبایل به زودی فراگیر خواهد شد یعنی وضعیت نسخه موبایلی و محتوای آن وضعیت و رنک سایت را مشخص خواهد کرد. فاکتور سرعت صفحه روی نسخه موبایلی اثرگذاری بیشتری دارد و باید سئوکاران و وبمسترها روی این مورد توجه بیشتری داشته باشند.

 

نتیجه گیری:

همانطور که بارها و بارها اعلام شده، سرعت بارگذاری سایت برای کاربران سایت بسیار مهم است و تاثیر مستقیم بر بانس ریت سایت شما خواهد گذاشت. البته همانطور که در مقاله هم گفته شده، این سرعت بارگذاری در نسخه موبایل بسیار مهمتر است، ولی شما می بایست سایت را در هر دو نسخه موبایل و دسکتاپ از نظر سرعت بارگذاری بهینه سازی نمایید.

منبع

  • تاریخ انتشار: 20 مرداد 1396
  • 61 دیدگاه

61 دیدگاه در "سئو تصاویر و سرعت بارگذاری صفحه"
  • telegrambaz

    ممنون بابت مقاله .

  • حمید

    سلام.مرسی عالی بود

  • ایده پرداز

    با سلام و تشکر از مطلب مفید شما،
    اگر راهی برای کم کردن حجم فایل های GIF سراغ دارید، ممنون میشیم که به اشتراک بگذارید.

    • fallahian

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

  • #شارژک

    سلام…
    قرعه کشی الکامپ به کجا رسید…؟؟

    • fallahian

      به زودی اعلام میکنیم.

  • faraz

    واقعا مطالب سایت خیلی خوبه
    عالیه

  • سعید

    سلام…قرعه کشی سئو انجام شد … 😀 😀 ؟؟

    • fallahian

      نتیجه به زودی در سایت اعلام میشه

  • مهناز

    قرعه کشی سئو ؟؟؟ 😐 😐

    • fallahian

      به زودی در سایت اعلام میشه

  • محسن عبدی

    مرسی از وبسایت خوبتون

  • بانه آنلاین

    مطالب سایت عالیه

  • مرداد تموم شد….؟!

    مرداد تموم شد
    قرعه کشی سئو….؟!

    • fallahian

      نتیجه قرعه کشی ، در پست مربوطه اعلام شد.

  • پنجره دوجداره

    ممنون از نوشته عالیتون
    خیلی خوب هست که کامل توضیح میدید.ممنونم

  • آی او اس

    بسیار عالی بود، مثل همیشه گل کاشتین

  • پروژه معماری

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

  • تلگرام باز

    ممنون از شما و سایت خوبتون که بدون هیچ گونه چشم داشتی فعالیت میکنید ! همواره پاینده باشید .

  • درسا

    عالی بود ممنون

  • الناز

    خیلی عالی و کامل بود ممنون

  • همایون

    با سلام باید چکار کنم که تصاویر سایتمو بهینه تر بشه؛ اصلا به نظر شما بهینه شدن

    • fallahian

      سلام
      از طریق سیستم های GTmetrix بررسی کنید دوست عزیز.

  • Newskala.ir

    خیلی استفاده کردم ممنون
    آموزند و جامع بود

  • تاپ نوا

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

  • کارشناسی رنگ

    سلام واقعا سرعت چقدر میتونه تاثیر گذار باشه ؟
    چگونه میتونم یک سایت بدم تا بررسی کنید
    مطلب مفیدی بود تشکر

    • fallahian

      مسلما تاثیر زیادی داره. برای بررسی رایگان از طریق لینک بررسی رایگان اقدام بفرمایین. https://www.3eo.ir/%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C-%D8%B1%D8%A7%DB%8C%DA%AF%D8%A7%D9%86-%D8%B3%D8%A7%DB%8C%D8%AA/

  • مشهد بویلر

    ممنون. چقدر سایت خوبی دارین

  • gholamreza

    بهترین روش برای سئو کردن سایت چیه لطفا یه نگاه به وبسایت بکنید و نظر بدید

    • fallahian

      از طریق ایمیل با شما در ارتباطیم دوست عزیز

  • کریمی

    با سلام . ممنون از مطلب خوبتون .
    سرعت سایت هم از مواردی است که ما آزمایش کرده ایم و تاثیرات خوبی در نتایج دارد . بزودی نتایج آن را در سایتمان منتشر میکنیم.

  • بازتاب: فارسی سازی و بهینه سازی قالب حرفه ای Arras برای وردپرس

  • تاپ نوا

    با سلام

    خیلی به کارم اومد تشکر

  • قالب وردپرس

    سلام
    ممنون بابت معرفی کردن بهترین روش ها که همه چیز رو شامل میشد
    آموزشی کاملا جامع و درست و حسابی بود. سپاس بی کران از شما

  • بازتاب: بهینه سازی تصاویر سایت

  • بازتاب: آیا نسبت متن به کد برای سئو مهم است؟

  • ثبت اختراع

    ممنون از مطالب مفید و کاربردی که به اشتراک می گذارید

  • مهدی نصیری

    درود
    بسیار مفید بود.

  • شیائومی

    ممنون خیلی خوب بود

  • پروژه معماری

    ممنون از زحماتتون. روش‌هایی که گفتین کاملا کاربردی بود و خیلی به دردم خورد

  • سینا

    سلام با خود سایت نمیشه این کارها رو انجام داد

    • امیر حیدری

      بعضی از سیستم های مدیریت محتوا امکان بهینه سازی تصاویر به کمک افزونه ها را دارند

  • بازتاب: فارسی سازی و بهینه سازی قالب حرفه ای Arras برای وردپرس

  • علی

    سلام
    ممنون آموزش خیلی خوبی بود
    فقط میتونم بگم عالی بود و همچنین به عنوان حرف آخر میتونم بگم که سایتتون با قالب جدید عالی شده

    • امیر حیدری

      سلام
      ممنون دوست عزیز. شما لطف دارید

  • جواد

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

    اما وقتی با اینترنت خونه سرچ میکنم، اون سایت رو صفحه 6 و 7 نشونه میده .

    ایا این به اینترنت بستگی داره که از کدوم شرکت گرفتیم یا اینکه به ای پی یا چیز دیگه .

    با تشکر

    • امیر حیدری

      سلام. این مربوط به کش مرورگرتون هست. شما کش مرورگر را پاک کنید و تست کنید

      • جواد

        درود دوباره . با تشکر از پاسخگویی .

        کش مرورگر و dns رو هر لحظه پاک میکنم .
        حتی با کروم هم تست میکنم باز به همین شکل هستش.
        اگه جسارت نباشه و قصد بک لینک و اسپم هم نباشه ، اگر ممکنه شما هم تست کنید تا متوجه عرض بنده بشین کلمه (#خدمات #مجالس | برای سایت aryantashrifat. com)
        تو شرکت با دو تا سیستم دیگه هم تست کردم و همچنین در منزل ، باز این سایت با همین کلمه به همین شکل در گوگل نمایش داده شد.

        با تشکر و احترام

        • امیر حیدری

          برای ما هم نمیاره تو صفحه اول!

  • اجاره خودرو

    ممنون خیلی عالی افزونه برای وردپرس میشه به کار برد ؟

    • امیر حیدری

      بله دوست عزیز

  • ramin

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

    • بنی طبا

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

  • بازتاب: افزایش سرعت بارگذاری صفحه و تاثیر آن بر سئو

  • amirhossein

    سلام
    فرض کنید من یه وبسایت آموزشی دارم که ویدیوها رو به صورت رایگان داخل سایت قرار میدم ولی اجازه دانلود به کاربر ها رو نمیدم تا کاربر مجبور بشه ویدیوها رو آنلاین تماشا کنه تا زمان حضور کاربر در سایت بره بالا.
    به نظرتون این کار برای سئو خوبه یا بد؟

    • امیر حیدری

      سلام. خوبه و هیچ مشکلی نداره و اصلا یکی از ترفندهای نگه داشتن کاربر در سایت هست

  • انواع کسب و کار اینترنتی

    با سلام
    مطلب بسیار عالی و فوق العده ای بود و حدود یک ساعت بدنبال چنین مقاله ی عالی بودم که بالاخره پیدا کردم. واقعا عالی بود.

  • تصفیه فاضلاب بهداشتی انسانی

    با سلام
    ممنون مطلب خیلی خوبی بود

  • بهرام

    سلام
    از وقتی سایت رو به کلود فلر متصل کردم باز نمیشه و انگار در یک loop از ریدایرکت شدن ها میوفته
    gtmetrix هم این خطا رو میده:
    avoid landing page redirects for the following chain of redirected urls
    http://javaherlux.com
    https://javaherlux.com
    https://www.javaherlux.com
    سایتم خودش ssl داره و فکر میکنم این مورد هم مربوط به بخش تنظیمات ssl در کلودفلر باشه و ssl رایگانی که کلود فلر فعال میکنه و ریدایرکت شدن هاو…
    می تونید در این مورد راهنماییم کنید چطور این مشکل رو برطرف کنم؟

    • امیر حیدری

      سلام. دقیقا مشکلی که جی تی متریکس گرفته برای ssl و همچنین عدم کنترل www هست.یعنی سایت شما با 4 ادرس باز میشه! برای استفاده از cdn باید خیلی دقیق تنظیمات انجام بشه

  • حسین

    دوستان برای کاهش فایل های JPG و PNG و ….
    از این سایت کمپرسور استفاده کنید برای وبسایتتون راضی نگهتون میدارد 🙂
    COmpressor.io