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

در این مقاله قصد داریم درباره ارور Reduce cookie size صبحت کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا بردن سرعت سایت ما می‌شود.

خلاصه‌ای از خطا Reduce cookie size

نام: Reduce cookie size
نوع: کوکی
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 99%

بهینه سازی سایت

قیمت طراحی سایت

Reduce cookie size چیست؟

Reduce به معنای کاهش است و ترجمه Reduce cookie size می‌شود اندازه سایز کوکی‌ها را کاهش دهید، چیزی که ما از این ارور برداشتیم می‌کنیم این است که باید تا حد امکان اندازه کوکی‌ها و همینطور تعداد کل کوکی‌ها را پایین نگه داریم که این امر باعث بهبود خطای Make fewer HTTP requests می‌گردد چرا که درخواست‌های هدر HTTP بهینه می‌شود و این هدرهای HTTP هستند که کوکی‌ها را از سرور به مرورگر کاربران هدایت می‌کنند. درخواست های HTTP در نوع کوکی که نام‌های مختلفی دارد همانند HTTP cookie ، web cookie و یا browser cookie گفته می‌شود و تمام این نام‌ها یکی هستند، کوکی برای مواردی مختلف همانند احرازهویت یا شخصی سایتی استفاده می‌شود، کوکی ها همچنین می‌توانند اطلاعات کارت بانکی، پسوردها و لاگین‌هایی که صورت می‌گیرد را ذخیره کنند (البته پیشنهاد نمی‌شود). اکثر وب سایت‌ها برای ذخیره سازی اطلاعات لاگین شما سوالی می‌پرسند که آیا ذخیره شود یا خیر، و اگر جواب منفی باشد عمل کوکی برای ذخیره سازی اطلاعات لاگین شما اتفاق نمی‌افتد، در طراحی سایت‌(طراحی سایت فروشگاهی، طراحی سایت شرکتی) های بانکی در زمان پرداخت و درج اطلاعات کوکی فعال نیست و اطلاعات به شکل کش شده در مرورگر ذخیره نمی‌شود و این عمل خطر امنیت را کاهش می‌دهد.

Reduce cookie size

کوکی‌ها یک سری اطلاعاتی را در HTTP headers بین وب سرور و مرورگر مبادله می‌کند و این مورد بسیار اهمیت دارد که ما بتوانیم سایز کوکی‌ها را به حداقل برسانیم و همینطور تعداد کوکیها را کاهش دهیم تا زمان درخواست پاسخ به کاربران بهینه شود. خطای Use cookie free domains هم به این مورد اشاره دارد و می‌گوید از کوکی کردن فایل‌های استاتیک خود اجتناب کنید.

رفع خطای Minify JavaScript and CSS در YSlow جی تی متریکس

در این مقاله قصد داریم درباره ارور Minify JavaScript and CSS صبحت کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا بردنسرعت سایت ما می‌شود.

minify-css

طراحی سایت (طراحی سایت  فروشگاهی، طراحی سایت شرکتی)

خلاصه‌ای از خطا Minify JavaScript and CSS

نام: Minify JavaScript and CSS
نوع: CSS/JS
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 72%

بهینه سازی سایت

سئو سایت

Minify JavaScript and CSS چیست؟

این خطا به فضاهای خالی، کامنت‌ها و کدهای غیرلازم در فایل‌های CSS و JS اشاره می‌کند، خطای Minify JavaScript and CSS مربوط به YSlow می‌باشد درحالی که در Pagespeed گوگل ما چنین خطاهایی را داشتیم و فرقی با خطای YSLow نمیکند.

رفع خطای Make JavaScript and CSS external در YSlow جی تی متریکس

در این مقاله قصد داریم درباره ارور Make JavaScript and CSS external صبحت کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بهبود سرعت سایت ما می‌شود.

خلاصه‌ای از خطا Make JavaScript and CSS external

نام: Make JavaScript and CSS external
نوع: CSS/JS
اولویت: متوسط
میزان سختی: راحت
میانگین امتیاز: 100%

Make JavaScript and CSS external چیست؟

make-javascript-and-css-external

به شکل کلی سه شیوه برای استفاده از کدهای CSS و یا JS در یک سند Html وجود دارد Inline، Internal و External که هرکدام دارای مزایا و معایب خاص خود در شرایط مختلف را داراست. باید توجه داشته باشید که تگ‌های HTML ابتدا کدهای External را لود می‌کند، پس‌ازآن به سراغ کدهای Internal و درنهایت کدهای نوع Inline را مورداستفاده قرار می‌دهد. درنتیجه کدهای Inline در اولویت قرار می‌گیرند. به‌عنوان‌مثال اگر در یک فایل External رنگ آبی برای یک تگ و در کدهای Internal رنگ زرد و بالاخره در کدهای Inline رنگ بنفش برای همان تگ انتخاب‌شده باشد، در چنین حالتی Html رنگ بنفش را مدنظر قرار خواهد داد. نحوه استفاده از این روش‌ها در عکس گویا است.

اصولا خطای Make JavaScript and CSS external برای ۹۹ درصد سایت ها سبز رنگ است ولی یاهو بیشتر قصد دارد یاداور نکاتی باشد که شاید در طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) شما باعث افزایش سرعت سایت شود، یاهو می‌گوید سعی کنید از روش External برای استفاده از فایل‌های استایل و جاوااسکریپت استفاده کنید و می‌گوید این روش باعث بهینه سازی سایت می‌شود چرا که وقتی فایل به شکل External باشد قابلیت کش شدن را نیز دارد. ولی اگر کدهای CSS و جاوااسکریپت را به شکل inline در سند HTML قرار دهید مرورگر هر بار که صفحات را باز می‌کند این کدها را هم دوباره می‌خواند، هر چند ممکن است این روش باعث شود درخواست های HTTP بالا رود (HTTP requests) ولی باهش کاهش حجم سند HTML می‌شود. پس اگر فایل‌های استایل‌دهی و جاواکسریپت به شکل External استفاده شوند جدا از اینکه باعث کاهش اسناد HTML می‌شوند و از طرفی با کش شدن آن‌ها تعداد درخواست‌ها هم حتی در بازدیدهای دوباره کم می‌شود.

پیشنهاد ما:

اگر حجم فایل خارجی (External) شما بسیار کم می‌باشد بهتر است به شکل inline درج شود یعنی رعایت خطای Inline small CSS and JavaScript ، از طرفی اگر کدهای inline با تعداد خط‌های بالا دارید بهتر است آن‌ها را به روش External پیاده کنید و با دیگر فایل‌های External ادغام کنید یعنی رعایت خطای Make JavaScript and CSS external. حال اگر تعداد فایل‌های External بیشتری دارید بهینه سازی آن بستگی به حجم آن است، اگر باز حجم بسیار کمی پیدا می‌کند همان روش inline هم می‌تواند مناسب باشد ولی اگر دیدید حجم نسبتا بالایی دارد آن‌ها را به دیگر فایل‌های موجود ادغام کنید، البته به شرط آنکه تداخلی در بین کدهای ادغام شده به وجود نیاید.

رفع خطای Make fewer HTTP requests در YSlow جی تی متریکس

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

مقدمه ارور Make fewer HTTP requests در YSlow

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

خلاصه‌ای از خطا Make fewer HTTP requests

نام: Make fewer HTTP requests
نوع: عکس
اولویت: پایین
میزان سختی: راحت
میانگین امتیاز: 99%

درخواست اچ تی تی پی HTTP requests چیست؟

http-request

اگر دقت کرده باشید در سایت GTmetrix.com مشکل درخواست‌ها در Yslow را با خطای Make fewer HTTP requests نشان می‌دهد که کلمه fewer به معنای کمتر است کلمه request هم به معنای درخواست است.
خطای Make fewer HTTP requests اشاره می‌کند که درخواست HTTP کمتر بسازید، توجه داشته باشید هر سه عبارت زیر به یک معنا است و یک هدف دارند:

• Make fewer HTTP requests – درخواست HTTP کمتر بسازید
• Reduce HTTP requests – کاهش درخواست HTTP
• Minimize HTTP requests – به حداقل رساندن درخواست HTTP

وقتی کاربری می‌خواهد توسط مرورگر خود مثلا وارد سایت سئوراز شود باید آدرس سایت mizfa.com را وارد نمایید، وقتی آدرس را وارد می‌کند مرورگر یک درخواستی ارسال می‌کند برای پیدا کردن ای پی سایت سئوراز به کمک ISP های منطقه و جهانی، بعد از دریافت پاسخ و باز بودن پورت‌های لازمه، مرورگر در اینجا تعدادی درخواست HTTP ارسال می‌کند تا بعد از پاسخ سرور بتواند سایت را برای کاربر نشان دهد، به اولین بایت از پاسخی که سرور به مرورگر ارسال می‌کند Time to First Byte یا به اختصار TTFB گویند.

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

درخواست های http شامل :

• عکس‌ها
• فایل‌های استایل سی اس اس (CSS)
• فایل‌های جاوااسکریپت (JS)

و … می‌تواند باشد.

speed-up-your-site-request-process

شاید باید گفت که مهم‌ترین روش برای بهبود کلی تعداد درخواست‌ها و کاهش آن‌ها ادغام اصولی فایل‌ها می‌باشد که مستقیم بر روی تعداد درخواست های HTTP اثرگذار است.

minimizerequests

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

خطاهای مربوط به درخواست HTTP

• رفع خطای Minimize request size : ارور Minimize request size دقیقا همانند ارور Make fewer HTTP requests هست صرفا نام آنها فرق دارد و آنکه اولی مربوط به گوگل می‌باشد و خطای fewer HTTP مربوط به یاهو است. درحالی که هر دو خطا به یک هدف اشاره می‌کنند ولی در اکثر موارد Minimize request size سبز رنگ است و fewer HTTP قرمز رنگ. به هرحال با رعایت و رفع فاکتورهای Minimize request size می‌توان تا حد زیادی باعث بهبود خطای fewer HTTP شد.
• رفع خطای Inline small CSS and JavaScript : این خطا می‌گوید اگر فایل‌های CSS و یا فایل‌های JS که دارای حجم کوتاه هستند را در یک خط قرار دهید، در اینجا inline به معنای قرار دادن فایل‌های CSS کوچک در یک خط است به عبارت دیگر منظور این خطا این است که فایل‌های CSS و JS کوتاه را ادغام کنید.
• رفع خطای Combine images using CSS sprites : اگر تعداد عکس‌های کوچک در طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) خود زیاد باشد به مراتب تعداد درخواست‌ها هم بیشتر و درگیری سرور هم بالا می‌رود، در روش CSS sprites با ترکیب تمام تصاویر در یک عکس و درج مختصات به آن به کمک CSS از قسمت‌های مختلف عکس در مکان دلخواه استفاده می‌کنیم، در این روش تنها یک درخواست برای یک تصویر به سرور ارسال می‌شود ولی چندین بار از عکس در قسمت‌های مختلف قالب استفاده می‌شود. با انجام این روش سرعت وب سایت بسیار بیشتر می‌شود.
• رفع خطای Defer parsing of JavaScript : هنگام بارگذاری صفحه‌ی از سایت، مرورگر کاربر بایستی محتوای همه فایل‌های جاوا اسکریپت را خوانده و اجرا کند، که این کار مسلماً زمان بر خواهد بود. برای همین پیشنهاد می‌شود تا فایل‌های جاوا اسکریپت را در پایین صفحه فراخوانی کنید تا زمان بارگذاری اولیه صفحه وبسایت‌تان را کاهش دهید، و اگر چنین نباشد تعداد درخواست‌های اولیه HTTP بالا رفته و سایت نیز به شکل سریع برای کاربر لود نمی‌شود.
• رفع خطای Serve resources from a consistent URL : این خطا وقتی رخ می‌دهد اگر شما دو عکس یکسان را با دو آدرس متفاوت در صفحه‌ای از طراحی سایت (قیمت طراحی سایت) خود بارگذاری نمایید، این عمل باعث می‌شود که تعداد درخواست‌های سمت سرور بالا رود و وقتی درخواستهای HTTP افزایش یابد، سرور بیشتر درگیر پاسخ می‌شود.
• رفع خطای Enable Keep Alive : اگر Keep Alive فعال نباشد این مفهوم را می‌رساند که مرورگر بیش از یک فایل را در آن واحد نمی‌تواند درخواست کند آن موقع مرورگر برای دریافت همه فایل‌ها هر بار درخواست جداگانه ارسال می‌کند و اگر سرور هر بار جداگانه پاسخ بدهد حاصل آن، زمان زیادی برای دریافت تمام فایل‌ها تلف خواهد شد. درواقع رفع این خطا باعث بهبود درخواست های HTTP می‌شود و اجازه می‌دهد در یک واحد از زمانی در قالب یک درخواست، چند درخواست دیگر هم بفرستد.
• رفع خطای Leverage browser caching : فعال سازی کش هم بسیار می‌تواند در کاهش تعداد درخواست‌ها موثر باشد ولی نه برای کاربرانی که اولین بار از سایت شما بازدید می‌کنند، قطعا شما عکس‌ها و فایل‌هایی مشترک در بین صفحات خود دارید و اگر کاربر قصد داشته باشد در وب سایت شما وبگردی بکند باید طوری تنظیم کنید که این فایل‌های مشترک در بین صفحات هر بار نخواهد درخواست سمت سرور ارسال کنید و از آن بخواهد، با کش کردن چنین فایل‌هایی بازدیدهای دوباره درخواست‌های کمتری دارند و مرورگر قبل از درخواست HTTP به کش لوکال یا محلی خود نگاه می‌کند و اگر در آنجا کش شده باشد دیگر درخواستی ارسال نمی‌کند.
• سایز موارد در کاهش درخواست های HTTP
  استفاده از CDN
  استفاده از حالت تنبل فایل‌ها
  غیرفعال کردن یا حذف کردن پلاگین‌ها، اسکریپت‌ها و کدهایی که لازم نیست و در سایت غیرضروری هستند.
  تغییر پلاگین‌ها، اسکریپت‌ها و کدهایی که به شکل فله‌ای درخواست‌های HTTP نیز ارسال می‌کنند.

افزونه مفید وردپرس جهت کاهش HTTP requests

برخی از پلاگین‌های مفید مخصوص وردپرس برای رفع بعضی از این خطاها :

• JCH Optimize
• دانلود نسخه اورجینال WP Rocket
• Autoptimize
• WP Fastest Cache
• W3 Total Cache
• WP Super Minify
• Page Speed Optimization for SEO
• Speed Booster Packطراحی سایت

رفع خطای Remove query strings from static resources در gtmetrix

در این مقاله قصد داریم درباره مشکل رایج Remove query strings from static resources و حل آن در جی تی متریکس صحبت کنیم و بررسی کنیم که چطور این خطا یا همان حذف علامت سؤال از انتهای آدرس منابع در جهت افزایش سرعت سایت به ما کمک می‌کند و آیا بودن query strings ها برای ساخت سایت ما مفید است یا خیر.

خلاصه‌ای از خطا Serve resources from a consistent URL

نام: Remove query strings from static resources
نوع: محتوا
اولویت: کم
میزان سختی: راحت
میانگین امتیاز: 89%

علت خطای Remove query strings from static resources در جی تی متریکس چیست؟

جنبه منفی query strings: وجود query strings در منابع سایت ما باعث می‌شود که آن منابع در سمت کاربر کش نشود و اگر منابع همانند CSS یا JS در سمت کاربر کش نشود خطاهایی نظیر Leverage browser caching هم رخ خواهد داد و مشکلات بسیار دیگری را فراهم می‌کند، استفاده از query strings باعث می‌شود فایل‌های استایل (CSS) و جاوا اسکریپت در بسیاری از مرورگرها و همین‌طور CDN ها کش نشود.

remove-query-string

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

remove-query-strings-static-resources

بهترین روش این هست که شما query strings های سایت خود را حذف کنید و مدت‌زمان کش فایل‌ها را برحسب نوع آن و سابقه آپدیت آن فایل‌ها، کشکنید تا دیگر از هیچ سمتی به مشکلی برنخورید.

نحوه رفع خطای Remove query strings from static resources

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

در وردپرس

• برای رفع این خطا اگر تمایل به استفاده از کدها را ندارید و سایت وردپرسی دارید، می‌توانید پلاگین Remove Query Strings را نصب کنید این پلاگین بدون هیچ‌گونه تنظیمات اضافه باعث رفع مشکل Remove query strings from static resources در مدیریت محتوای وردپرس می‌شود.
• پلاگین WP Rocket در نسخه ۲.۹ به بعد خود قابلیت رفع خطای Remove query strings from static resources را قرار داده هست و اگر از این پلاگین استفاده می‌کنید می‌توانید همانند عکس زیر تیک آن را بزنید.

remove-query

• پلاگین W3 total cashe هم گزینه‌ای دارد که با برداشتن آن باعث رفع این خطا می‌شود، اگر این افزونه را در سایت وردپرس خود نصب‌کرده‌اید با فعال بودن گزینه Prevent caching of objects after settings change در قسمت Brower Cahse باعث ایجاد خطای query strings می‌شوید، پس تیک آن را بردارید.

W3-Total-Cache-Browser-Cache

• با استفاده از فایل Function.php می‌توانید به شکل دستی خطای query strings را رفع کنید کافی است کد زیر را در انتهای فایل Function.php قرار دهید.

در دروپال

برای حذف query strings ها درفایل های CSS دروپال می‌توانید کد زیر را در template.php قرار دهید، فقط توجه داشته باشید که به جای MYTHEME نام قالب مورد نظر خود را وارد کنید.

در جوملا

به کمک افزونه joomsef شما می‌توانید این مشکل را رفع کنید، البته در تنظیمات کلی جوملا یعنی Global Configuration و قسمت SEO Settings گزینه‌ای وجود دارد با عنوان search engine friendly (SEF) URLs که اگر فعال باشد آدرس‌های شما را هم برای کاربران و هم برای موتورهای جستجو بهینه تر می‌کند، مثلا آدرس http://example.com/index.php?page=name تبدیل به http://example.com/name می‌شود. اگر شما گزینه SEF URLs را در جوملا فعال کرده باشید ممکن است آدرس‌های non-SEF URLs به شکلی در سایت ایندکس شوند و باعث ایجاد محتوای تکراری شود که تاثیر بد برای سئو سایت دارد و همچنین یکی از عوامل پنالتی شدن سایت در گوگل نیز می‌باشد، بنابراین برای جلوگیری از این امر می‌توانید از دستور زیر در فایل robots.txt استفاده نمایید تا آدرس‌هایی که دارای علامت ? هستند را ربات ایندکس نکند.

در PHP

اگر ساختار سایت شما بر اساس زبان برنامه نویسی PHP است و از CMS های رایگان استفاده نمی‌کنید می‌توانید از دستور زیر برای رفع خطای query strings استفاده کنید، کد نوشته شده توسط سایت Addedbytes است و تشکر به خاطر این دستور نوشته شده، شما برای حذف مقادیر موجود در url می‌توانید از متغییر $key استفاده نمایید.