رفع خطای 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 اشاره خواهیم کرد.

رفع خطای Avoid bad requests

در این جلسه قصد داریم درباره مشکل رایجAvoid bad requests صحبت کنیم و ببینیم چطور میتونیم این مشکل را درساخت سایت پیدا و رفع کنیم و علت اصلی به وجود اومدن آن چیه تا باعث کاهش بهینه سازی سایت ما نشه. با ما همراه باشید.

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

نام: Avoid bad requests

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

Avoid bad requests چیست؟

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

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

bad-requests

پیغام خطای 404

همه ما با خطای 404 تا به حال روبه‌رو شده‌ایم و وقتی به این خطا برمیخوریم که فایلی وجود نداشته باشد، حال وقتی bad requests به وجود میاد که کاربر با خطای 404 یا پیدا نشدن صفحه‌ای روبه‌رو بشود، خطای 404 یک پاسخ استاندارد HTTPاست که نشان می‌دهد کاربر توانایی برقراری با سرور را دارد اما سرور نمی‌تواند درخواست گرفته شده از سمت کاربر را پیدا کند.
در این حالت سرور صفحه خطایی با عنوان “404 Not Found” تولید می‌کند وقتی کاربر به دنبال لینک شکسته شده یا لینک مرده است.

 خطای Avoid bad requests چگونه پیدا کنیم؟

بسیاری از اوقات خطاهای bad requests بسیار آشکار هستند مانند زمانی که یک تصویر قرار هست در جایی باشد ولی نیست، و نبودن یک تصویر مثلا در بکگراند (background) بسیار آشکار و معلوم است.
خیلی وقت‌ها هم ممکن است از خطای bad requests هیچ نشانه‌هایی نمایان نشود، پس همیشه سعی داشته باشید از لود شدن و فراخوانی فایل‌هایی که لازم نیست در آن صفحات لود شوند اجتناب کنید، منظورم از فایل‌ها همان عکس‌هایی که مورد استفاده قرار نمی‌گیرند یا فایل‌های CSS و JS که لازم به لود آنها نیست، این امر کمک بسیاری به طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی) شما در بالا بردن هر چه سریع‌تر پاسخ از سمت سرور می‌کند و باعث می‌شود با این خطا کمتر روبه‌رو شوید و نتیجه آن افزایش سرعت سایت وردپرس یا هر CMS دیگری و نیز بهبود سئو سایت خواهد بود.
با استفاده از ابزارهای page speed tool همانند سایت جی تی متریکس، سایت pingdom و webpagetest شما می‌توانید صفحات مورد نظر خود را بررسی کنید و بهترین راه و مطمئن‌ترین ابزاری است که میتوان برای پیدا کردن این خطاها استفاده کرد ولی در کل میتوان از ابزار Inspect در مرورگرها هم استفاده کرد به این منظور اول باید صفحه‌ای که قصد دارید خطاهای آن را جویا شوید رفته و سپس کلیک راست کرده و گزینه Inspect  را انتخاب کنید، در قسمت Console شما میتوانید خطاهای موجود را با رنگ قرمز مشاهده نمایید.

چگونه مشکل Avoid bad requests را رفع کنیم؟

گاهی رفع خطاهای bad requests بسیار راحت‌تر از پیدا کردن ‌انهاست. اگر شما با یک یا چند خطای bad requests روبه‌رو شدید کافیست آن خط کدی که در حال فراخوانی یک فایل (فایلی که سمت سرور وجود ندارد) است را حذف کنید یا یک جایگزین مناسب برای آن فایل ایجاد کنید، مثلا اگر صفحه شما یک عکسی را فراخوانی می‌کند یا به اصطلاح آن را صدا می‌زند، اما عکس وجود ندارد، کافیست آدرس “src” که یکی از اتریبیوت‌های img است را تغییر داده و آدرس یک عکس دیگر را بدهید یا کلا کدهای فراخوانی آن عکس را حذف کنید تا مشکل درخواست بد به وجود نیاید.

روش اشتباه برای حل خطا Avoid bad requests

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

پس به شکل خلاصه برای رفع مشکل bad requests از لینک‌های شکسته، لینک‌های مرده و همچنین خطاهای 404 و 410  و درخواست‌های بی‌فایده جلوگیری کنید تا باعث افزایش سرعت لود سایت شما شود .

رفع خطای Avoid a character set in the meta tag در GTmetrix

در این مقاله ما درباره ارور Avoid a character set in the meta tag صحبت خواهیم کرد و رفع این ارور باعث می‌شود ارور دیگری به نام Specify a character set early هم رفع شود.

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

نام: Avoid a character set in the meta tag

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

avoid-a-character-set-in-the-meta-tag

خطا Avoid a character set in the meta tag

character set از جمله استانداردهای بین‌المللی که کامل‌تر از بقیه استانداردهای موجود به رفع نیازهای مربوط به تبادل اطلاعات چندزبانه پرداخته‌ است، این character setها از قبل تعریف شده هستند و وجود آنها در صفحات تعیین کننده این است که محتویات سایت چگونه به کاربران نمایش داده شود. بسته به اینکه مقدار character set چه چیزی باشد مرورگر محتویات سایت شما را به کاربران نشان می‌دهد. پراستفاده‌ترین مقدار این متاتگ UTF-8 است و البته مقادیر دیگری همانندASCII هم موجود است. متاتگ character set تقریبا همانند کد زیر است.

این خطا به معنی عدم تعیین نوع کاراکتر نیست، متاسفانه یک وب سایت ایرانی به اشتباه مقاله‌ای را انتشار می‌دهد و بقیه دوستان هم در بحث کپی کردن حرفه‌ای هستند و نتیجه این می‌شود که وقتی رفع ارور Avoid a character set in the meta tag را در گوگل سرچ می‌کنیم از ۱۰طراحی سایت (طراحی سایت شرکتی،طراحی سایت فروشگاهی، قیمت طراحی سایت) موجود در صفحه اول ۹ تا به اشتباه نوشته اند. حتی اگر دانش کافی نداشته باشیم ولی کمی در ترجمه زبان انگلیسی کنجکاو باشیم در می‌یابیم که Avoid به معنای اجتناب است و Gtmetrix می‌گوید از متاتگ character set اجتناب کن و استفاده نکن ولی سایت‌های ایرانی نوشته‌اند این خطا به معنی عدم تعیین character set در صفحات است و اگر استفاده کنید این خطا رفع می‌شود  gtmetrix افزایش سرعت سایت معرفی ابزارهای آنلاین معرفی ابزارهای سئو طراحی سایت طراحی سایت شرکتی طراحی سایت فروشگاهی سایت