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

رفع خطای 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