نقشه سایت چیست؟

نقشه سایت یا sitemap فایلی است که صفحات سایت در آن لیست شده و توسط آن می توانید ساختار طراحی سایت(طراحی سایت فروشگاهی، طراحی سایت شرکتی، قیمت طراحی سایت)‌ و صفحات، عکس ها و ویدیو ها را به موتور جستجو مانند گوگل و بینگ معرفی کنید. به غیر از آدرس های URL می توانید اطلاعات دیگری به نام متادیتا را نیز به موتور های جستجو بدهید. متادیتااطلاعاتی در مورد صفحه هستند مانند زمان آخرین بروز رسانی، اولویت بندی صفحات نسبت به یکدیگر از نظر اهمیت، مدت زمان فیلم، نوع عکس و موارد متفاوت دیگر .

در حال حاضر چها نوع نقشه سایت شامل صفحات، عکس ، ویدیو و خبر وجود دارند که به دلیل کاربرد زیاد نقشه سایت صفحات و عکس در همه سایت ها،‌ این دو نوع sitemap در این مطلب توضیح داده شده اند.

چرا به نقشه سایت احتیاج داریم؟

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

داشتن سایت مپ در موارد زیر حائز اهمیت است:

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

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

انواع فرمت نقشه سایت

گوگل از فرمت های مختلف سایت مپ پشتیبانی می کند. همه سایت مپ ها مجاز هستند که حداکثر حاوی 50 هزار URL باشند و سایز قایل آنها در حالت غیر فشرده از 10 مگابایت بیشتر نشود. منظور از حالت غیر فشرده، حالتی است که فایل نقشه سایت با تکنیک هایی مانند GZIP فشرده نشده باشد.

XML

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

نمونه زیر یک نمونه ساده از سایت مپ XML است.

<?"xml version="1.0" encoding="UTF-8?>

<"urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9>

<url>

<loc>http://www.example.com/foo.html</loc>

</url>

</urlset>

 

RSS, mRSS, and Atom 1.0

اگر شما بلاگی دارید که از RSS یا Atom feed پشتیبانی می کند، شما می توانید آدرس همه feed ها را به عنوان سایت مپ به موتور جستجو معرفی کنید. گوگل از RSS نسخه 2 و Atom feed نسخه 1 پشتیبانی می کند. همچنین می توانید با استفاده از < mRSS feed جزئیات محتوای ویدیویی سایت را به گوگل بدهید.

Text

اگر سایت مپ شما فقط حاوی URL است و هیچ متادیتایی در آن وجود ندارد، می توانید یک سایت مپ متنی با فرمت txt داشته باشید که در هر خط آن فقط یک URL وجود داشته باشد. توجه داشته باشید که:

• فایل سایت مپ متنی به صورت 8-UTF ذخیره شده باشد
• فایل سایت مپ هر نامی مانند sitemap.txt می تواند داشته باشد.
• و فایل متنی سایت مپ فقط می تواند شامل URL باشد مانند:

http://www.example.com/file1.html

http://www.example.com/file2.html

راهنمای گوگل وبمستر در مورد محتوا (بخش چهارم)

ساختار URL

ساختار URL سایت باید تا جایی که امکان دارد ساده و قابل درک برای کاربر انسان باشد. در URL از ID یا اعداد استفاده کنید. به عنوان نمونه یک کاربر با دیدن آدرس زیر نمی تواند کلمات به جای متوجه شود که صفحه مربوطه در مورد چه موضوعی است :

http://www.example.com/article.aspx?id=1392

ولی با دیدن آدرس زیر می تواند متوجه شود که صفحه در مورد بهینه سازی برای موتور جستجو است:

http://www.example.com/seo.html

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

http://www.example.com/seobook.html

تلاش کنید از خط تیره برای تفکیک کلمات استفاده کنید و از underline یا derscore منظور تفکیک کلمات استفاده نکنید. آدرس زیر یک نمونه صحیح است:

http://www.example.com/seo-book.html

استفاده از URL های خیلی طولانی و یا استفاده بیش از حد از پارامتر در URL ممکن است که مشکلاتی برای خزنده موتورهای جستجو ایجاد کند که در نتیجه آن ممکن است همه صفحات ایندکس نشوند.

استفاده از robots.txt

با استفاده از robots . txt دسترسی ربات های موتور جستجو را به URL هایی که به صورت داینامیک به وجود می آیند محدود کنید. به عنوان نمونه آدرس هایی که با جستجوی کاربران در سایت، استفاده از فیلترها و یا مرتب کردن کالاها در وب سایت به وجود می آیند نیازی به ایندکس شدن ندارند. علت آن این است که محتوای آنها با صفحات اصلی سایت که فیلتری در آنها اعمال نشده است، تکراری است.

استفاده از آدرس canonical

در دسترس بودن یک صفحه با بیش از یک URL در سیستم های مدیریت محتوا یک امر طبیعی است.جهت جلوگیری از ایندکس شدن و همچنین شناخته شدن این گونه صفحات به عنوان صفحات تکراری توسط موتور جستجوی گوگل باید از canonical استفاده کرد. به عنوان نمونه اگر یک صفحه با سه آدرس در دسترس بود، شما باید یکی از آدرس ها را به عنوان canonical یا آدرس اصلی انتخاب کنید و آن را طبق نمونه زیر در کد HTML هر سه صفحه در قسمت<head> قرار دهید. در این صورت اگر خزنده گوگل وارد هر کدام از سه صفحه شود، متوجه می شود که آدرس اصلی کدام URL است و باید فقط یک URL که همان آدرس canonical است را ایندکس کند.

<"/link rel="canonical" href="https://www.weby00Z.Com/google-adwords>

مواردی که ممکن است منجر به در دسترس بودن یک صفحه با بیش از یک URL شوند عبارتند از:
وجود شناسه session کاربر، پارامتر جستجو یا فیلتر در URL :

https://webyooz.com/books/seo?gclid=ABCD

https://www.webyooz.com/products?category=seo&lang=per

https://www.webyooz.com/books/seo/nima-jafari.html

سیستم بلاگ به صورت خودکار دو آدرس را برای هر مطلب تولید کند :

https://www.webyooz.com/books/seo/nima-jafari.html

https://www.webyo0z.com/books/it/web-design/seo.html

سرور به نحوی تنظیم شده باشد که صفحات با www و بدون www در دسترس باشد :

https://www.webyooz.com/books/seo/nima-jafari.html

https://webyooz.com/books/seo/nima-jafari.html

سرور به نحوی تنظیم شده باشد که صفحات با https و http در دسترس باشد :

http://www.webyooz.com/books/seo/nima-jafari.html

https://www.webyooz.com/books/seo/nima-jafari.html

آدرس canonical

گوگل وبمستران را تشویق به استفاده از آدرسی canonical می کند ولی استفاده از آن اجباری نیست. در صورتیکه آدرس canonical در <head> مشخص نشده باشد، گوگل تصمیم خواهد گرفت که کدام آدرس را باید به عنوان آدرس اصلی در نظر بگیرد.
با تنظیم گوگل سرچ کنسول برای گوگل مشخص نمایید که آدرس با www مد نظر شما است و یا آدرس بدون www. پس از انجام این تنظیم، در صورتیکه آدرس های ساخت سایت در گذشته هم با www و هم بدون www در گوگل ایندکس شده باشند، همه آدرس ها به آن نسخه ای که مد نظر شما است تبدیل خواهند شد.

استفاده از ” rel= ” nofollow برای لینک های مشخص

“nofollow” به دو صورت مورد استفاده قرار می گیرد. در صورتیکه “nofollow” به عنوان ما robots در <head> یک صفحه استفاده شود، خزنده موتور جستجو هیچ کدام از لینک های داخل و خارجی درون آن صفحه را دنبال نخواهد کرد.

</"meta name="robots" content="nofollow>

حال اگر بخواهیم که خزنده موتور جستجو فقط لینک یا لینک های مشخصی را دنبال نکند باید از” rel= ” nofollow در تگ <a> در HTML استفاده کنید.

<a href="signin.php" rel="nofollow"> sign in</a>

در صورت استفاده از ” rel= ” nofollow برای یک لینک، PageRank گوگل بین صفحه مبدا و لینک مقصد منتقل نمی شود. قبل از اینکه “rel = ” nofollowابداع شود، جهت جلوگیری از انتقال PageRank و مانع شدن از دنبال شدن یک لینک توسط خزنده موتور جستجو، از تکنیک هایی مان ریدایرکت کردن استفاده می کردند و آن آدرس واسط که عملیات ریدایرکت را انجام می داد را توسط robots . txt بر روی خزنده موتور جستجو مسدود می کردند.

برخی از کاربردهای nofollow

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

صفحه بندی محتوا

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

استفاده از ” rel= ” next و ” rel= ” prev

استفاده از ” rel= ” next و ” rel= ” prev در HTML برای آدرس های صفحات، یک سیگنال مهم برای گوگل در تشخیص صفحه بندی است. فرض کنید سه صفحه با URL های زیر در سایت وجود دارد :

https://www.webyooz.com/article-page1.html

https://www.webyooz.com/article-page2.html

https://www.webyooz.com/article-page3.html

• در <head> صفحه اول با استفاده از تگ لینک، آدرس URL صفحه دوم را مشخص نمایید:

<"link rel="next" href="http://www.webyooz.com/article-pape2.html>

• در <head> صفحه دوم با استفاده از تگ لینک،  آدرس URL صفحه اول و سوم را مشخص نمایید:

<"link rel="prev" href="http://www.webyooz.com/article-pape1.html>

<"link rel="next" href="http://www.webyooz.com/article-pape3.html>

• در <head> صفحه سوم با استفاده از تگ لینک، آدرس URL صفحه دوم را مشخص نمایید:

  <"link rel="prev" href="http://www.webyooz.com/article-pape2.html>

   

  در صورتیکه پارامترهایی مانند session ID در URL وجود داشته باشند که باعث تغییر در محتوا نشود، و البته همان طور که در بخش آن پارامترها باید در ” rel = “prev و  “rel = ” next باشند و البته همانطور که در بخش “استفاده از آدرس canonical” گفته شد، این گونه پارامترها در آدرس canonical نباید وجود داشته باشند. به عنوان نمونه اگر آدرس صفحه 2 از یک مقاله به صورت زیر باشد :

  http://example.com/article?story=abc&page=2&sessionid=123

  آنگاه در <head> تگ های زیر را خواهیم داشت :

  "link rel="canonical">
</"href="http://example.com/article?story=abc&page=2&page=2

  "link rel="prev>
</"href="http://example.com/article?story=abc&page=1&sessionid=123

  "link rel="next>
</"href="http://example.com/article?story=abc&page=3&sessionid=123

• 


نحوه ساخت باکس اطلاعات سایت در کنار نتایج جستجو

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

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

معرفی باکس اطلاعات (information box)

به این نوع باکس‌ها که در شکل بالا مشخص است Knowledge Graphs یا information box نیز گفته می‌شود، همان طور که از نام این باکس مشخص است یک سری اطلاعات کلی در اختیار کاربر میدهد. گوگل از سایت‌های مختلف که مورد تایید خودش است اطلاعات را ایندکس میکند و در نتایج جستجو نشان میدهد باکس اطلاعات از نوع Rich Answers است (Rich Answers چیست)، میتوان گفت گوگل اکثر نوشته‌های داخل باکس اطلاعات را از سایت ویکی پدیا استخراج می‌کند و وقتی شما نام برندهای معروف را سرچ میکنید خلاصه‌ای از آن برند در سمت راست همراه با نتایج جستجو نشان داده میشود، اگر زبان موتور جستجوی گوگل شما فارسی باشد باکس اطلاعات به شکل فارسی برای شما نمایش داده میشود و اگر زبان گوگل انگلیسی باشد باکس اطلاعات به انگلیسی نشان میدهد البته اگر اطلاعات در ویکی پدیا به این زبان‌ها ترجمه شده باشد.

در باکس اطلاعات موارد زیر اصولا درج می‌شود

[list icon=”momizat-icon-checkmark” icon_color=”#FFC107″ icon_color_hover=”#8c8c8c” ]آدرس شرکت یا دفترکاری,شماره تلفن,ساعات کاری,امتیاز,لوگو و عکس‌های مربوط به شرکت,آدرس شرکت در نقشه و …[/list]

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

میتوان گفت این عمل مستقیما دست شما نیست و نمیتوانید چنین باکس‌هایی را برای ساخت سایت خود در نتایج جستجو بسازید. گوگل براساس محبوبیت نام برند شما، تعداد دفعات سرچ شده نام برند، میزان لایک ، اشتراک گذاری و فالورهای شما در صفحات رسمی شبکه‌های اجتماعی و به شکل کلی براساس فاکتورهایی که خودش مد نظر دارد و انیکه چقدر میتواند به برند شما اعتماد کند چنین باکس‌هایی را برای سایت شما در نتایج جستجو ایجاد میکند. ولی توجه کنید که درست است این عمل مستقیما دست شما نیست ولی با داشتن سیاست‌های مناسب و گذر زمان میتوانید به نتیجه لازمه برسید، به این مورد توجه کنید که برای اضافه کردن شبکه‌های اجتماعی به این باکس اطلاعات باید از داده‌های ساخت یافته (structured data) استفاده کنید ( structured data چیست ) ولی بقیه موارد را گوگل از اطلاعات موجود در ویکی پدیا فراخوانی میکند.

معرفی باکس بیزینس (Business box)

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

[list icon=”momizat-icon-checkmark” icon_color=”#FFC107″ icon_color_hover=”#8c8c8c” ]آدرس شرکت یا دفترکاری,شماره تلفن,ساعات کاری,امتیاز,لوگو و عکس‌های مربوط به شرکت,آدرس شرکت در نقشه و …[/list]

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

آپدیت (July 11 2018): قبلا باید به بیزینس گوگل مراجعه میکردید برای اینکه بتونید مثل عکس وکیل مشخصات شرکت خودتان را ثبت کنید ولی حال کافی است وارد ادرس Google Map شوید و در مکانی که شرکت شما در واقعیت وجود دارد را در نتیجه مشخص کنید و سپس کلیک راست کرده و گزینه Add a missing place انتخاب کنید و سپس به راحتی مشخصاتی که از شما می‌خواهید را به شکل صحیح درج کنید.

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

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

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

به طور کلی میانگین حجم صفحات وب سایت‌ها به همراه تصاویر و ویدیوها 3376 کیلوبایت می‌باشد که بالای 70 درصد آن راHTTP Archive اشغال می‌کند. این مقدار حجم در مرورگر‌ بازدیدکنندگان وب سایت برای مشاهده و دانلود بسیار زیاد است و این حجم با پیشرفت وب سایت و افزایش مقالات و تصاویر بیشتر نیز می‌شود و این افزایش در کاهش سرعت و کاهش رتبه سئو تاثیرگذار است. (برای ارزیابی حجم محتوای سایت خود می‌توانید از ابزارهای سئو و یا از سایت httparchive.orgاستفاده نمایید.)

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

اینجا ، جایی است که لود تنبل (Lazy Load) وارد صحنه می‌شود. لود تنبل یک تکنیک بهینه‌سازی صفحات وب سایت است که توسط آن هنگام ورود به یک صفحه وب تنها اطلاعات قابل مشاهده لود می‌شود و بقیه اطلاعاتی که در زیر وجود دارند ، پس از اسکرول کردن شروع به لود شدن می‌کنند.

لود تنبل یا Lazy Load یکی از اقداماتی است که گوگل در صورت مشاهده بسیار هیجان زده می‌شود و به وب سایت شما اهمیت می‌دهد و همچنین از این تکنیک در وب سایت‌هایی که مقالات و صفحات تعداد زیادی از ویدیوهای ibed شده و تصاویر با رزولوشن بالا را در خود جای داده‌اند، به اجبار باید استفاده کرد.

لود تنبل چگونه کار می‌کند؟

لود تنبل به شکل زیر کار می‌کند :

• مرورگر صفحات وب را به صورت DOM در می‌آورد که در این مدل هنگام لود صفحه، تصاویر و ویدیوها لود نمی‌شوند.
• جاوااسکریپت با تکنیکی به نام Determine تصاویر و ویدیوها را براساس محتوایی که پس از لود صفحه مشاهده می‌شود، دانلود و نمایش می‌دهد. تصاویر و ویدیوهایی که در پایین صفحه هستند نیز به همین ترتیب پس از اسکرول دانلود و نمایش داده می‌شوند.
• دانلود و نمایش فایل‌های اضافی را تا زمانی که کاربر به محل مشخص فایل ویدیویی اسکرول نکند ، به تاخیر می‌اندازد و سپس بعد از اسکرول تمامی فایل‌های مشخص شده برای لود تنبل آن قسمت لود می‌شوند.

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

لود تنبل وردپرس :

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

پس از بررسی 12 افزونه مربوط به لود تنبل و فعال کردن و تست چندین باره ، ما 4 افزونه خیلی حرفه ای را که بهبود قابل ملاحظه ای در عملکرد وب سایت شما ایجاد می‌کنند را شناسایی کردیم و قصد داریم در ادامه معرفی کنیم ولی قبل از آن به سوالی پاسخ دهیم:

آیا تصاویر و ویدیو‌ها واقعا در کاهش سرعت سایت موثر هستند ؟

قصد داریم با یک ارزشیابی کوچک، تاثیر تصاویر و ویدیوها را بر سرعت سئو سایت به شما نمایش دهیم. برای نمایش ارزشیابی، تصمیم گرفتیم که روی هاست سئوراز ، یک وردپرس نصب کنیم. پوسته 2016 وردپرس که بدون هیچ افزونه بهینه سازی و تکنیک ذخیره کش و… در وردپرس موجود بود را فعال کردیم. تصویر زیر نمایانگر نتایج آنالیز و بررسی ارزشیابی سئو و سرعت سایت در ابزار آنلاین pingdom قبل از اضافه کردن تصاویر و ویدیو می‌باشد.

همانطور که مشاهده می‌کنید ، وب سایت بسیار سبک است و حجم صفحه کوچکتر از 155 کیلوبایت است و زمان لود صفحه نیز کمتر از نیم ثانیه است و برای پیدا کردن و حل کردن مشکلات در این وضعیت باید خیلی سخت‌گیر باشیم. به نظر شما هنگامی که یک تصویر حجیم و یک ویدیو ibed شده از یوتیوب را در صفحه قرار دهیم ، در این نتایج چه رخ می‌دهد؟

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

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

بهبود سرعت لود صفحه از طریق افزونه‌های لود تنبل

افزونه‌های BJ Lazy Load ، Lazy Load XT ، a3 Lazy Load و Rocket Lazy Load چهار افزونه‌ای هستند که سرعت تحویل صفحات وب را به میزان قابل توجهی افزایش می‌دهند. بیایید بررسی کنیم که هرکدام از این افزونه‌ها به نوبه خود چه کارهایی انجام می‌دهند. چندین افزونه دیگر هم مورد آزمایش قرار گرفتند ولی آن‌طور که باید در سرعت وب سایت تاثیر گذار نبودند.

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

1 – BJ Lazy Load

افزونه BJ Lazy Load یک افزونه بسیار محبوب در بین کاربران وردپرسی می‌باشد و در بیشتر از 40 هزار وب سایت وردپرسی نصب شده و فعال است و بر اساس 60 بازخورد منتقدان ، رتبه 4.1 را از 5 دریافت کرده است.

نصب و فعالسازی بی درد سری دارد و کافیست وارد بخش افزودن افزونه در وردپرس شوید عبارت BJ Lazy Load را جست‌وجو کنید ، بعد از یافتن افزونه آن را نصب کنید ، سپس فعالسازی کنید . بعد از فعالسازی در منوی تنظیمات یک زیر منو به نام BJ Lazy Load ساخته می‌شود.

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

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

برای گرفتن سبک‌ترین و بی‌نظیرترین نتیجه ممکن ، من توصیه می‌کنم که یک تصویر تک رنگ و هم‌رنگ با پس زمینه پوسته با فرمت png تهیه کنید.

همچنین شما میتوانید بعضی از class های CSS موجود در فایل html صفحه را نیز در لیست عبور (محروم) قرار دهید تا آن class ها به صورت لود تنبل ، لود نشوند. سپس بعد از اینکار شما میتوانید آن class ها را به فیلم ها و تصاویری که قصدندارید به صورت تنبل لود شوند بدهید تا به صورت عادی لود شوند. در نهایت ، شما می‌توانید مقدار لازم برای نزدیکی برای نمایش تصاویر قبل از دانلود و نمایش را بشناسید.

بیایید بررسی کنیم که با BJ Lazy Load چقدر سرعت وب سایت ما تغییر کرده است.

این زمان لود فوق‌العاده سریع است. وب سایت را دوازده بار در ساعت های مختلف شبانه روز تست کردم و متوجه شدم که زمان لود وب سایت میانگین بین 300 تا 400 میلی ثانیه است. آزمودن وب سایت بلافاصله بعد از فعالسازی پلاگین ملاک نیست و باید چندین بار تست صورت گیرد.

درحالی که شاهد افزایش سرعت وب سایت شده‌ایم ولی حجم وب سایت 0.3 مگابایت افزایش یافته است و از 1.7 مگابایت به 2 مگابایت افزایش داشته است. برای حجم چه اتفاقی افتاده است ؟ با توجه به نظریه ای که داشتیم ، با فعالسازی لود تنبل باید حجم صفحه کاهش یابد و صفحه سبک تر شود . پس از بررسی وضعیت حال حاضر این نتیجه چیزیست که دست یافتم :

به صورت پیش‌فرض، وردپرس برای ارائه تعداد زیادی از اندازه یک فایل‌ تصویری در مرورگر ها از ویژگی‌ای (attribute) به نام srcset برای تصاویر در تگ img استفاده می‌کند. مرورگر از طریق لیستی از اندازه‌ها و لود کوچکترین نسخه از تصویر ، فضای موجود را پر می‌کند. این بدان معناست که اگر شما یک تصویر بزرگ را آپلود کنید ، وردپرس با تکنیک‌های پیش‌فرض خود تصویر را به چند نسخه به اندازه‌های کوچک‌تر تبدیل می‌کند و سپس نسبت به سایز صفحه نمایش و تنظیمات پوسته سایز کوچک تولید شده را برای مرورگر بازدید کننده ارسال می‌کند. مرورگر بازدیدکنندگان کوچک‌ترین تصویر مناسب را براساس میزان پیکسل های دردسترس در مکان قرارگیری تصویر دریافت خواهد کرد.

افزونه BJ Lazy Load رفتار پیش‌فرض وردپرس در مورد تصاویر را به طور کامل تغییر می‌دهد. ویژگی data-lazy-srcset جایگزین ویژگی srcset می‌شود و نتیجه نهایی این است که به جای پایین آوردن اندازه و وضوح تصویر ، تصویر با وضوح و اندازه کامل به صورت تنبل، لود خواهد شد.

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

با آزمایش دیداری ، شما وب سایت خود را لود می‌کنید و مشاهده می‌کنید که چه رخ داده است . برای مثال اگر از پس زمینه ای غیر سفید در پس زمینه وب سایت خود استفاده می‌کنید ، حتما باید یک تصویر جایگزین برای نمایش قبل از لود تنبل تصاویر قرار دهید. به صورت پیش‌فرض افزونه یک تصویر gif سفید رنگ برای شما قرار می‌دهد که در تنظیمات می‌توانید آن را تغییر دهید.

2 – Lazy Load XT

افزونه Lazy Load XT در آزمایشات ما به خوبی ظاهر شد و یکی دیگر از افزونه های خوب لود تنبل وردپرس به حساب می آید. با آماری حدود 1000 نصب فعال مشخصا به اندازه BJ Lazy Load محبوب نیست ولی از نظر رتبه بندی امتیاز 4.9 از 5 امتیاز را آورده است که تنها یک بازخورد 5 امتیاز را به این افزونه نداده بود.

پس از فعالسازی ، افزونه در منو تنظیمات یک زیر منو Lazy Load XT ایجاد می‌کند و شما می‌توانید از آن طریق افزونه را پیکربندی کنید. پس از اولین بررسی دیداری وب سایت متوجه خواهید شد که این افزونه بیشتر از لود تنبل تصاویر و ویدیو‌ها عمل می‌کند. شما علاوه بر لود تنبل می‌توانید فایل‌های جاوااسکریپت و سی اس اس را Minify کنید. کتابخانه های جاوا اسکریپت و سی اس اس را توسط انواع CDN مانند CloudFlare لود کنید و اسکریپت‌ها را به فوتر وردپرس منتقل کنید.

در این افزونه چند گزینه اضافی وجود دارد که می‌توانید با استفاده از آن‌ها باعث بهبود سرعت سایت وردپرس شوید. به هر حال ، از وقتی که شروع به آزمایش لود تنبل کردیم ، من تنظیمات افزونه را به صورت پیش‌فرض رها کردم، فایل‌های جاوااسکریپت و سی اس اس را Minify و به فوتر منتقل نکردم ، کش سرور را خالی نکردم . با توجه به این موضوع در وب سایت Pingdom ، وضعیت سرعت حال حاضر وب سایتم را آزمایش کردم.

پس از انجام آزمایش توسط pingdom ، حجم وب سایت همان 2 مگابایت باقی مانده بود ولی زمان لود صفحه کمی بیشتر از افزونه BJ Lazy Load شده بود . گرچه با این افزونه در لود صفحه 50 درصد کاهش زمان لود حاصل شد ولی به هر حال این آزمایش بیانگر قدرت کمتر این افزونه نسبت به BJ Lazy Load می‌باشد. بعد از مشاهده منو درختی فایل‌ها متوجه شدیم که دقیقا همان فایل‌هایی که در BJ Lazy Load لود می‌شوند با فعال سازی Lazy Load XT نیز لود می‌شوند و به جای تصاویر بهینه سازی شده ، پس از فعال سازی افزونه‌ها دقیقا همان تصویر آپلود شده با همان کیفیت به صورت تنبل، لود می‌شود.

پس از بررسی این موضوع ، دلیلی برای اینکه چرا لود BJ Lazy Load بهتر از Lazy Load XT یافت نمی‌شد تا اینکه به تصویر پیش‌نمایش قبل از لود تصویر اصلی توجه کردم که این تصویر به علت اینکه ‌به صورت Transparent بود و به همین علت لود تصاویر قبل از نمایش به خوبی صورت نمی‌گرفت و سرور را بیشتر برای لود مشغول می‌کرد. در این افزونه نیز مانند BJ Lazy Load امکان تغییر تصویر پیش‌نمایش وجود دارد و می‌توانید با انتخاب یک تصویر بهتر و بهینه تر کمی سرعت لود را کاهش دهید.

3 – افزونه a3 Lazy Load

افزونه a3 Lazy Load  یکی دیگر از افزونه های پرطرفدار مخزن وردپرس در حوزه لود تنبل می‌باشد. این افزونه حدودا 10 هزار نصب فعال دارد ، و امتیاز 4.7 را از 5 امتیاز با توجه به 40 بازخورد به دست آورده است.

افزونه را فعال کنید و سپس مشاهده می‌کنید که در منو تنظیمات یک زیر منو به نام a3 Lazy Load اضافه شده است. برای آزمایش افزونه ، من تنظیمات آن را به همان صورت پیش‌فرض قرار دادم. من از گزینه بارگذاری رنگ پس‌زمینه برای پیش‌نمایش تصاویر استفاده کردم تا رنگ پیش‌نمایش هم رنگ پس‌زمینه صفحه وب من شود. با توجه به این تغییر و قرارگیری تنظیمات به صورت پیش‌فرض ، عملکرد وب سایت خیلی عالی شد.

زمان لود وب سایت ما دوباره به زیر نیم ثانیه آمد ، این سرعت با توجه به تعداد تصاویر و ویدیو قابل توجه است.

مقایسه نتایج به دست آمده

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

در تصویر زیر حجم محتوای وب سایت را هنگامی که افزونه a3 Lazy Load فعال است را مشاهده می‌کنید.

به طور کلی 151 کیلوبایت تصاویر ، حجم صفحه را گرفته اند که این مقدار نسبت به واقعیت کم می‌باشد. دو افزونه BJ lazy load و Lazy Load TX حجم صفحه را 2 مگابایت نشان داده‌اند . تصویر زیر نمایانگر آن است که چطور وب سایت با فعال بودن این دوافزونه 2 مگابایت حجم دارد.

سایز کد‌های جاوااسکریپت ، سی اس اس و اچ تی ام ال تقریبا یکسان است. با این حال ، اندازه تصاویر 1.86 مگابایت است، که این اندازه حجم تصاویر با همان رزولوشنی است که آپلود می‌شوند ولی در مقابل در a3 lazy load این حجم 151 کیلوبایت می‌باشد. به نظر شما چه اتفاقی افتاده است؟ همانطور که قبلا گفتم بعد از آپلود تصاویر وردپرس به صورت پیش‌فرض شروع به بهینه سازی و ساخت اندازه های مختلف از تصویر می‌کند و کاربران کوچک‌ترین اندازه مربوط به صفحه نمایش خود را دانلود و مشاهده می‌کنند.

در افزونه‌های BJ lazy load و Lazy Load TX ، بهینه سازی پیش‌فرض تصاویر وردپرس غیرفعال شده است ولی در افزونه a3 Lazy Load تصاویر با توجه به تکنیک بهینه سازی تصاویر پیش‌فرض وردپرس نمایش داده می‌شوند و در نتیجه تصاویر کم حجم تری را مشاهده می‌کنند.

یکی از جالب‌ترین نکات موجود در این مقایسه ، زمان لود صفحه می‌باشد که با افزونه BJ lazy load زمان لود حدودا 100 میلی ثانیه کمتر از a3 Lazy Load می باشد. به همین دلیل من چندین بار از صفحات وب سایت با فعالسازی و غیرفعالسازی هر 3 افزونه آزمایش تست سرعت گرفتم که مطمئن شوم که این نتایج غیرواقعی نباشد. تنها تغییری که در نتایج ایجاد می‌شد تعداد درخواست‌های HTTP بود . در یک نگاه ، به نظر می‌رسد که تعداد درخواست‌های HTTP افزونه BJ lazy load بیشتر باشد. با این حال ، اگر به منوی درختی فایل‌ها نگاهی بیاندازیم ، متوجه دلیل درخواست ها خواهیم شد.

فایل‌های سایت با فعال بودن افزونه BJ lazy load حدودا 20 درخواست از نوع data:image/gif را تولید می‌کند.

این‌ها داده‌های URI هستند نه درخواست های HTTP که در واقع ، به مرورگر می‌گوید که فایل Gif را به صورت محلی (با کد‌های Base 64) لود کند نه به صورت دانلود از سرور. در نتیجه ، افزونه BJ lazy load برای لود صفحه نیازمند 17 درخواستHTTP می‌باشد که این در مقابل a3 Lazy Load که 27 درخواست HTTP برای لود صفحه نیاز دارد سریع تر لود می‌شود و کاملا دلیل مشخصی برای سریع لود شدن صفحات می‌باشد.

افزونه Lazy Load TX یک مقدار بیشتر از BJ lazy load نیازمند درخواست های HTTP می‌باشد که این تعداد درخواست بیشتر بیانگر دلیل دریافت نکردن همان نتایج است.

4 – افزونه Rocket Lazy Load

و چهارمین گزینه استفاده در صورتی که هیچ یک از افزونه‌های بالا خواسته شما را محیا نکرد ، افزونه Rocket Lazy Loadمی‌باشد. افزونه‌ای رایگان از تولید کنندگان افزونه WP Rocket است. در حال حاضر این افزونه بیشتر از 6 هزار نصب فعال دارد و امتیاز 4.2 از 5 امتیاز را دریافت کرده است. اگر به‌دنبال یک افزونه لود تنبل ساده و با سرعتی خوب می‌گردید ، یکی از بهترین انتخاب‌های شما این افزونه است. این افزونه تنظیماتی را بر روی تصاویرشاخص ، تمامی تصاویر موجود در مقالات و ابزارک‌ها، آواتار‌ها و شکلک‌ها ایجاد می‌کند.

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

نتیجه گیری و توصیه‌ها

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

• اگر شما تصاویرتان را قبل از آپلود بهینه سازی نمی‌کنید و حتما هم به آن‌ها نیاز دارید ، بهتر است که از افزونه a3 Lazy Load استفاده کنید ، زیرا این افزونه به شما تصاویری بهینه شده تحویل خواهد داد.
• اگر شما تصاویرتان را قبل از آپلود بهینه سازی می‌کنید و به دنبال این هستید که با حداقل تلاش بهترین تحویل ممکن را به کاربر ارائه دهید ، با افزونه BJ lazy load به هیچ مشکلی بر نمی‌خورید. افزونه Rocket Lazy Load نیز دیگر انتخاب شما می‌تواند باشد.
• اگر شما تصاویرتان را قبل از آپلود بهینه سازی می‌کنید و قصد دارید که علاوه بر لود تنبل ، بتوانید گزینه‌های اضافه‌تری مانند کوچک‌تر کردن فایل‌های جاوااسکریپت و سی اس اس و همچنین تغییر مکان آنها به فوتر را داشته باشید ، بهتر است که از افزونه Lazy Load TX استفاده کنید.

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

مقاله جامع نحوه بهینه سازی تصاویر برای افزایش سرعت سایت

نحوه بهینه سازی تصاویر برای افزایش سرعت وب سایت

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

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

مزایای قالب بندی تصاویر

در ابتدا بهتر است که پاسخ این سوالات را بدانیم : چرا باید تصاویر وب سایتمان را قالب بندی کنیم ؟ مزایای این کار چیست ؟

در سئو عکس چندین مزیت مختلف وجود دارد. با توجه به تاریخچه HTTP مربوط به 15 سپتامبر 2017 به طور میانگین 65 درصد حجم یک صفحه وب به عکسها و تصاویر آن بستگی دارد. بنابراین ، هنگامی که می‌خواهید وب سایت وردپرسی خود را برای افزایش سئو و سرعت سایت، بهینه سازی کنید ، با توجه به این آمار باید عنصر مهمی به نام تصاویر را در اولین مرحله بهینه سازی قرار دهید. این عنصر نسبت به اسکریپت‌ها و فونت‌ها اهمیت بسیار بیشتری دارد.

و از قضا ، یکی از راحت‌ترین و بهترین راه‌های بهینه سازی سئو سایت ، بهبود حجم تصاویر است ولی بیشتر مدیران وب سایت‌ها به آن توجه نمی‌کنند.

در این‌جا نگاهی به مزایای اصلی بهینه سازی عکس‌ها می‌پردازیم:

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

• باعث افزایش رتبه سایت در گوگل می‌شود. وب سایت شما نسبت به قبل رنک بهتری در صفحات موتور جستجو می‌گیرد. فایل‌های سنگین باعث کاهش سرعت وب سایت شما می‌شوند و موتور‌های جستجوگر از وب سایت‌های کند متنفر هستند. گوگل دوست دارد که تصاویر شما را هرچه سریع‌تر در بخش تصاویر خود مرتب و ایندکس کند. تا به حال کنجکاو نشدید که چه مقدار از ترافیک وب سایت شما از طریق بخش تصاویر گوگل می‌باشد ؟ وارد گوگل آنالیتیکس وب سایت خود شده و طبق این آموزش ، ترافیک ورودی از بخش تصاویر گوگل خود را بررسی کنید.
• تصاویر کم حجم ، ترافیک کمتری مصرف می‌کنند که شبکه اینترنت و مرورگرها از همچنین تصاویری استقبال می‌کنند.
• حجم کمتری از سرور شما را اشغال می‌کند. (بستگی به تعداد تصاویر شاخص بهینه شده شما دارد)

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

هدف اصلی در بهبود تصاویر سایت ، پیدا کردن تعادل بین کمترین حجم و بهترین کیفیت قابل قبول است. تقریبا برای روش‌های بهینه سازی بیشتر از یک راه وجود دارد. یکی از بهترین راه‌های موجود انجام بهینه سازی در تصاویر ، فشرده سازی عکس قبل از آپلود در سایت می‌باشد که در بیشتر اوقات در نرم‌افزارهایی مانند Adobe Photoshop و Affinity Photo امکان پذیر است. بعضی از بهینه سازی‌ها نیز توسط افزونه‌ها انجام می‌شوند که در ادامه مقاله به آنها می‌پردازیم.

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

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

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

• فرمت PNG – با کیفیت‌ترین نوع تصویر را به شما تحویل می‌دهد ولی با حجمی بسیار بالا. برای فشرده سازی تنها از lossless استفاده می‌کند. البته گاهی فرمت PNG از بقیه فرمت‌ها حجم کمتر و کیفیت بهتری دارد و باید تست کرد، مخصوصا در تصاویری که دارای تعداد رنگ کمتر هستند.
• فرمت JPEG – از فشرده سازی lossy و lossless استفاده می‌کند . شما می‌توانید سطح کیفیت تصاویرتان را تا دریافت کیفیتی خوب و حجمی قابل قبول کنترل کنید.
• فرمت GIF – تنها از 256 رنگ استفاده می‌کند. بهترین انتخاب برای تصاویر متحرک است و تنها از نوع فشرده سازی lossless استفاده می‌کند.

فرمت‌های دیگری نظیر WebP و JPEG XR نیز وجود دارد ، ولی متاسفانه توسط تمامی مرورگرها پشتیبانی نمی‌شوند. در حالت ایده‌آل، شما برای تصاویر حجیم و پر از رنگ بهتر است که از فرمت JPG (JPEG) استفاده کنید و برای تصاویر ساده، شفاف (Transparent) و یا عکس هایی با تعداد رنگ کمتر از فرمت PNG استفاده کنید.

کیفیت و سایز فشرده سازی

تصویر زیر مثالی از فشرده سازی بیش از حد می‌باشد. تصویر اول ، تصویری با درجه فشرده سازی بسیار پایین و دریافت بهترین کیفیت (ولی با حجمی بالا) می‌باشد . تصویر دوم ، تصویری با درجه فشرده سازی حداکثر و دریافت کیفیت بسیار نامناسب و کم (ولی با حجم کم) می‌باشد.

نکته : تصویر اصلی قبل از فشرده سازی حجمی بالغ بر 2.06 مگابایت را داشته است.

همانطور که مشاهده می‌کنید، تصویر ابتدایی بیشتر از 540 کیلوبایت حجم دارد. به عنوان یک تصویر ، یک تصویر بسیار زیبا و پر کیفیت است. اگر بتوانید صفحه خود را با بقیه تصاویر کمتر از 1 یا 2 مگابایت نگه دارید، حجم قابل قبولی برای یک تصویر است. همچنین در نظر داشته باشید که 590 کیلوبایت نسبت به تصویر اصلی یک چهارم شده است. تصویر دوم که از نظر کیفیت وحشتناک می‌باشد ولی 39 کیلوبایت حجم دارد. کاری شما باید انجام دهید ، ایجاد کردن تصویری با کیفیت و حجمی میانه بهترین و بدترین کیفیت می‌باشد.

بنابراین ما تصویر را دوباره فشرده سازی کردیم ولی این بار درجه فشرده سازی را در حالت معمولی (Medium در فتوشاپ) قرار دادیم. کیفیت تصویر قابل قبول و حجم آن نیز 132 کیلوبایت شد که برای یک تصویر با چنین کیفیت بالایی قابل قبول است. این تصویر حدودا 4x کوچک‌تر از تصویر ابتدایی با فشرده سازی کم و 8x کوچک‌تر از تصویر اصلی می‌باشد.

به طور معمول ، تصاویر ساده PNG باید 100 کیلوبایت یا کمتر باشند تا وب سایت بهترین عملکرد را داشته باشد.

متد بهینه سازی lossy و lossless

یکی از مهم‌ترین مورد‌هایی که باید در بهینه سازی تصاویر به آن توجه کنید، دانستن و انتخاب بهترین متد بهینه سازی عکسها با انتخاب یکی از دو متد lossy و lossless می‌باشد.

Lossy : یک فیلتر می‌باشد که هنگام بهینه سازی بخشی از داده‌های تصویر را حذف می‌کند. این متد تصویر را ضعیف می‌کند و باید هنگام بهینه سازی توجه لازم را در کیفیت تصاویر داشته باشید. حجم تصاویر در این متد بسیار کاهش پیدا می‌کند. در نرم‌افزار‌هایی مانند Adobe Photoshop ، Affinity Photo و دیگر  نرم افزار‌های موجود می‌توانید با انجام تنظیماتی از این متد استفاده کنید و همچنین کیفیت تصویر را کنترل کنید. برای مثال در Adobe Photoshop هنگام گرفتن خروجی JPEG از شما متد خروجی را درخواست می‌کند که می‌توانید از متد lossy compression و lossless compression استفاده کنید.

Lossless : یک فیلتر می‌باشد که هنگام بهینه سازی، داده‌ها را فشرده سازی می‌کند. این متد کیفیت تصویر را کاهش نمی‌دهد ولی تصاویر نباید از قبل فشرده سازی شده باشد تا به بهترین روش عمل کند.  با نرم افزار‌هایی مانند Adobe Photoshop ، Affinity Photo و … و همچنین بعضی از افزونه‌های وردپرس نیز با متد Gzip این کار را انجام می‌دهند.

بهتر است که برای هر تصویر تکنیک‌های فشرده سازی مختلف را بررسی کنید تا بهترین کیفیت و حجم را پیدا کنید. اگر نرم افزار‌های شما گزینه ذخیره سازی مخصوص وب (Save for Web در فتوشاپ منوی File) را دارند ، مطمئن شوید که به صورت وب ذخیره سازی کنید. این گزینه در بیشتر ویراستار‌های تصویر موجود است و به شما اجازه می‌دهد که به اندازه مورد نیاز تصویر را بهینه سازی کنید. شما در فشرده سازی مقداری کیفیت تصویرتان را از دست می‌دهید ، بنابراین باید توجه کنید که این مقدار را کنترل کنید و بهترین را انتخاب کنید.

ابزار‌ها و نرم افزار‌های بهینه سازی تصاویر

ما در اینجا چندین ابزار و نرم افزار را به شما معرفی می‌کنیم که بعضی‌هایشان پولی و بعضی‌هایشان رایگان است و با آن‌ها می‌توانید تصاویرتان را بهینه سازی کنید. بعضی‌هایشان بهینه سازی را به صورت دستی به خودتان می‌سپارند و بعضی‌هایشان به صورت خودکار بهینه سازی را برایتان انجام می‌دهند. بنده به شخصه طرفدار نرم افزار Affinity Photo هستم ، که هم ارزان است و هم بیشتر امکانات نرم افزار Adobe Photoshop را دارد.

بعضی از ابزار‌ها و نرم افزار‌های خوب برای بهینه سازی تصاویر :

• Adobe Photoshop
• Gimp
• Paint.NET
• GIFsicle
• JPEGtran
• JPEG Mini
• OptiPNG
• pngquant
• FileOptimizer
• ImageOptim
• TinyPNG
• Trimage

تغییر اندازه تصاویر برای مقیاس بندی

یکی دیگر از مشکلات موجود در بهینه سازی تصاویر، هنگامی رخ می‌دهد که باید آن‌ها را برای مقایس بندی یا سایز (Scale) اقدام به آپلود کنید و اجازه ندهید که CSS اندازه آن‌ها را تغییر دهد. این بخش به اندازه فشرده سازی مهم نیست، اما نکته دیگریست تا تصاویر شما با حداکثر سرعت ممکن در تمامی دستگاه‌ها اجرا شوند. اگر از وردپرس استفاده می‌کنید ، به صورت پیش‌فرض تصاویر شما توسط سیستم تغییر اندازه داده می‌شوند. در بخش تنظیمات> رسانه ، می‌توانید حداکثر طول و عرض تصاویر را تعیین کنید. با این‌کار دیگر CSS تصاویر شما را با کدگذاری‌های خود کوچک نمی‌کند.

بخش رسانه وردپرس به صورت پیش‌فرض ریز تصویرهایی (thumbnails) با توجه به تنظیمات وردپرستان می‌سازد. با این‌حال ، تصویر اصلی بدون تغییر سایز و به همان شکل باقی می‌ماند. اگر می‌خواهید در حجم وب سایتتان صرفه جویی کنید و تصاویر اصلی را ذخیره سازی نکنید می‌توانید از افزونه رایگانی به نام Imsanity استفاده کنید.

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

افزونه های بهینه سازی که می‌توانید استفاده کنید

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

فقط توجه داشته باشید که نباید تنها به افزونه‌ها تکیه کنید. به عنوان مثال، در بعضی از سرور‌های میزبانی کم کیفیت شما اجازه ندارید که تصاویر و فایل‌هایی بیشتر از 2 مگابایت آپلود‌ کنید و همچنین علاوه‌بر خود در نظر گیری سرور‌های میزبانی کم کیفیت ، به طور کلی شما نباید تصاویری بیشتر از 2 مگابایت در بخش رسانه وردپرس آپلود کنید ، زیرا این تصاویر به سرعت حجم وب سایت شما را پر می‌کنند و شما را مجبور می‌کنند که مقدار حجم وب سایت خود را افزایش دهید.

افزونه Imagify Image Optimizer

افزونه Imagify توسط تیم سازنده Wp Rocket ساخته شده است، که افزونه‌هایی بسیار عالی در خصوص بهینه سازی سرعت وب سایت ارائه می‌کند. این افزونه با Woocommerce ، WP Retina و NextGen Gallery سازگار است. همچنین با ویژگی Bulk (بهینه سازی تعداد بالا) می‌توانید تصاویرتان را با 3 سطح مختلف فشرده سازی ، عادی (نرمال) ، خشونت آمیز (aggressive) ، فوق العاده (ultra) فشرده سازی کنید.

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

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

افزونه ShortPixel Image Optimizer

افزونه ShortPixel Image Optimizer یک افزونه رایگان است که به شما این امکان را می‌دهد که در هر ماه 100 تصویر را بهینه سازی کنید و چندین نوع فرمت مختلف مانند JPEG ، PNG ، GIF ، WebP و همچنین فرمت PDF را پشتیبانی می‌کند و برای بهینه سازی از هر دو متد lossy و lossless می‌تواند استفاده کند. این افزونه می‌تواند تصاویر CMYK را به RGB تبدیل کند و با انتقال تصاویر شما به فضای ابری و سپس بازگرداندن آنها به وب سایت وردپرسی شما در بهینه سازی پردازنده و حافظه RAM هاست شما نیز کمک می‌کند و همچنین یک نسخه پشتیبان از تصویر اصلی شما نیز تهیه می‌کند که در صورتی که از کیفیت راضی نبودید ، تصویر اصلی را بازگردانید. در بهینه سازی تصاویر در این افزونه محدودیت حجمی وجود ندارد.

افزونه Optimus Image Optimizer

افزونه Optimus Image Optimizer از متد lossless برای بهینه سازی تصاویر شما استفاده می‌کند. همانطور که در بالا گفتیم در متد lossless هیچ اطلاعاتی از تصویر شما پاک نمی‌شود. این افزونه از افزونه‌های WooCommerce ، Multi-Site پشتیبانی می‌کند و یک بخش bulk بسیار خوب دارد تا تصاویر آپلود شده قدیمی را نیز بهینه سازی کند. این افزونه همچنین ازWP Ratina‌ نیز پشتیبانی می‌کند.

یک نسخه رایگان و یک نسخه تجاری برای این افزونه ارائه می‌شود. در نسخه تجاری که شما می‌بایست سالیانه هزینه اشتراک را بپردازید ، حق بهینه سازی بی‌نهایت تصویر را دارید. اگر این افزونه را با افزونه Catch Enabler ترکیب کنید ، امکان استفاده از فرمت WebP که فرمتی برای بهینه سازی تصاویر می‌باشد و به تازگی توسط گوگل توسعه داده شده است، نیز خواهید داشت.

افزونه WP Smush

افزونه WP Smush شاید یکی از پرطرفدار‌ترین و پراستفاده‌ترین این لیست باشد نیز در دو نسخه رایگان و تجاری عرضه شده است. این افزونه اطلاعات پنهان در تصاویر را کاهش می‌دهد تا تصویر بدون کاهش کیفیت ، کم حجم شود. افزونه smush پس از آپلود تصاویر به سرعت تصاویر را اسکن کرده و آن‌ها را بهینه سازی می‌کند و همچنین تصاویر قدیمی شما را نیز می‌تواند بهینه سازی کند.

در نسخه رایگان می‌توانید 50 تصویر را در حال عادی بهینه کنید و اگر نیاز به بهینه سازی دستی داشتید نیز می‌توانید هر تصویری که دوست دارید را به صورت دستی بهینه سازی کنید. Smush می‌تواند فرمت‌های JPEG ، PNG و GIF را بهینه سازی کند . در حالت رایگان Smush تصاویر زیر 1 مگابایت را بهینه سازی می‌کند.

افزونه TinyPNG (همچنین فرمت JPEG را نیز فشرده سازی می‌کند)

افزونه TinyPNG که تحت فضای ابری TinyPNG و TinyJPG می‌تواند ماهیانه 100 تصویر را برای شما بهینه سازی کند نیز یکی از بهترین‌های وردپرس می‌باشد و می‌تواند تصاویر PNG و JPEG شما را بهینه سازی کند.

این افزونه به طور خودکار تصاویر جدید و قدیمی وردپرس شما را بهینه سازی می‌کند. این افزونه همچنین ساختار CMYK را به RGB تبدیل می‌کند، به گفته سازنده این پلاگین تصاویر JPEG را تا 60 درصد و تصاویر PNG را تا 80 درصد بهینه سازی می‌کند و هیچ تغییری در کیفیت اصلی تصویر ایجاد نمی‌شود. این افزونه محدودیتی در حجم تصاویر ندارد صرفا با یک ایمیل می‌توانید از خدمات این افزونه استفاده نمایید.