رفع خطای Enable gzip compression

در این جلسه قصد داریم درباره مشکل Enable gzip compression در PageSpeed گوگل و همینطور ارور Compress components with gzip در YSlow یاهوصحبت کنیم و اول gzip تعریف خواهیم کرد و اینکه gzip چیست و چه تاثیری در سرعت سایت دارد.

فقط توجه داشته باشید هر دو خطای Enable gzip compression و Compress components with gzip یک منظور را می‌رساند فقط خطای اولی مربوط به گوگل است و دومی مربوط به یاهو می‌باشد، حل یکی از این خطاها باعث حل دیگر خطا هم می‌شود.

خلاصه‌ی از خطا Enable gzip compression

نام: Enable gzip compression

نوع: مربوط به سرور
اولویت: بالا
میزان سختی: راحت
میانگین امتیاز: 82%

فشرده سازی Gzip در افزایش سرعت سایت

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

Enable-GZIP-Compression (1)

از انجایی که از ملاک‌های اساسی گوگل برای رتبه بندی سرعت لودینگ صفحات می‌باشد بالا بردن سرعت سایت‌ها، از دغدغه‌های اصلی وبستران بوده و هست. همچنین تجربه نشان می‌دهد که کاربران صفحاتی را که بالای ۱۰ ثانیه برای باز شدنشان به طول می‌انجامد را بسته و به سراغ سایت دیگری می‌روند و این یعنی بالا رفتن Bounce rate. حال یکی از اقداماتی که می‌توان در راستای افزایش سرعت سایت تاثیر فراوانی دارد فعال سازی Gzip در سمت سرور می‌باشد و باعث رفع ارور Enable gzip compression و همچنین بهبود TTFB نیز می‌شود.

تمام مرورگرهای مدرن و مرسوم امروزی از تابع gzip پشتیبانی می‌کنند و هم به شکل اتوماتیک درخواست HTTP به سمت سرور برای GZIP compression ارسال می‌کنند. در ادامه به همراه عکس بیشتر به این موضوع تمرکز می‌کنیم. لیست مرورگرهای معروف که از این تابع پشتیبانی می‌کنند:

• Internet Explorer 5.5 در + July 2000 از فشرده سازی gzip پشتیبانی می‌کرد
• Opera 5+ در  June 2000 از فشرده سازی gzip پشتیبانی می‌کرد
• Firefox 0.9.5+ در  October 2001 از فشرده سازی gzip پشتیبانی می‌کرد
• Chrome به محض انتشار در سال ۲۰۰۸ از فشرده سازی gzip پشتیبانی می‌کرد
• Safari به محض انتشار در سال ۲۰۰۳ از فشرده سازی gzip پشتیبانی می‌کرد

Gzip چیست؟

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

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

Gzip باعث کاهش حجم سایت و افزایش سرعت لود سایت می‌شود، در واقع این تابع می‌تواند حجم فایل‌های ذکر شده را بیش از ۷۰ درصد کاهش بدهد. این تابع دو مولفه اصلی را در سایت GTmetrix کاهش می‌دهد یکی Page Load Time و دیگری Total Page Size می‌باشد.

Ilya Grigorik در گوگل می‌گوید:

فشرده سازی یک فرایند رمزگذاری اطلاعات با استفاده از بیت‌های (bits) کمتر است.

نحوه کار فشرده سازی Gzip در عمل

بعد از آنکه متوجه شدید gzip چیست به نحوه کارکرد این تابع میپردازیم،‌وقتی کاربری توسط مرورگر خود قصد دارد وارد یک سایتی شود، مرورگر اول یک درخواست از سمت header یعنی “content-encoding: gzip” ارسال می‌کند تا ببیند آیا جواب این درخواست مثبت است یا منفی. اگر درخواست از سمت سرور شناسایی شد و مثبت بود، سرور فایل‌های فشرده شده را به مرورگر ارسال می‌کند، درغیر این صورت سرور فایل‌های غیر فشرده و سنگین را به مرورگر ارسال می‌کند که در بیشتر وقت‌ها همراه با ارورهای مختلف همراه خواهد بود.

gzip-compression

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

ولی موتورهای جستجو همانند گوگل و مرورگرها همانند کروم و فایرفاکس، نیازی به کدنویسی زیبا و فصای خالی بین کدها ندارند، و به راحتی می‌توانند آنها را تجزیه و همه آنها در یک بلوک یا خط بخوانند، برای همین در بهینه سازی سایت فایل‌ها پیشنهاد می‌شود که آنها را minify و combine کنید. و جدا از رفع خیلی از خطاها باعث برطرف شدن مشکل Enable gzip compression می‌شود.

چگونه GZIP Compression را چک کنیم فعال است؟

جهت تست فشرده سازی gzip می‌توانید از ابزارهای آنلاین زیر استفاده نمایید:

• استفاده از Google PageSpeed Insights گوگل
  می‌توانید سایت خود را در Page Speed گوگل تست کنید و اگر gzip فعال نباشد پیغامی همانند زیر دریافت می‌کنید.

enable-compression-warning-pagespeed-insights

• استفاده از سایت GTmetrix
  می‌توانید در سایت جی تی متریکس نیز تست کنید و اگر با ارور Enable gzip compression مواجه شدید مبنی بر این است که تابع Gzip نیز در سمت سرور شما فعال نیست.

enable-gzip-compression

• استفاده از سایت Check GZIP compression tool
  سایت ذکر شده هم می‌تواند بسیار مفید باشید و دقیقا به شما می‌گوید چه میزان از حجم سایت شما بعد از فعال سازی تابع gzip فشرده شده است.

checkgzipcompression

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

check-for-gzip-response-header

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

chrome-devtools-compressed-size

نحوه فعال سازی GZIP Compression

ما در اینجا سعی کردیم در تمام وب سرورها و CMS ها روش‌های مختلف فعال سازی gzip را بیان کنیم، فعال سازی به روش‌های مختلف انجام می‌شود و شما سعی کنید مناسب‌ترین روش را برای خود انتخاب کرده و اعمال کنید، و لازم نیست ۲ یا چند روش را بر روی سایت اعمال کنید بعضی از دوستان این تصور را دارند که اگر تابع gzip را چندین بار فعال کنند سایت آنها چندین بار فشرده سازی خواهد شد و برای سئو سایت مناسب خواهد بود، ولی این دیدگاه اشتباه است و ممکن است تداخل به وجود امده باعث از بین رفتن ماهیت تابع gzip شود.

فعال سازی gzip در وردپرس

راحت‌ترین راه برای فشرده سازی فایل‌ها و فعال کردن gzip استفاده از پلاگین‌های کش که از این قابلیت پشتیبانی می‌کنند. پلاگین‌هایی مانند  WP Rocket و  W3 Total Cache  از این قبیل افزونه ها هستند که یک سری کد در فایل .htaccess به شکل اتومایتک بعد از فعال سازی آنها قرار می‌دهند. البته باید توجه داشته باشید که دسترسی لازم برای نوشتن در فایل .htaccess به این افزونه‌ها بدهید.

• فعال سازی gzip در جوملا

  اگر شما از cms جوملا (joomla) برای سایت خود استفاده می‌کنید برای فعال کردن Gzip وارد مدیریت جوملا شوید سپس در منوی سایت – تنظیمات کلی وارد شوید و در تب سرور گزینه فشرده سازی Gzip را روی بلی قرار داده و سیو نمایید.

• فعال کردن فشرده سازی gzip در cPanel

  برای فعال سازی gzip در سی پنل ابتدا وارد cPanel شوید، سپس در بخش Software and Services روی Optimize Website کلیک کنید. پس از ورود همانطور که مشاهده میکنید دو گزینه compress all content و compress the specified MIME types و یک فضای متنی جهت مشخص کردن MIME Type های انتخابی وجود دارد می‌توانید گزینه مد نظر خود را انتخاب نموده و روی گزینه Update Settings کلیک کنید تا فشرده سازی محتویات سایت انجام شود. با انتخاب گزینه compress all content تمامی فایل های شما فشرده می‌شود و با انتخاب compress the specifiedMIME types فایل‌هایی که MIME های آنها را مشخص نموده اید زیپ می‌شود .

• فعال سازی gzip در سرور آپاچی

  ممکن است قصد نداشته باشید در افزونه‌ها برای فعال سازی gzip استفاده کنید یا CMS دیگری دارید راه دوم یا راه دستی برای فعال سازی این تابع وجود دارد استفاده از سرور سایت خودتان است و اگر Apache داشته باشید شما می‌توانید کد زیر را به فایل .htaccess وارد کرده و سیو کنید. فایل .htaccess در پوشه اصلی سایت یا همان public_html موجود دارد، اگر چنین فایلی وجود ندارد ابتدا روی setting سمت راست بالا کلیک کرده و گزینه Show Hidden Files را فعال کنید اگر فایل  .htaccess نمایان شد که هیچ ولی اگر مشاهده نکردید به این معنی است که هنوز فایل  .htaccess ساخته نشده است و خود می‌توانید به شکل دستی این فایل با دقیقا با نام  .htaccess بسازید و کدهای زیر را در آن قرار دهید.

• 
   

• فعال سازی gzip در وب سرور NGINX

  اگر وب سرور شما NGINX یا به عبارتی انجین ایکس باشد می‌توانید از دستورات این مقاله برای فعال سازی تابع gzip استفاده کنید، باید وارد دایرکتوری /etc/nginx/nginx.conf شده و یک سری تغییرات ساده و جزئی را ایجاد نمایید.

• فعال سازی gzip در IIS ویندوز سرور

  ممکن است سایت شما در ویندوز سرور های شرکت مایکروسافت میزبانی شود که روند فعال سازی تابع gzip کمی متفاوت خواهد بود، ابتدا باید بدانید که جهت فشرده سازی یا compression داخل ویندوز سرور باید ۴ مرحله را طی کنید، که ۳ مرحله اول همانند هم هستند، باید در ابتدا مطمئن باشید که ادمین سرور در زمان نصب ویندوز سرور در server manager و تب Role Services بخش Web Server رفته و در ادامه وارد Performance شده و گزینه‌های Static Content Compression و Dynamic Content Compression را تیک زده باشد.
  بعد از اینکه مطمئن شدید این گزینه توسط ادمین سرور فعال است (جهت اطمینان می‌توانید تیکت ارسال کنید) باید وارد IIS سرور خود شده در قسمت Compression دوباره ۲ گزینه که در بالا اشاره شده است را فعال کنید.
  بعد از آن سایت خود را در کنترل پنلی که دارید، مثلا همانند SolidCP انتخاب کرده و بسته به کنترل پنل باید دنبال گزینه های Enable Static Content Compression و همینطور Enable Dynamic Content Compression باشد و سپس فعال کنید.
  و سپس کدهای زیر را در Web.Config اضافه کنید:

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

• اگر به دنبال مقاله‌های مناسب جهت بهینه سازی سرعت سایت خود در windows server هستید مقاله سایت tosinsoهم می‌تواند برای شما مفید باشد و همینطور مستندات شرکت مایکروسافت نظیر HTTP Compression of Dynamic Content و HTTP Compression of Static Content  پیشنهاد می‌شود مطالعه شود.
• اگر شما به دقت این مقاله را مطالعه کرده باشید باید بدانید جی زیپ چیست و چگونه یک فایل را فشرده سازی می‌کند و همینطور با نحوه فعال سازی آن آشنایی کامل پیدا کردید. فعال سازی gzip کمک زیادی به بهینه سازی داخلی خواهد کرد پس سعی کنید به بهترین شکل ممکن این مشکل را حل کنید تا باعث کاهش سرعت سایت شما نشود.

رفع خطای Defer parsing of JavaScript و Prefer asynchronous resources

در این جلسه قصد داریم درباره مشکل Defer parsing of JavaScript و همچنین خطای Prefer asynchronous resources صحبت کنیم و ببینیم چطور میتونیم این مشکل را در سایت پیدا و رفع کنیم و چرا اصلا این موضوع برای بهینه سازی سئو سایت ما مشکل‌ساز است.
البته در این مقاله تمرکز برای رفع خطای Defer parsing of JavaScript خواهد بود و در راستای رفع آن ارور Prefer asynchronous resources هم رفع خواهد شد.

شاید رفع مشکل Defer parsing of JavaScript برای خیلی از دوستان سخت باشد و گاهی غیرممکن هست. برای همین توصیه می‌کنیم خیلی پیگیر این بخش از ارور سایت GTMetrix.com نشوید به دلیل اینکه گاهی رفع این خطا باعث حذف تمامی فایل‌های جاوااسکریپت یا همان JS می‌شود که در خیلی از سایت‌ها نشدی است. یعنی برای رفع این مشکل در اخر مجبورخواهید بود همه کدهای جاوا اسکریپت JavaScript را از سایتتان پاک کنید تا خطا به شکل کامل رفع و امتیاز 100 شود، یا اگر تعداد فایل های جاوااسکریپت زیاد باشد مجبور خواهید بود اول آنها را یکی کنید تا کنترل و مدیریت آن راحت‌تر شود که این روش هر چند در بحث تئوری مشکلی ندارد ولی در عمل ممکن است با ادغام باعث ایجاد تداخل و مشکلات متعدد شود که حاصل آن عدم اجرای دستور در مکان تعریف شده میباشد، پس از الان خیلی به این خطا حساس نباشید.

خلاصه‌ی از خطا Defer parsing of JavaScript

نام: Defer parsing of JavaScript

نوع: مربوط به جاوااسکریپت
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 69%

جزئیات بیشتر درباره خطا Defer parsing of JavaScript

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

گوگل آزمایشی را در سال ۲۰۱۱ بر روی تلفن‌های همراه هوشمند اجرا گردید و به این نتیجه رسیدن که هر یک کیلوبایت از فایل جاوا اسکریپت حدود 1 میلی‌ثانیه زمان برای خواندن به طول می‌انجامد و این مقدار به زمان کل لود صفحه اضافه‌ می‌گردد، و حال اگر ۲۰۰KB حجم جاوا اسکریپت باشد زمان لود اولیه آن در یک صفحه ۲۰۰ میلی‌ثانیه به زمان لود کل صفحه برای بازدیدکننده اضافه می‌گردد، از آنجایی که جاوا اسکریپت در هر صفحه باید لود شود، این تاخیر در تمام صفحات ایجاد خواهد شد.

نحوه رفع ارور Defer parsing of JavaScript

راه حل اول

همان‌طور که می‌دانید لود کدهای یک صفحه طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) به ترتیب از بالا یعنی قسمت Head صفحه به پایین یعنی تا </body> اجرا می‌شود و اگر تعداد بسیاری فایل در قسمت Head فراخوانی شود باعث کند‌تر شدن و بالا رفتن زمان لود صفحه‌هات سایت می‌گردد، بنابراین برای بالا بردن سرعت سایت و کم کردن زمان لود آن باید فایل‌های جاوا اسکریپت JavaScript را به تعویق انداخت.

مثلا می‌توان فایل‌های جاوا اسکریپت را به انتهای کدها اضافه کرد، به همین منظور کافیست کدهای JS (منظور همان کدهای جاوا اسکریپت است) که با تگ <script> در صفحات HTML فراخوانی می‌شود را در فوتر، قبل از </body>قرار داد تا ابتدا متن‌ها و CSS ها لود شود و سپس فایل‌های جاوا اسکریپت در انتها لود شود. البته این روش بیشتر برای سایت‌های از نوع استاتیک است و سایت‌های از نوع داینامیک نیاز به ویرایش بیشتری دارند.

راه حل دوم

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

چند افزونه مخصوص وردپرس:

WP Deferred JavaScripts

Speed Booster Pack

autoptimize

Async JavaScript

 چند افزونه مخصوص جوملا:

JCH Optimize

Javascript Async and Defer

scriptsdown

راه حل سوم

 استفاده از اتریبیوت های defer و یا async در تگ جاوا اسکریپت هم می‌تواند باعث رفع خطای Defer parsing of JavaScript و هم رفع خطای Prefer asynchronous resources در PageSpeed گوگل شود.

async-vs-defer

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

javascript-defer-async

راه حل چهارم

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

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

اجرای روش‌های بالا جدا از اینکه باعث رفع ارور Defer parsing of JavaScript خواهد شد باعث کاهش خطای Prefer asynchronous resources هم می‌شود. همان‌طور که در اول مقاله اشاره کردیم برای کسب امتیاز ۱۰۰ در این فاکتور گوگل خیلی حساسیت به خرج ندهید، هر چند اگر به شکل اصولی فراخوانی ها انجام شود به سئو داخلی کمک فراخوانی می‌کند

رفع خطای Combine images using CSS sprites

در این مقاله قصد داریم درباره مشکل Combine images using CSS sprites صحبت کنیم و ببینیم چطور میتونیم این مشکل را در سایت پیدا و رفع کنیم و چرا اصلا css sprites برای بهینه سازی عکس‌های ما لازم و ضروری است؟ چطور css sprite کنیم؟. رفع خطای Combine images using CSS sprites برای خیلی از دوستان سخت هست و کمی نیاز به دانش کدنویسی دارد ولی با ابزارهای آنلاین می‌شود به راحتی خطای مربوطه را بهینه سازی کرد.

خلاصه‌ای از خطا Combine images using CSS sprites

نام: Combine images using CSS sprites

نوع: مربوط به عکس
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: ۸۷%

آموزش ویدیویی CSS sprites به شکل رایگان در لینک زیر:

این لینک

CSS sprites چیست

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

css-sprite-c

روش استفاده از CSS sprites

دو روش کلی برای رفع مشکل Combine images using CSS sprites وجود دارد، می‌توانید از فتوشاپ برای ادغام عکس‌های کوچک استفاده کنید و سپس کدنویسی را انجام دهید، یا به کمک ابزارهای آنلاین تمام امور لازمه را به آنها بسپارید و بعد از خروجی گرفتن عکس ادغام شده و کدها، آنها را در مکان دلخواه و مناسب قرار دهید. در ادامه بیشتر درباره این روش‌ها توضیح خواهیم داد.

روش اول CSS sprites به کمک فتوشاپ (روش سخت)

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

img_navsprites

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

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

در مثال پایین از هر ۳ ایکون استفاده کردیم، به کدهای زیر توجه کنید:

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

روش ذکر شده سخت نیست با کمی تلاش می‌توان به نتیجه رسید به هر حال اگر برای شما سخت است می‌توانید روش دوم را تست کنید.

روش دوم CSS sprites به کمک ابزارهای آنلاین (روش ساده)

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

لیست ابزارهای آنلاین برای css sprites:

• spritepad.wearekiss.com
• spritegen.website-performance.org
• css.spritegen.com
• www.spritecow.com

برای CSS sprites کردن عکس‌های خود بهتر از فرمت عکس‌های کوچک PNG بوده و بکگراند آن نیز شفاف (transparent) باشد.

جمع‌بندی درباره مشکل Combine images using CSS sprites

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

slices

این خطا باعث کاهش تعداد درخواست های HTTP هم می‌شود.

رفع خطاهای Avoid landing page redirects و Minimize Redirects و Avoid URL redirects

در این مقاله قصد داریم درباره مشکلات رایج Avoid Landing Page Redirects و Minimize Redirects در PageSpeed گوگل و همینطور مشکلAvoid URL redirects در YSlow یاهو صحبت کنیم و ببینیم چطور میتونیم این مشکل را در ساخت سایت پیدا و رفع کنیم و چرا اصلا این موضوع برای بهینه‌سازیسایت ما مشکل‌ساز است.

هر سه خطای ذکر شده به یک موضوع اشاره می‌کند در Minimize Redirects (حداقل رساندن تغییر مسیرها) و Avoid URL redirects (عدم استفاده از آدرس ریدایرکت شده) اشاره به کل صفحات در طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) دارد ولی در خطای Avoid Landing Page Redirects (جلوگیری از ریدایرکت صفحات فرود) بیشتر اشاره به صفحات و پست‌هایی دارد که اهمیت بالایی برای ما دارند و جز صفحات فرود یا لندینگ پیج (لندینگ پیج چیست) ما محسوب می‌شوند. ما در ادامه مقاله به بررس خطا Avoid Landing Page Redirects و مشکلاتی که ممکن است به وجود آورد می‌پردازیم و با رعایت نکات گفته شده می‌توانید خطاهای موجود در Minimize Redirects و Avoid URL redirects را هم رفع کنید.

خلاصه‌ای از خطا Avoid Landing Page Redirects

نام: Avoid Landing Page Redirects

نوع: سرور
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: ۹۸%

تغییر مسیر یا Redirect چیست؟

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

ریدایرکت ها چگونه به سرعت صفحه آسیب می‌زنند؟

آیا تابه‌حال به‌جایی رفته‌اید که بنا به دلایلی نتوانسته‌اید به آن محل وارد شوید و مجبور به رفتن به محل دیگری بشوید؟

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

با افزایش استفاده مردم از موبایل، مشکل ریدایرکت ها روزبه‌روز بیشتر و بیشتر می‌شود. هر وب‌سایتی که حرکتی در جهت سئو موبایل انجام داده است، باید به ریدایرکت هایی که در صفحاتشان اتفاق می‌افتد توجه کنند. ریدایرکت ها تأثیر زیادی بر کاربران موبایل گذاشته تا کاربرانی که از دسکتاپ استفاده می‌کنند.

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

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

ریدایرکت های سمت سرور: سریع، قابل ذخیره‌سازی

ریدایرکت های رایج، 301 و 302 هستند که از HTTP برای توضیح انتقال یک صفحه یا منبع استفاده می‌کنند. از ریدایرکت 301 برای انتقال‌های دائمی و ریدایرکت 302 برای انتقال‌های موقت استفاده می‌شود. هر دو این تغییر مسیرها سمت سرور هستند، به این معنی که از HTTP برای هدایت مرورگر به محل یا فایل دیگری استفاده می‌کنند. مرورگرها به تغییر مسیرهای سمت سرور سریع‌تر از تغییر مسیرهای سمت کاربر رسیدگی می‌کنند و علاوه بر این موقعیت فعلی فایل نیز ذخیره (cache) می‌شود.

ریدایرکت های سمت کاربر: کند، غیرقابل ذخیره‌سازی

تغییر مسیرهایی که از ویژگی http-equiv=refresh یا جاوا اسکریپت استفاده می‌کنند، ممکن است زمان انتظار تغییر مسیر یا مشکلات مربوط به عملکرد را افزایش دهند و از این‌رو نباید مورداستفاده قرار گیرند، و در جهت بهینه سازی سایت استفاده از این ریدایرکت ها توصیه نمی‌شود.

آیا تغییر مسیری اتفاق افتاده است؟

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

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

می‌توانید با استفاده از ابزارهای آنلاین همانند ابزار GTmetrix و یا PageSpeed Insights استفاده کرد و تغییر مسیر های 301 و 302 در صفحاتتان را بررسی کنید.
فرصت خوبی است تا تغییر مسیر صفحاتتان را بررسی کنید و بخش‌هایی که تغییر مسیر در آن‌ها اتفاق می‌افتد را شناسایی کرده و اگر باعث کاهش سرعت صفحات می‌شوند، برای برطرف نمودن آن‌ها چاره‌اندیشی کنید.

توصیه‌هایی از گوگل در مورد ریدایرکت

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

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

حذف تغییر مسیرها

برای حذف تغییر مسیرها کافی است مراحل زیر را طی کنید:

1. تغییر مسیرها را بیابید
2. دریابید که چرا وجود دارند
3. بررسی کنید که چگونه روی سایر تغییر مسیر ها تاثیر می‌گذارند یا از آن‌ها تأثیر می‌گیرند
4. اگر به آن‌ها نیازی نیست حذفشان کنید
5. اگر روی سایر تغییر مسیر ها تأثیر می‌گذارند یا از آن‌ها تأثیر می‌گیرند آن‌ها را به‌روزرسانی کنید
6. اگر سایتتان از امنیت مناسبی برخوردار است، از HSTS برای حذف تغییر مسیرهای SSL استفاده کنید

پاک کردن تغییر مسیرهای پی‌درپی

اغلب مواقع لازم است زنجیره به وجود آمده از تغییر مسیرها را پاک‌ کنید. نمونه‌ای از این مورد، زمانی است که از سایت بدون www به سایت با www تغییر مسیر می‌دهید سپس تمام ترافیکتان را به https منتقل می‌دهید.
به عنوان مثال کاربری را که “seoraz.com” تایپ کرده است به www.seoraz.com هدایت کنید و ناگهان به “https:www.seoraz.com” منتقل شود.
راه‌حل این مشکل این است که مطمئن شوید که با تغییر مسیر، به‌جای رفتن از آدرس بدون www به با www به https://www منتقل شوید. هدف این است که مطمئن شوید سایت شما از تغییر مسیرهای متوالی و پی‌درپی در امان باشد و تغییر مسیرها به‌صورت صحیح و منطقی باشد.

Minimize-Redirects

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

راستی آخرین باری که برای وارد شدن به سایتی www تایپ کردید چه زمانی بوده است؟ آخرین باری که www در موبایلتان تایپ کردید کی بوده است؟ حال فکر می‌کنید برای بهینه سازی یک سایت آدرس با www باشد بهتر است یا بدون www؟ کامنت کنید.

مشکلات سایت histats در ریدایرکت

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

gtmetrix-Compare-Reports

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

• Leverage browser caching
• Minimize redirects
• Minimize request size
• Add Expires headers
• Avoid URL redirects
• Compress components with gzip
• Make fewer HTTP requests
• Reduce DNS lookups
• Use cookie-free domains

gtmetrix-Compare-Reports-yslow

gtmetrix-Compare-Reports-yslow

نمونه ریدایرکت‌هایی که این سایت وجود می‌اورد و با حذف کد آن تمام این ریدایرکت های اضافه که باعث کاهش سرعت سایت شده بودند  حذف خواهد شد.

Minimize-redirects-pagespeed

نتیجه: توصیه می‌شود از ابزارهای آمارگیر معتبر نیز استفاده کنید که باعث کندی سرور سایت شما و افزایش زمان لود سمت کاربر نشود، مثلا ابزار histats باعث افزایش زمان لود و کاهش سرعت سمت سرور می‌شود و یا حاصل استفاده از پلاگین WP Statistics باعث استفاده بی‌رویه از منابع سرور سایت میگردد حتی این پلاگین به گفته سایت معتبر sucuri مشکلات امنیتی و خطر حمله به شکل SQL Injection دارد. بنابراین انتخاب اینکه از چه ابزاری برای آنالیز سایت خود استفاده کنیم بسیار در تجربه کاربری اهمیت دارد (تجربه کاربری یعنی چه)، ابزار analytics گوگل شاید می‌توان گفت بهترین، دقیق‌ترین و بهینه‌ترین ابزار برای آنالیز سایت و دریافت آمار است.

جمع‌بندی ارور Avoid landing page redirects

با رشد روزافزون استفاده از موبایل، افزایش سرعت سایت به‌مراتب از اهمیت بیشتری برخوردار شده است. ازاین‌رو جلوگیری از تغییر مسیرها و ریدایرکت های غیرضروری و کاهش خطاهای همانند Avoid landing page redirects و Minimize Redirects و مدیریت آن‌ها با ابزارهای آنلاین سئو، نسبت به گذشته مهم‌تر شده است و حل مشکل سرعت سایت یکی از مهم‌ترین فاکتورهای موتورهای جستجو است بنابراین می‌توان از راهکارهای ارائه‌شده توسط گوگل یا دیگر منابع استفاده کرد.

رفع خطای Avoid CSS @import

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

خلاصه‌ای از خطا

نام: Avoid CSS @import

نوع: CSS
اولویت: متوسط
میزان سختی: راحت
میانگین امتیاز: ۹۷%

Avoid CSS @import چیست و چگونه کار میکند؟

import-css

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

چرا نباید از @import در CSS برای فراخوانی فایل‌ها استفاده کنیم؟

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

جایگزین مناسب CSS @import

با ابزارهای آنلاین می‌توان به راحتی فایل‌هایی که به شکل @import فراخوانی شده‌اند را پیدا کرد و یکی از بهترین ابزارهای آنلاین سایت GTmetrix است و بعد از زدن آدرس سایت در بخش مربوط به Avoid CSS @import خطاها را پیدا کنید و از جایگزین‌های بهتر همانند دستور زیر استفاده کنید و در بخش head سایت فراخوانی کنید و یا اینکه اگه امکانش بود با فایل‌های CSS دیگر ادغام کنید. در آینده نحوه ادغام صحیح فایل‌های CSS را در دوره GTmetrix اشاره خواهیم کرد.