سئو | آموزش سئو و بهینه سازی سایت

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

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

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

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

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

     

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

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

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

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

     

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

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

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

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

    این موضع در سایت هایی که تصاویر گوناگون در یک صفحه دارند مشکل ایجاد خواهد کرد. بطور میانگین تصاویر ۴۰ درصد تا ۶۰ درصد از حجم صفحه را شامل می شوند و این امکان وجود دارد که با بهینه سازی قبل از بارگذاری، ۳۰ % تا ۵۰ % از حجم تصاویر کاسته شود!

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

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

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

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

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

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

     

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

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

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

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

     

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

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

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

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

     

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

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

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

     

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

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

    JPG :

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

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

    PNG :

    این نوع با نام تراکم سازی بدون از دست دادن شناخته می شود. در این حالت با ذخیره فایل اطلاعات و داده ها از بین نمی روند. دو دسته از این فایل ها وجود دارد یکی نسخه ۲۴بیتی و دیگری نسخه ۸بیتی. وقتی که سعی به کاهش سایز فایل دارید از نسخه و تنظیمات ۸ بیتی استفاده کنید. وقتی که یک فایل PNG در فتوشاپ ذخیره می شود از گزینه Export استفاده کنید. می توانید رنگ های کمتر و یا سیاه و سفید استفاده کنید که باعث می شود فایل کاهش حجم ۵۰ % تا ۹۰ % داشته باشد.
    در تصاویر زیر تفاوت یک فایل لوگو را در حالات PNG نسخه ۸بیتی ، PNG نسخه ۸بیتی سیاه و سفید و PSD را مشاهد خواهید کرد.

    فایل اصلی = ۱۱۰KB

    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 با کاهش رنگ، سایز و اندازه تصویر ۹۵ % کاهش پیدا خواهد کرد. یعنی فایل ۱۱۰KB به اندازه ۱٫۴۱KB خواهد رسید!

     

    فایل های SVG

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

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

     

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

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

     

    نتیجه گیری:

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

    منبع

    No votes yet.
    Please wait...

    امیر حیدری

    دوست دارم مبانی بهینه سازی و سئو سایت را بصورت اصولی و به دور از هرگونه دروغ و بزرگنمایی به وبمسترها ارائه بدم...
    امیر حیدری

    ۳۴ ديدگاه

    1. telegrambaz گفت:

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

    2. حمید گفت:

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

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

      • fallahian گفت:

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

    4. #شارژک گفت:

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

    5. faraz گفت:

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

    6. سعید گفت:

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

    7. مهناز گفت:

      قرعه کشی سئو ؟؟؟ :-| :-|

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

    9. مرداد تموم شد....؟! گفت:

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

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

    11. آی او اس گفت:

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

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

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

    14. الناز گفت:

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

    15. همایون گفت:

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

    16. Newskala.ir گفت:

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

    17. تاپ نوا گفت:

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

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

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

    20. gholamreza گفت:

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

    21. کریمی گفت:

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

    22. […] نظر سئو و ساخت ریز عکس ها و تگ های alt هم مشکل داشت که اونم تصحیح […]

    23. تاپ نوا گفت:

      با سلام

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

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


    دیدگاه خود را بیان کنید برای درسا

    برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک کنید.




    :wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:

    seo telegram
    seo instagram