آموزش افزایش سرعت سایت با GTmetrix – رفع خطاهای YSlow

در این پست قصد داریم درباره ارور Use GET for AJAX requests بحث کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا رفتن سرعت و سئو سایت و همینطور سئو ما می‌شود، پس ما میزفا همراه باشید.

خلاصه‌ای از خطا Use GET for AJAX requests
نام: Use GET for AJAX requests
نوع: JS
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 100%

اهمیت استفاده از AJAX

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

شی xmlhttprequest در Ajax

درواقع Object (شئ) xmlhttprequest در Ajax است همه این مشکلات سرعت را رفع نمود و باعث شد تا محتوای به‌روز شده در یک صفحه بدون احتیاج به بارگذاری دوباره کل صفحه تغییر کند. درواقع این شئ سبب گردید تا داده واردشده توسط کاربر به سمت سرور ارسال شود و سرور پردازش‌های لازم را انجام دهد و سپس داده پردازش‌شده یعنی اطلاعات را به مرورگر بدهد بدون آنکه صفحه لود شود، تمام این رفت‌وبرگشت‌ها در پشت صفحه و بدون اطلاع کاربر انجام می‌شود. می‌توان گفت شئ XMLHttpRequest مهم‌ترین شئ در Ajax است که تقریبا انجام تمام عملیات لازم بر روی دوش آن هست. حال برای ارسال و تبادل اطلاعات توسط شئ XMLHttpRequest دو نوع متد وجود دارد متد GET و متد POST که هر دو یک درخواست HTTP برای تبادل اطلاعات استفاده می‌کنند که هر کدام مزایا و معایت خوب را دارند.

بیشتر بدانید: XML و یا JSON یک نوع ساختار برای ذخیره‌سازی اطلاعات است، ساختارهایی که بدون توجه به تکنولوژی و پلتفرم آن دستگاه قابل استفاده هستند از طرفی Ajax یک تکنولوژی است که در آن یک شئ XMLHttpRequest وجود دارد این شئ همان‌طور که نامش پیداست اطلاعاتی که دارای ساختار XML است را به شکل Http Request (درخواست HTTP) ردوبدل می‌کند، این توضیح کوتاه داده شد تا با فلسفه نام XMLHttpRequest آشنا شوید.

درباره Use GET for AJAX requests

بعید است طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) شما با خطای Use GET for AJAX requests روبه‌رو شود ولی اگر شد بدانید که در این پست منظور Gtmetrix این است که اگر از تکنولوژی Ajax در صفحات استفاده می‌کنید به جای استفاده از متد ارسال POST از GET استفاده نمایید، چرا که سرعت متد GET بیشتر است.

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

دیگر تفاوت‌های متد POST و GET

ویژگی	متد GET	متد POST
استفاده از دکمه های BACK و Reload	بی اثر	ارسال دوباره اطلاعات (البته قبل از ارسال شدن دوباره اطلاعات مرورگر به کاربر هشدار میدهد)
Bookmark کردن	با زدن کلیدهای ctrl + D آدرس bookmark میشود.	قابلیت bookmark را ندارد.
قابلیت کش – Cache	کش میشود.	قابلیت کش را ندارد.
نوع رمزگذاری – Encoding	application/x-www-form-urlencoded	application/x-www-form-urlencoded multipart/form-data از multipart/form-data برای رمزگذاری داده های باینری معمولا هنگام آپلود کردن فایلها استفاده میشود. یعنی برای آپلود فایل از این نوع استفاده می کنیم.
ذخیره شدن در تاریخچه مرورگر – History	ردپای متد GET در تاریخچه مرورگر ذخیره میشود.	ذخیره نمیشود.
محدودیت در اندازه داده	متد GET اطلاعات خودش را به URL اضافه میکند. و از طرفی حداکثر اندازه URL میتواند 2048 کاراکتر باشد.	بدون محدودیت
محدودیت در نوع داده	فقط داده ی از نوع اسکی را پشتیبانی می کند.	بدون محدودیت. قابلیت ارسال داده های باینری را دارد.
امنیت	امنیت کمتری نسبت به POST دارد.از این متد برای ارسال اطلاعات حساسی مانند کلمه عبور استفاده نکنید.	نسبت به متد GET از امنیت بیشتری برخوردار است.پارامترهای ارسالی در تاریخچه مرورگر و در سیستم لاگ وب سرور ذخیره نمی شوند.
قابلیت مشاهده	اطلاعات در URL توسط همه قابل مشاهده است.	قابل مشاهده

قیمت سئو سایت و بهینه سازی سایت به چه صورت محاسبه می شود

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

قیمت سئو سایت

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

عدم تعریف مناسب از خدمات سئو و عدم هدفگذاری مناسب

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

 قیمت سئو بر اساس کلمه کلیدی

برخی دیگر قیمت سئو را بر اساس کلمه کلیدی اعلام میکنند، بدون اینکه در نظر داشته باشند که سئو داخلی مشتری شامل چه شرایطی است و چه کارهایی باید بر روی آن انجام شود. 

سئو سیاه در برابر سئو سفید

برخی دیگر قرارداد را به صورت کوتاه مدت منعقدکرده و نتیجه را منوط به قرار گرفتن در صفحه اول گوگل در کلمه خاصی می کنند. 

سئو سایت بر اساس پکیج 

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

• دید دراز مدت به همکاری با شرکت سئو
•  افزایش ورودی گوگل به نسبت سایر روش ها
•  فعالیت بر اساس اصول سئو سفید و مورد تایید گوگل
•  تاثیر پذیری کمتر نسبت به تغییرات ناگهانی رتبه های گوگل و…

قیمت سئو سایت توسط اکثر سایت چگونه محاسبه می شود؟

معمولا در تعیین هزینه بهینه سازی وب سایت موارد زیر را مد نظر قرار می گیرد

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

آنالیز و بهینه سازی محتوا

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

رفع خطای 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 و مدیریت آن‌ها با ابزارهای آنلاین سئو، نسبت به گذشته مهم‌تر شده است و حل مشکل سرعت سایت یکی از مهم‌ترین فاکتورهای موتورهای جستجو است بنابراین می‌توان از راهکارهای ارائه‌شده توسط گوگل یا دیگر منابع استفاده کرد.