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

گزینه سرعت سایت هم برای رتبه بندی سایت در گوگل و هم برای تجربه کاربر بسیار مهم است. بسیاری از کمپانی ها راه ساده و آسان برای بهبود در این موضوع یعنی بهینه سازی تصاویر را نادبده می گیرند!
در چند سال گذشته سرعت بارگذاری صفحه به دلیل ترافیک سایت و رتبه بندی بسیار مهم شده است. کاربران به سایت هایی علاقه دارند که سریع بارگذاری شوند و چون کاربران به سایت های سریع علاقه دارند، گوگل هم به دلیل علاقه کاربران سایت های سریع را می خواهد!
سایت هایی که سرعت بالایی دارند از نظر رتبه بندی در جایگاه های بالاتری قرار می گیرند. (البته استثنائاتی هم وجود داره!)
در حوزه هایی از سئو عکس ها و تصاویر نیاز به متخصصانیست که عملکرد سرور شما را بهبود بخشند ولی توجه داشته باشید که همه موضوعات مرتبط با سرعت بارگذاری صفحه پیچیده نبوده و نیازمند دانش های تکنیکال خاصی نیستند.
در این مقاله موضوع بحث ما تصاویر هستند. در بسیاری از حالات سایت هایی که سرعت بارگذاری کمی دارند مشکل تصاویر دارند. نکته جالب این است که بهینه سازی عکس ها باعث موفقیت سریع خواهد شد.
تصاویر و سرعت بارگذاری
هر زمان که سایت ها برای صفحات با سرعت کم بازرسی می شوند، تصاویر بخش مهم و اثرگذاری از موضوع هستند. بررسی وضعیت ابعاد و اندازه تصاویر قبل از قرار دادن در سایت بسیار مهم است. در این میان صفحاتی وجود دارند که تصاویری با حجم های فوق العاده بالا قرار دارند. یک صفحه نباید بیش از یک مگابایت باشد اما صفحاتی وجود دارند که بیش از 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 دیدگاه
ممنون بابت مقاله .
سلام.مرسی عالی بود
با سلام و تشکر از مطلب مفید شما،
اگر راهی برای کم کردن حجم فایل های GIF سراغ دارید، ممنون میشیم که به اشتراک بگذارید.
سلام
نرم افزار های ویندوز و مک برای این کار هستند . ما هم سعی میکنیم برنامه های مرتبط برای شما عزیزان ، داخل سایت قرار بدیم.
سلام…
قرعه کشی الکامپ به کجا رسید…؟؟
به زودی اعلام میکنیم.
واقعا مطالب سایت خیلی خوبه
عالیه
سلام…قرعه کشی سئو انجام شد … 😀 😀 ؟؟
نتیجه به زودی در سایت اعلام میشه
قرعه کشی سئو ؟؟؟ 😐 😐
به زودی در سایت اعلام میشه
مرسی از وبسایت خوبتون
مطالب سایت عالیه
مرداد تموم شد
قرعه کشی سئو….؟!
نتیجه قرعه کشی ، در پست مربوطه اعلام شد.
ممنون از نوشته عالیتون
خیلی خوب هست که کامل توضیح میدید.ممنونم
بسیار عالی بود، مثل همیشه گل کاشتین
سلام آقای حیدری عزیز
ممنون واقعا عالی بود، ابزار هایی که معرفی کرده بودید رو بررسی کردم و روی سایتم در حال انجامش هستم، دستتون درد نکنه
ممنون از شما و سایت خوبتون که بدون هیچ گونه چشم داشتی فعالیت میکنید ! همواره پاینده باشید .
عالی بود ممنون
خیلی عالی و کامل بود ممنون
با سلام باید چکار کنم که تصاویر سایتمو بهینه تر بشه؛ اصلا به نظر شما بهینه شدن
سلام
از طریق سیستم های GTmetrix بررسی کنید دوست عزیز.
خیلی استفاده کردم ممنون
آموزند و جامع بود
بسیار مفید بود .با تشکر
سلام واقعا سرعت چقدر میتونه تاثیر گذار باشه ؟
چگونه میتونم یک سایت بدم تا بررسی کنید
مطلب مفیدی بود تشکر
مسلما تاثیر زیادی داره. برای بررسی رایگان از طریق لینک بررسی رایگان اقدام بفرمایین. 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/
ممنون. چقدر سایت خوبی دارین
بهترین روش برای سئو کردن سایت چیه لطفا یه نگاه به وبسایت بکنید و نظر بدید
از طریق ایمیل با شما در ارتباطیم دوست عزیز
با سلام . ممنون از مطلب خوبتون .
سرعت سایت هم از مواردی است که ما آزمایش کرده ایم و تاثیرات خوبی در نتایج دارد . بزودی نتایج آن را در سایتمان منتشر میکنیم.
بازتاب: فارسی سازی و بهینه سازی قالب حرفه ای Arras برای وردپرس
با سلام
خیلی به کارم اومد تشکر
سلام
ممنون بابت معرفی کردن بهترین روش ها که همه چیز رو شامل میشد
آموزشی کاملا جامع و درست و حسابی بود. سپاس بی کران از شما
بازتاب: بهینه سازی تصاویر سایت
بازتاب: آیا نسبت متن به کد برای سئو مهم است؟
ممنون از مطالب مفید و کاربردی که به اشتراک می گذارید
درود
بسیار مفید بود.
ممنون خیلی خوب بود
ممنون از زحماتتون. روشهایی که گفتین کاملا کاربردی بود و خیلی به دردم خورد
سلام با خود سایت نمیشه این کارها رو انجام داد
بعضی از سیستم های مدیریت محتوا امکان بهینه سازی تصاویر به کمک افزونه ها را دارند
بازتاب: فارسی سازی و بهینه سازی قالب حرفه ای Arras برای وردپرس
سلام
ممنون آموزش خیلی خوبی بود
فقط میتونم بگم عالی بود و همچنین به عنوان حرف آخر میتونم بگم که سایتتون با قالب جدید عالی شده
سلام
ممنون دوست عزیز. شما لطف دارید
با سلام . من یک سایتی رو دارم سئو میکنم . وقتی با اینترنت شرکت کلمه کلیدی مورد نظر رو سرچ میکنم، سایت صفحه اول نشون میده .
اما وقتی با اینترنت خونه سرچ میکنم، اون سایت رو صفحه 6 و 7 نشونه میده .
ایا این به اینترنت بستگی داره که از کدوم شرکت گرفتیم یا اینکه به ای پی یا چیز دیگه .
با تشکر
سلام. این مربوط به کش مرورگرتون هست. شما کش مرورگر را پاک کنید و تست کنید
درود دوباره . با تشکر از پاسخگویی .
کش مرورگر و dns رو هر لحظه پاک میکنم .
حتی با کروم هم تست میکنم باز به همین شکل هستش.
اگه جسارت نباشه و قصد بک لینک و اسپم هم نباشه ، اگر ممکنه شما هم تست کنید تا متوجه عرض بنده بشین کلمه (#خدمات #مجالس | برای سایت aryantashrifat. com)
تو شرکت با دو تا سیستم دیگه هم تست کردم و همچنین در منزل ، باز این سایت با همین کلمه به همین شکل در گوگل نمایش داده شد.
با تشکر و احترام
برای ما هم نمیاره تو صفحه اول!
ممنون خیلی عالی افزونه برای وردپرس میشه به کار برد ؟
بله دوست عزیز
سلام
ممنونم بابت مطلب خوبتون
استاد عزیز یک سوالی داشتم ،فرض کنید یک وبلاگ داریم که روی سئو آن کار کرده ایم،و میخواهیم به سایت هدف لینک دهیم
لینک دادن فالو ارزشش بیشتر هستش یا لینک دادن به صورت بنری؟(فرض کنید یکی رو فقط باید انتخاب کنیم)
این سوال جدیدا ذهن من رو مشغول کرده،و نظرم اینه که لینک دهی بنری به صورت مستقیم ارزشش حداقل برابر یا بیشتره
نظر اساتید هم برای من مهمه لطفا در صورت امکان پاسخ رو به ایمیل بنده ارسال کنید
با تشکر
سلام. دوست عزیز لینک دادن فالو ارزش بیشتری داره
بازتاب: افزایش سرعت بارگذاری صفحه و تاثیر آن بر سئو
سلام
فرض کنید من یه وبسایت آموزشی دارم که ویدیوها رو به صورت رایگان داخل سایت قرار میدم ولی اجازه دانلود به کاربر ها رو نمیدم تا کاربر مجبور بشه ویدیوها رو آنلاین تماشا کنه تا زمان حضور کاربر در سایت بره بالا.
به نظرتون این کار برای سئو خوبه یا بد؟
سلام. خوبه و هیچ مشکلی نداره و اصلا یکی از ترفندهای نگه داشتن کاربر در سایت هست
با سلام
مطلب بسیار عالی و فوق العده ای بود و حدود یک ساعت بدنبال چنین مقاله ی عالی بودم که بالاخره پیدا کردم. واقعا عالی بود.
با سلام
ممنون مطلب خیلی خوبی بود
سلام
از وقتی سایت رو به کلود فلر متصل کردم باز نمیشه و انگار در یک 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