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

در این پست قصد داریم درباره ارور Reduce the number of DOM elements صبحت کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا بردن سرعت سایت ما می‌شود.

طراحی سایت فروشگاهی

طراحی سایت شرکتی

خلاصه‌ای از خطا Reduce the number of DOM elements

نام: Reduce the number of DOM elements
نوع: محتوا
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 92%

طراحی سایت

مدل DOM چیست ؟

مدل DOM مخفف عبارت Document Object Model است که برای دسترسی به اشیا و عناصر موجود در یک سند HTML یا صفحه HTML است، این مدل از یک سری درخت سلسله مراتبی برای این دسترسی استفاده می‌کند. این درخت از شی Window به عنوان عنصر مادر یک صفحه HTML شروع شده و به ترتیب به عناصر رده پایین تر ادامه پیدا می‌کند، تا به پایین‌ترین رده عناصر یعنی متن و نوشته برسد . شکل زیر یک نمای کلی از درخت سلسله مراتب در مدل DOM است:

مدل DOM چیست

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

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

تاثیر خطای Reduce the number of DOM elements در سرعت سایت

ولی استفاده بیشتر این عناصر DOM باعث کند شدن سایت می‌شود، و همان‌طور که نوشته شده Reduce the number of DOM elements یعنی کاهش دهید تعداد المان‌های DOM را، و برای این کاهش باید زبان جاواکسریپت و DOM آشنایی داشته باشید. مشکل سرعت وردپرس خیلی از دوستان که از قالب‌های اماده استفاده می‌کنند می‌تواند این خطا هم باشد هر چند اگر بقیه موارد بهینه سازی شده باشند خطای Reduce the number of DOM elements را بهتر است نادیده بگیرید.

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

در این پست قصد داریم درباره ارور Use a Content Delivery Network صبحت کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا بردن سرعت سایت ما می‌شود. توجه داشته باشید که ما در ادامه هم از عبارت CDN (شبکه توزیع محتوا) استفاده خواهیم کرد و هم از عبارت CDN Public (شبکه توزیع محتوا عمومی) که این دو عبارت برای اهدافی متفاوت ایجاد شده اند، بنابراین این دو عبارات را یکی ندانید.

خلاصه‌ای از خطا( Use a Content Delivery Network (CDN

نام: (Use a Content Delivery Network (CDN
نوع: محتوا
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 92%

CDN چیست؟

CDN یا به اختصار Content Delivery Network به معنای شبکه توزیع محتوا است البته به شبکه تحویل محتوا هم می‌توان ترجمه کرد، قصد داریم به کمک شکل زیر به سادگی معنا و هدف CDN را بیان کنیم.

CDN چیست

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

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

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

افزایش سرعت سایت : طبق توضیحات بالا استفاده از شبکه توزیع محتوا باعث بهبود سرعت سایت و سریع‌تر لود شدن صفحات برای کاربران می‌شود.
کاهش مصرف پهنای باند سرور اصلی : زمانی که شما از CDN استفاده می‌کنید سرورهای CDN یک نسخه کپی از محتویاتی که تقریبا ثابت هستند (فایل‌های CSS ، جاوااسکریپت، عکس‌ها، فونت‌ها و …) در سرور خود ذخیره می‌کنند و زمانی که کاربر درخواستی را برای باز شدن صفحات سایت شما ارسال می‌کند به جای ارسال درخواست به سرور اصلی به سرورهای CDN ارسال می‌شود که باعث کاهش مصرف پنهای باند سرور اصلی می‌شود.
کاهش مصرف منابع سرور اصلی: استفاده از شبکه توزیع محتوا باعث کاهش تعداد درخواست‌های HTTP از سمت کاربران می‌شود و این عمل بار بسیاری را از دوش سرور اصلی کم می‌کند که نتیجه آن کاهش مصرف منابه سرور اصلی می‌باشد.
افزایش رتبه سایت در گوگل : یکی از موارد بهبود سئو سایت بالا بردن سرعت سایت است و گوگل اعلام کرده است که سرعت سایت یکی از فاکتورهای مهم در رتبه‌بندی نتایج خواهد بود.
بهبود تجربه کاربری : سرعت سایت و بارگذاری سریع صفحات سایت ارتباط مستقیمی با تجربه کاربری (UX) خواهد داشت، چرا که کاربران زمان کمتری را برای لود شدن فایل‌های لازمه یک صفحه صرف خواهند کرد و تاخیر در بارگذاری تا حد بسیار زیادی کاهش پیدا می‌کند، همین موضوع می‌تواند باعث کاهش نرخ دفع کاربری هم شود.
۱۰۰ درصد بالا بودن سرور : زمان که شما از شبکه توزیع محتوا یا CDN استفاده می‌کنید حتی زمانی که سرور اصلی قطع شود نسخه کپی موجود در سرورهای CDN به کاربران نمایش داده می‌شود تا با قطعی سرور کاربران شما برخورد نکنند.
افزایش امنیت سایت : استفاده از CDN باعث افزایش امنیت سایت و جلوی حملاتی نظیر DDoS را میگیرد چرا که شبکه توزیع محتوا به راحتی می‌تواند با استفاده از پهنای باند نامحدود خود بار حملات DDoS خنثی کند.

معایب استفاده از CDN

هزینه CDN : یکی از معایب استفاده از شبکه توزیع محتوا هزینه نسبتا بالای برخی از ارائه دهنده‌گان CDN است، هر چند برخی از ارائه دهنده‌گان دارای پنل رایگان هستند همانند سایت cloudflare ولی استفاده از پنل رایگان با توجه به محدودیت های فراوانی که دارند، برای سرورهای داخل ایران توصیه نمی‌شود که در ادامه علت آن را خواهیم گفت، از بین سایت های ارائه دهنده شبکه توزیع محتوا خارجی می‌توان سایت MaxCDN را اشاره کرد که دارای پنل‌هایی با قیمت مناسب است. در ادامه انواع سایت‌های ارائه دهنده CDN را نام خواهیم برد.
مسدود شدن برخی کاربران : گاهی پیش آمده دسترسی برخی کاربران به سایت مسدود شده چرا که برخی سازمان‌ها و یا حتی کشورها دسترسی‌ها را به برخی کاربران محدود می‌کنند و درنتیجه بسیاری از دامنه ها در این سازمان ها و کشورها غیر قابل دسترسی می گردد. یا برخی CDNها حساسیت بالایی به تعداد درخواست‌های HTTP دارند و اگر حتی یک کاربری صفحات زیادی از یک سایت را باز کند ممکن است CDN واکنش نشان دهند و تصور کند که سایت مورد حمله است و ای پی آن شخص را مسدود کند (این موضوع برای خوده بنده بسیار پیش آمده)

معرفی برخی از CDNهای معروف

برخی از CDNهای معروف عبارت اند از:

• Amazon Cloudfront
• MaxCDN
• Cloudflare
• Arvancloud

چند نکته:

• سرور Cloudflare پنل رایگانی دارد که اکثر طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) های ایرانی برای استفاده از CDN از این سایت استفاده می‌کنند ولی اگر سرور اصلی سایت شما در ایران است توصیه نمی‌شود از این پنل رایگان استفاده کنید چرا که در بیشتر موارد مشاهده شده به جای بهبود سرعت سایت باعث کاهش سرعت سایت برای کاربران ایرانی می‌شود.
• سایت Arvancloud توسط یک شرکت ایرانی تاسیس شده است و خدمات مناسبی را ارائه می‌دهد، پیشنهاد ما استفاده از این CDN است هر چند استفاده از این شبکه توزیع محتوا باعث رفع خطای Use a Content Delivery Network در جی تی متریکس نمی‌شود که نشانه ضعف این ابزار آنلاین است.
• سایت MaxCDN نسبت به CDNهای خارجی دیگر پنلی ارزان‌تر دارد و اگر قصد خرید سی دی ان خارجی با هزینه مناسب هستید می‌تواند گزینه مناسبی باشد.
• اگر از سیستم مدیریت محتوا وردپرس استفاده می‌کنید می‌توانید از افزونه رایگان Jetpack استفاده کنید که امکان استفاده از شبکه توزیع محتوا یا CDN اختصاصی را به شما می‌دهد.

شبکه توزیع محتوا عمومی چیست؟

استفاده از سرویس رایگان شبکه توزیع محتوای عمومی (Free Public CDN Services) باعث افزایش سرعت سایت، ذخیره پهنای باند سرور اصلی، بهبود تجربه کاربری می‌شود، در سرویس‌های رایگان توزیع محتوای عمومی کتابخانه‌های معروف جاوااسکریپت و CSS قرار دارند تا برنامه‌نویس ها به جای اپلود کردن این کتابخانه های مهم و معروف در سرور اصلی سایت، از سرورهای رایگان توزیع محتوای عمومی استفاده کنند، این عمل باعث کاهش تعداد درخواست‌های HTTP به سمت سرور شما هم می‌شود، مثلا به جای اینکه فایل jquery.min.js را مثل آدرس زیر در طراحی سایت خود لود کنیم.

<script src=”https://mizfa/com/file/js/jquery.min.js”></script>

از jquery.min.js موجود در Google CDN که یکی از شبکه‌های توزیع مجتوای عمومی است استفاده کنیم:

       <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>

Google CDN

لینک: https://developers.google.com/speed/libraries

پایداری یکی از مهم‌ترین خصوصیات این CDN است، شبکه توزیع محتوا عمومی گوگل از محبوبترین کتابخانه های منبع باز JavaScript پشتیبانی می‌کند و همیشه این شبکه توزیع محتوای عمومی اخرین نسخه‌های انتشار شده را در کتابخانه CDN خود قرار می‌دهد.

Microsoft CDN

لینک: http://www.asp.net/ajax/cdn

یکی از محبوب‌ترین کتابخانه‌های CDN به شکل رایگان را برای کاربران فراهم کرده است. شبکه توزیع محتوا عمومی مایکروسافت از محبوبترین کتابخانه Ajax در انواع نسخه‌ها را پشتیبانی می‌کند.

jsDelivr CDN

لینک: http://www.jsdelivr.com

jsDelivr خود از ۵ سی دی ان قدرتمند دیگر برای ارائه خدمات هر چه بهتر به کاربران استفاده می‌کند که معروف‌ترین آنها Cloudflare و MaxCDN هستند. شاید این لینک برای شما جالب باشد که نحوه توزیع محتوا عمومی در jsDelivr به چه شکل است، انواع کتابخانه‌های معروف این CDN عمومی درون خود دارد و کافیست برای استفاده از یک فایل نام آن را در صفحه اول تایپ کنید.

cdnjs CDN

لینک: https://cdnjs.com

cdnjs توسط CloudFlare حمایت می‌شود و فایل‌های مربوط به jQuery ، Modernizr و Bootstrap در خودش دارد، استفاده بسیاری از این سی دی ان عمومی و محبوب می‌شود.

jQuery CDN

لینک: https://code.jquery.com

jQuery قدرت گرفته از MaxCDN است. و اخرین نسخه‌های کتابخانه JavaScript را همیشه در دسترس قرار می‌دهد.

نحوه رفع خطای Use a Content Delivery Network

برای رفع این خطا در Yslow پیشنهاد میکنیم از CDNهایی که معرفی کردیم استفاده نمایید، اگر بنا به شرایط خود نمی‌توانید استفاده کنید بهتر است حداقل برای لود کردن برخی از فایل‌های معروف در سایت خود همانند کتابخانه‌های JavaScript از CDN Public استفاده کنید.

آموزش افزایش سرعت سایت با 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 توسط همه قابل مشاهده است.	قابل مشاهده

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

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

خلاصه‌ای از خطا Reduce DNS lookups

نام: Reduce DNS lookups
نوع: محتوا
اولویت: پایین
میزان سختی: متوسط
میانگین امتیاز: 70%

خطا Reduce DNS lookups

DNS lookups چیست ؟

Hostname یا آدرس یک سایت همانند seoraz.com گفته می‌شود، تمام Hostname ها استعاره از یک IP هستند که به این استعاره alias هم گفته می‌شود و اگر توجه کرده باشید در تنظیمات DNSها یک نوع رکوردی وجود دارد به نام A، در این نوع رکوردها نام یک سایت (Hostname) را می‌دهیم تا به یک IP وصل شود.

زمانی که شما یک Hostname را در نوار آدرس مرورگر خود تایپ می‌کنید مانند seoraz.com سیستم شما به دنبال IP آن می‌گردد و اگر در خودش نباشد به‌وسیله مودم به دنیای بیرون وصل می‌شود و یک action به نام DNS lookups(جستجوی DNS) ایجاد می‌کند، ابتدا به سراغ DNS Serverهای ISP محلی (سرویس‌دهندگان اینترنت) می‌رود و به دنبال IP یک Hostname که شما تایپ کردید می‌گردد و اگر درون ISP محلی نباشد به یک DSN Server سطح بالاتر مراجعه می‌کند همانند ISP های جهانی و حتی اگر پاسخ را در آن‌ها پیدا نکند (که بسیار بعید است) درنهایت به بالاترین مرجع یعنی InterNIC خواهد رسید.

InterNIC پایگاه داده‌ ثبت‌نام دامنه (Domain Registration Database) وبرترین و بزرگ‌ترین DNS Server است . شما می‌توانید با مراجعه به آدرس www.internic.net و انتخاب گزینه Whois و سپس واردکردن آدرس یک سایت به جستجو درباره سایت مربوطه و webserver آن بپردازید.

پس به شکل خلاصه DNS lookups یعنی عمل جستجوی IP یک سایت در بین DNS Serverها می‌باشد. فرآیند DNS lookup تا زمانی که تمام نشود مرورگر نمی‌تواند فایل‌های لازمه برای نمایش سایت را دانلود کند و اصولا این فرآیند زمانی بین 20 تا 120 میلی‌ثانیه به طول می‌انجامد تا IP یک سایت را پیدا کند.

مثال از DNS Lookup

در این مثال می‌خواهیم به شما نشان دهیم که چطور یک DNS lookup می‌تواند بر روی بهینه سازی سرعت سایت تاثیر بگذارد، به همین منظور از یک ابزار آنلاین تست سرعت سایت استفاده می‌کنیم و ما در اینجا به کمک ابزار webpagetest.org سایت seoraz.com را تست می‌کنیم. به آدرس ذکر شده رفته و در سربرگ Details به بررسی این موضوع می‌پردازیم.

DNS Lookup

طبق عکس، سایت سئوراز درکل از ۳۰ درخواست ساخته شده است که ۳ نوع آن DNS lookup است، نتیجه‌ای که از این تست می‌توان گرفت این است که زمان لازم برای پیدا کردن DNSهای موجود در سایت سئوراز حدود 100 میلی‌ثانیه می‌باشد که این زمان بسیار فوق العاده می‌باشد و نشان از بهینه سازی سئو سایت صحیح آن است، ولی گاهی ما در پروژه‌های افزایش سرعت سایت برخوردیم که زمان کل DNS lookup به 2980 رسیده و این یعنی 2.98 ثانیه به زمان کل بارگذاری سایت اضافه می‌شود. و اگر سعی کنیم می‌توانیم این زمان را بهبود دهیم، پس می‌توان نتیجه گرفت که DNS lookup می‌تواند بر سرعت سایت تاثیر مناسبی داشته باشد و بهبود آن باعث بهینه سازی سایت می‌شود. در پروژه‌ای که اشاره کردیم ما در انتها توانستیم زمان 2980 را به 1201 برسانیم و این نکته بسیار مهم است چرا که در بهبود سازی فقط یک فاکتور دو ثانیه از زمان لود کل وب سایت کاسته شد.

هدف Reduce DNS Lookups هم همین است، میگوید Reduce کنید یعنی کاهش دهید. ترجمه کامل آن می‌شود زمان جستجوی DNS را کاهش دهید، به عبارت دیگر تعداد دفعات DNS Lookup را کاهش دهید.

نحوه رفع مشکل Reduce DNS lookups

کاهش تعداد DNS lookup ساده به نظر می‌رسد و میتوان با داشتن سیاست های مناسب به این خواسته رسید.

به سادگی شما می‌توانید تعداد دامنه‌های مجزایی که در سند سایت خود آن‌ها را فراخوانی کرده‌اید را کاهش دهید. مثلا به عکس بالا توجه کنید، ۳ بار درخواست از نوع DNS lookup بوده است چرا که سه دامنه متفاوت در سند سایت میزفا فراخوانی شده است، که اولی طبیعتا خوده سایت یعنی دامنه seoraz.com است، دومی مربوط به سایت cloudflare است و سومی برای گوگل آنالیتیکس می‌باشد. در ساخت سایت‌ های ایرانی مخصوصا سایت‌های با CMS های اماده همانند وردپرس و جوملا ممکن است به خاطر نصب افزونه‌های مختلف از شرکت‌های متفاوت، چنین خطاهایی بسیار باشد، چرا که هر افزونه ممکن است از سایت‌های لازمه برای به اجرا در آمدن در سایت شما فایل هایی را در سند HTML سایتتان لود نماید و این یعنی افزایش DNS lookup در طراحی سایت شما. نمونه سایت‌های مشهوری که در بسیاری از سایت‌های ایرانی وجود دارد توجه نمایید:

• دامنه fonts.googleapis.com : مربوط به فونت‌های گوگل می‌باشد.
• دامنه google-analytics.com : مربوط به ابزار آمارگیر گوگل یعنی گوگل آنالیتیکس
• دامنه maps.googleapis.com : مربوط به مپ گوگل
• دامنه cdnjs.cloudflare.com : مربوط به CDN کلودفلیر
• دامنه amarfa.ir : مربوط به طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی)‌ ایرانی برای گرفتن آمار
• دامنه webgozar.com : مربوط به سایت داغون امار گیر
• دامنه logo.samandehi.ir : لوگوی مجوز اخذ شده از ساماندهی محتوای فضای مجازی
• دامنه trustseal.enamad.ir : لوگوی مجوز اخذ شده از سایت ای نماد
• دامنه cdn.onesignal.com : مربوط به سایت onesignal برای ایجاد نوتیفیکیشن در مرورگر کاربران
• و تمام زیردامنه‌های سایت شما و هر فایلی که از دیگر دامنه‌ها در سند شما بارگذاری شود باعث افزایش DNS lookup می‌شود.

بنابراین روش اول که اشاره شد جذف چنین سایت‌هایی برای Reduce DNS lookups می‌باشد، روش دوم دانلود فایل‌هایی است که از یک سایت خارجی در سند ما لود می‌شود و قرار دادن آن فایل در هاست خود یا CDN سایت ما، که این روش باعث بهبود DNS lookups می‌شود، همان‌طور که می‌دانید برای دیدن سایت میزفا حداقل یک DNS lookups یعنی seoraz.com به ناچار به وجود می‌اید بنابراین وقتی چنین DNS lookups قطعا وجود دارد می‌توان فایل‌هایی که از دیگر سایت‌ها در سایت ما لود می‌شود را درون هاست خود قرار دهیم و یا اگر CDN داریم در آنجا قرار دهیم. البته ذخیره چنین فایل‌های خارجی از دامنه‌های دیگر در CDN راه بهتری است چرا که باعث کاهش فشار به سرور اصلی سایت شما می‌شود.
رکورد Canonical Name به اختصار CNAME نام برده می‌شود و یکی از رکوردهای نسبتا پرکاربرد DNS است، این نوع رکورد DNS که از یک نام دامنه مستعار (alias) استفاده می‌کند تا به دامنه‌ای دیگر وصل شود، سعی کنید در فراخوانی آدرس‌ها از CNAME در سایت خود استفاده نکنید. چرا که یک رکورد CNAME اشاره می‌کند به رکورد A و تازه رکورد A به دنبال DNS می‌گردد تا ای پی سایت را پیدا کند. پس به حداقل رساندن رکوردهای CNAME در بهبود لود سایت کمک می‌کند.

Reduce DNS lookups

در سایت ITPOR به نکات خوبی اشاره شده و خلاصه نکات در ۶ جمله کوتاه اورده شده است:

1. یک CName به یک اسم Domain یا A Record دیگر اشاره می‌کند
2. یک A Record به یک آدرس IP اشاره می‌کند
3. پیدا کردن یک CName یعنی آغاز یک جستجو (شروع DNS lookups)
4. پیدا کردن یک A Record یعنی پایان یک جستجو (پایان DNS lookups)
5. تداخل CName های زیاد می تواند باعث ایجاد شدن Loop شود (یعنی افزایش DNS lookups)
6. وجود A Record های زیاد هرگز ایجاد Loop در نتایج DNS نمی کند

Defer parsing of JavaScript باعث می‌شود لود اولیه سایت بهبود یابد و برخی از DNS lookupsها را به تاخیر اندازد.
فعال بودن keep-alive باعث کاهش DNS lookups می‌شود، زمانی که keep-alive فعال نباشد برای دریافت هر فایل درخواست‌ها به شکل جداگانه ارسال می‌شود و هر بار برای یک درخواست DNS lookup رخ می‌دهد، ولی با فعال بودن keep-alive باعث می‌شود که فقط درخواست DNS lookups برای هر دامنه یک بار رخ دهد و مجموعه درخواست‌ها برای هر دامنه در قالب یک درخواست ارسال می‌گردد.
تمام موارد مربوط به Make fewer HTTP requests می‌تواند به رفع خطای Reduce DNS lookups کمک نماید.

درباره DNS caching

تشکر از DNS caching موجود در کامپیوترها که کمک خوبی به افزایش سرعت سایت می‌کند، چرا که مرورگر دوباره لازم نیست برای پیدا کردن ای پی به DNS Server ها دستوری ارسال کند و از کش لوکال برای پیدا کردن ای پی یک سایت استفاده می‌کند، البته ذکر این نکته لازم است که وقتی سرور یا هاست یک سایت تغییر کند IP آن سایت هم عوض می‌شود بنابراین مرورگر شما در حافظه‌ی پنهان یا همان کش DNS خود، از IP قدیمی استفاده می‌کند و شما نمی‌توانید مثل همیشه به سایت مورد نظر متصل شوید.

اگر از مرورگر کروم استفاده می کنید دستور chrome://net-internals/#dns را وارد نمایید تا تمام DNSهایی که در حافظه پنهان خود ذخیره کرده است را مشاهده کنید. برای پاک کردن کش DNS در ویندوز می‌توانید با اجرا کردن CMD در حالت Run as administrator دستور ipconfig /flushdns تایپ و اجرا نمایید.

DNS caching

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