آموزش بهینه سازی سرعت صفحات سایت با 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 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طراحی سایت

رفع خطای Make favicon small and cacheable در YSlow جی تی متریکس

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

خلاصه‌ای از خطا Make favicon small and cacheable

نام: Make favicon small and cacheable
نوع: عکس
اولویت: پایین
میزان سختی: راحت
میانگین امتیاز: 99%

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

favicon چیست؟

favicon یا favicon.ico هست یک آیکون از تصویر کوچیک که همراه سایر فایل‌های سایت شما برای کاربران بارگذاری می‌شود. وقتی مرورگر یک کاربر با سایت شما برخورد می‌کند در پیش‌زمینه به دنبال یک favicon.ico است. favicon در جاهای مختلف نمایش داده می‌شود مثلا در تب مرورگر و یا وقتی یک سایت را در مرورگر خود بوک‌مارک (Bookmark) می‌کنید.

favicon

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

404-error-favicon-not-found

چگونه یک favicon بسازیم؟

خطای موجود در YSlow یاهو هم چنین چیزی میخواهد Make favicon small and cacheable ، بسازید یک favicon کوچک و قابل کش شده. فرمت یک favicon درواقع می‌تواند هم PNG ، GIF و یا ICO باشد، برهرحال فرمت ICO به طور معمول استفاده می‌شود و از طرفی بیشتر از فرمت‌های دیگر کوچک‌تر است و همین‌طور این فرمت را مرورگرهای بیشتری پشتیبانی می‌کنند. در این مقاله می‌توانید ابعاد صحیح و مختلف favicon را مشاهده کنید. در ادامه تمرکز بر نحوه ساخت favicon خواهد بود.

قدم یک

یک favicon به شکل کلی باید دارای ابعادی 16×16 پیکسل یا 32×32 باشد. و همچنین پیشنهاد می شود حجم آن زیر 1KB باشد. شما می‌توانید favicon خود را در برنامه‌های مختلفی که تمایل دارید بسازید، همانند فتوشاپ، ایلستریتور، Paint و غیره. و بعد این آنکه با چنین نرم افزارهایی عکس خود را ساختید به راحتی می‌توانید فایل را ذخیره کنید و فرمت آن را دستی تغییر دهید و یک اسم همانند favicon.ico به وجود بیاورید. شما همچنین می توانید برای ساختن favicon از ابزارهای آنلاین همانند real favicon generator استفاده کنید،در این ابزارهای آنلاین می‌توانید با فرمت‌های مختلفی همانند PNG، JPG و یا SVG (البته از نوع وکتور باشد بهتر است) اپلود کنید و سپس توسط این نرم افزار فرمت ICO تولید می‌شود.

قدم دو

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

<link rel=”shortcut icon” href=”/images/favicon.ico” type=”image/x-icon” />

فاوایکون در وردپرس

اگر وب سایت شما دارای CMS وردپرس است می‌توانید به راحتی به کمک افزونه اشاره شده favicon خود را بسازید. افزونه Favicon by RealFaviconGenerator چینن قابلی را به شکل رایگان برای شما فراهم می‌کند. همچنین می توانید به codex وردپرس مراجعه کنید.

فاوایکون در جوملا

اگر وب سایت شما دارای CMS جوملا  است می‌توانید favicon خود را در مسیر قالب خود یعنی /joomla/templates/<your template> قرار دهید. همچنین می‌توانید توضیحات رسمی سایت جوملا را مطالعه کنید

فاوایکون در دروپال

و اگر ساخت سایت CMS شما دروپال است می‌توانید توضیحات رسمی این CMS را در اینجا مطالعه کنید.

بهینه سازی Favicon

یک favicon بهینه سازی شده باید قابلیت کش شدن را داشته باشد تا وقتی مرورگر کاربر درخواست سمت سرور ارسال می‌کند سرور آن فایل را در لوکال کاربر ذخیره کنید تا در دفعات بعد دوباره آن فایل را درخواست نکند. این عمل می‌تواند leverage browser caching را تقویت کند به معنای قدرت کش کردن مرورگر. توسط هدرهایی نظیر expire headers و cache-control می‌توان انجام داد.

همان‌طور که اشاره کردیم بهتر است favicon زیر 1KB باشد و اگر در CDN آن را قرار دهید دیگر نهایت بهینه سازی را انجام داده‌اید.

small-favicon

رفع خطای 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 استفاده نمایید.