15 نکته طلایی برای بالا بردن سرعت وب سایت

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

گوگل می گوید:

آزمایش‌ها نشان دادند که افزایش مدت زمان تاخیر جستجو در وب سایت از 100 تا 400 مگابایت ، تعداد جستجو روزانه را از 0.2 به 0.6 درصد کاهش خواهد داد. علاوه بر آن کاربران کمتری در معرض جستجو نتایج بدست آمده خواهند بود. حتی با گذشت زمان وضعیت بهبود پیدا نخواهد کرد و تغییری حاصل نمی شود.

ما تعدادی از عوامل مهم و تاثیرگذار در افزایش سرعت وب سایت را دسته بندی کردیم و می‌خواهیم آن را در زیر شرح دهیم:

• 1 تاثیر سرور در سرعت سایت
  • 1.1 Leverage browser caching
  • 1.2 فعال باقی گذاشتن Keep-Alive
  • 1.3 Enable gzip compression
  • 1.4 استفاده از یک CDN
• 2 تاثیر منابع در سرعت ساخت سایت
  • 2.1 کاهش تغییر مسیر (Minimize redirects)
  • 2.2 حذف رشته علامت سوال از منابع استاتیک (Riove query strings from static resources)
  • 2.3 مشخص کردن یک مجموعه کاراکتر (Specify a character set)
  • 2.4 کدهای خود کم کنید ( Minify your codes)
  • 2.5 از درخواست های بد دوری کنید (Avoid bad requests)
  • 2.6 حفظ منابع از یک آدرس سازگار (Serve resources from a consistent URL)
  • 2.7 کاهش جستجو دی ان اس (Reduce DNS lookups)
  • 2.8 قرار دادن CSS در بالا و JS در پایین (Put CSS at the top and JS at the bottom)
• 3 تاثیر تصاویر و عکس ها در سرعت سئو سایت
  • 3.1 ابعاد تصویر را مشخص کنید (Specify image dimensions)
  • 3.2 بهینه سازی تصاویر (Optimize images)
  • 3.3 یکی کردن عکس‌های کوچک

تاثیر سرور در سرعت سایت

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

1. Leverage browser caching

   شما می‌توانید از طریق هدرهای که وظیفه منقضی کردن فایل‌ها در  مرورگر کاربر را دارند بگویید آیا منبع یک وب سایت مورد درخواست ذخیره شود یا از کش مرورگر می‌توان آن را دریافت کرد. هنگامی که یک هدر برای منبع تعیین می‌کنید، مانند تصاویر JPEG، مرورگر آن منابع را در حافظه پنهان ذخیره می‌کند. مرتبه دیگر که بازدید کننده به صفحه می‌آید شاهد بارگذاری سریع‌تر صفحه خواهد بود و همانطور که مرورگر آن تصاویر را دردسترس خود دارد. حتما پیشنهاد میکنم مقاله حل ارور Leverage browser caching را مطالعه نمایید.

2. فعال باقی گذاشتن Keep-Alive

   در حقیقت HTTP Keep-Alive با اتصال به TCP اجازه می‌دهد تا مدت زمان تاخیر کاهش یابد و به درخواست های بعدی نیز کمک می‌کند. بنابراین با ارائه دهنده خدمات میزبان هاست خود تماس برقرار کنید و به آنها بگویید که بررسی کنند. بیشتر شرکت های میزبان هاست قابلیت مورد نظر را فعال می‌کنند زیرا فعال بودن چنین ویژگی بدیهی است، مگر دلایلی مالی و یا سیاست های خاصی را آن هاستینگ داشته باشد، با خواندن مقاله رفع مشکل Keep-Alive شما را در درک بهتر ادامه متن بسیار یاری خواهد کرد.

3. Enable gzip compression

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

   یاهو در این باره می‌گوید:

   Gzip محبوب ترین و کارآمدترین روش فشرده سازی بوده که در حال حاضر دردسترس است. از این رو نزدیک به 70 درصد میزان پاسخ گویی را کاهش می دهد. تقریبا 90 درصد ترافیک اینترنتی امروز از طریق مرورگرهایی که ادعا پشتیبانی از Gzip را دارند، ناشی می شود.

4. استفاده از یک CDN

   یک شبکه تحویل محتوا CDN یا همان Content Delivery Network مجموعه ای از سرورهای وب بوده که در میان مکان های مختلفی توزیع می شود تا مطالب به شکل موثرتری روی کاربران ارائه شود. سرور انتخاب شده برای ارائه محتوا به یک کاربر خاص معمولا براساس اندازه گیری نزدیکی شبکه صورت می گیرد. برای مثال سروری با کمترین میزان hops شبکه و یا سروری با سریعترین زمان پاسخ انتخاب می شود. ما در مقالهCDN چیست به نکات برتر و جالبی دربارهCDN اشاره کردیم، جمع بندی این نکات زمان زیادی را می‌گیرد، پس حتما خواندن آن را پیشنهاد میکنم. برای افزایش سرعت وردپرس خود می‌توانید از W3 Total Cache به کار گیرید، چرا که از تنظیمات مختلف CDN پشتیبانی می‌کند.

تاثیر منابع در سرعت سایت

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

1. کاهش تغییر مسیر (Minimize redirects)

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

2. حذف رشته علامت سوال از منابع استاتیک (Riove query strings from static resources)

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

3. مشخص کردن یک مجموعه کاراکتر (Specify a character set)

   یک کاراکتر در هدرهای HTTP مشخص کنید تا سرعت رندر مرورگر افزایش پیدا کند. اگر در بررسی سایت خود در ابزار GTmetrix با خطای Specify a character set روبه‌رو شدید، پست رفع خطای Specify a character set را بخوانید.

4. کدهای خود کم کنید ( Minify your codes)

   بهینه سازی نظرات ، بخش های CDATA ، فضاهای سفید، عناصر خالی و اندازه صفحه شما را کاهش خواهد داد. همچنین زمان تاخیر لود سایت را بهبود می‌بخشد و سرعت بارگذاری نیز کم می شود. شما می‌توانید از ابزارهای آنلاین برای فشرده سازی اسناد استفاده کنید و یا از پلاگین‌هایی که باعث بهینه سازی سایت شما می‌شود، ما در مقاله‌های رفع خطای Minify HTML ، رفع خطای Minify CSS و همینطور رفع خطای Minify JavaScript به شکل بسیار کاملی توضیحات لازمه را ارائه دادیم.

5. از درخواست های بد دوری کنید (Avoid bad requests)

   لینک های دارای مشکل به صفحه 404/410 ختم می شوند. این باعث می شود درخواست های نامناسب بی پاسخ بماند و باید URLهای معیوب را برطرف کنید چرا که زمان لود سایت را هم بالا می‌برد. از online broken link checker  یا پلاگین وردپرس WordPress link checker به شکل رایگان استفاده کنید. اگر نیاز به توضیحات جامع و کاملی داشتید مقاله رفع خطای Avoid bad requests را حتما مطالعه نمایید.

6. حفظ منابع از یک آدرس سازگار (Serve resources from a consistentURL)

   برای منابعی (همانند فایل‌های JS و یا CSS) که در چندین صفحه مورد استفاده قرار گرفته‌اند، مطمئن شوید که هر منبع به یک URL یکسان متکی است. اگر یک منبع با چند آدرس مختلف باز شود و محتوای یکسانی داشته باشد. این حالت ممکن است موجب افزایش هزینه DNS شوید که قطعا مطلوب نخواهد بود و برخلاف نظر مخاطب می‌باشد. از طرفی حجم، لود زمان و تعداد درخواست ها نیز بالا می‌رود. برای مثال اگر شما در دو آدرس mysite.example.com و yoursite.example.com یک فایل JS را درج کرده باشید و در صفحه اصلی از هر دو فایل js استفاده کنید مشکلاتی که ذکر کردیم رخ می‌دهد، به شکل خلاصه از فراخوانی محتواهای یکسان در آدرس های متفاوت جلوگیری کنید، خواندن مقاله رفع خطای Serve resources from a consistent URL حتما برای شما مفید خواهد بود.

7. کاهش جستجو دی ان اس (Reduce DNS lookups)

   جستجو DNS زمانی معنی پیدا می کند که می خواهید IP آدرس یک هاست را بدست آورید. مرورگر تا زمانی که جستجو کامل نشود نمی‌توان کاری انجام دهد. کاهش نام هاست های منحصربفرد ممکن است زمان پاسخ دهی را افزایش دهد. پیشنهاد میکنم حتما مقاله جذاب و کامل رفع خطای Reduce DNS lookups را مطالعه نمایید.

8. قرار دادن CSS در بالا و JS در پایین (Put CSS at the top and JS at the bottom)

   قرار دادن stylesheets در سند سر صفحه ممنوع بوده بنابراین مرورگر رندر را مسدود می سازد تا نیاز به عناصر redraw صفحه نباشد. در بیشتر موارد کاربران با یک صفحه سفید رو به رو می شوند تا زمانی که صفحه به طور کامل بارگذاری شود. این همچنین به شما کمک می کند که یک صفحه وب استاندارد مطابق با استاندارد W3 ایجاد کنید. به همین دلیل است که گفته می شود کد جاوا اسکریپت را در پایین صفحه قرار دهید. توضیحات بیشتر درباره این فاکتور بسیار تاثیرگذار را در مقاله حل Defer parsing of JavaScript بخوانید.

ما در سایت سئوراز بارها درباره بهینه سازی و سئو عکس ها صحبت کردیم و در اینجا به شکل خلاصه به این موارد می‌پردازیم.

تاثیر تصاویر و عکس ها در سرعت سایت

1. ابعاد تصویر را مشخص کنید (Specify image dimensions)

   مرورگر شما قبل از آن که صفحه ای را بارگذاری کند به رندر کردن تصاویر درون آن می‌پردازد. تعیین ابعاد تصویر کمک می‌کند تا سرعت بارگذاری را کاهش داد. اگر ابعاد مشخص نشده باشد پس از بارگیری تصاویر، مرورگر شما سرعت بارگذاری آن افزایش می‌یابد. برای انجام این کار در <img> مشخصات ارتفاع و عرض تصویر را مشخص کنید. در مقاله رفع ارور Specify image dimensions  به نکات جالبی اشاره کرده‌ایم.

2. بهینه سازی تصاویر (Optimize images)

   تصاویر اهمیت بسیاری در سایت داشته و باید به آن توجه داشت. اگر تصویری استفاده کنید که رنگ مطلوب یا کیفیت مناسبی ندارد قطعا مورد توجه کاربران و بازدیدکنندگان وب سایت قرار نمی‌گیرد. بنابراین هرگاه به تولید محتوایی در سایت خود می‌پردازید سعی کنید به موضوع انتخاب تصویر توجه بسیاری داشته باشید. سعی کنید تصاویری که در سایت خود ذخیره می کنید از نوع JPEG باشد زیرا این فرمت بسیار متداول بوده و به شکل بهینه شده ای است. شما با فشرد چند کلید CTRL+SHIFT+ALT+S یک تصویر را ذخیره کنید و آن را در فتوشاپ بهبهینه سازی بپردازید. در مقاله رفع ارور Optimize images به تشریح این موضوع و انواع راه‌حل‌ ها برای CMS های مختلف نظیر وردپرس و جوملا پرداخته‌ایم.

3. یکی کردن عکس‌های کوچک

   به این ترفند به زبان انگلیسی Combine images using CSS sprites گرفته می‌شود، ادغام تصاویر به روش CSSSprites که باعث می‌شود عکس های کوچک سایت که هر کدام آدرس جداگانه برای لود شدن دارند را در قالب یک عکس بزرگ‌تر در سایت فراخوانی کنیم، یعنی اگر ۱۰ عکس کوچک دارید، آن‌ها را ادغام نماییم و به یک عکس بزرگ‌تر تبدیل کنیم، این کار جدا از اینکه باعث کاهش کلی حجم سایت می‌شود، باعث کاهش تعداد درخواست‌ها هم نیز میگردد. در مقاله آموزش CSS sprites بیشتر به این موضوع پرداختیم و مثال جالبی از سایت دیجی کالا در این مقاله زده شده است و حتما مقاله را مطالعه نمایید.

منظور از مسدود سازی DOM چیست و تاثیر آن در سرعت سایت

هنگامی که صحبت از بهینه سازی سئو سایت و درک عملکرد وب می‌شود ، بسیار مهم است که رابطه بین HTML و نحوه تولید صفحه در مرورگر را بدانید تا متوجه شوید که بیشتر زمان لود وب سایت شما به عاملی به نام Render Blocking مربوط می‌شود.

در این مقاله به منظور از مسدود سازی DOM عمیقا می‌پردازیم و راه هایی را پیشنهاد می‌کنیم تا از روی دادن چنین اتفاقی جلوگیری کنید.

• 1 منظور از DOM چیست؟
  • 1.1 شرایط Laymen در DOM
• 2 منظور از مسدود سازی DOM چیست؟
  • 2.1 CSS
  • 2.2 جاوا اسکریپت
  • 2.3 فونت‌های وب
• 3 خلاصه

منظور از DOM چیست؟

کلمه DOM مخفف Document Object Model می‌باشد که به فارسی مدل شی‌گرای سند ترجمه می‌شود. DOM یک رابط برنامه نویسی مخصوص HTML و XML می‌باشد و یک نمایه ساختار یافته (نمودار درختی) را برای سند فراهم می‌کند، برای تعریف نحوه دسترسی و دستکاری آن‌ها نیز از زبان‌های اسکریپتی مانند JavaScript استفاده می‌شود.

نمودار درختی DOM ما دقیقا مانند دیگر نمودار درختی خانواده می‌باشد و اطلاعات متغیری در آن قرار می‌گیرد. برای مثال ما برای شما یک نمونه خیلی ساده از DOM را طراحی کرده‌ایم:

شرایط Laymen در DOM

برای ساده‌تر کردن شرایط بهتر است از ابزار Devtools Chrome استفاده کنید. (در مقاله تجزیه و تحلیل سرعت وبسایت به وسلیه کروم بیشتر درباره ابزار قدرتمند Devtools Chrome صحبت کردیم ) این ابزار بخشی مخصوص DOM HTML دارد که شما می‌توانید به راحتی به این بخش دسترسی داشته باشید. توجه داشته باشید که فایل HTML طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی)‌ شما به صورت پیش‌فرض از DOM تشکیل نشده است بلکه این مرورگر کاربر است DOM را پس از ادغام فایل HTML و منابع Javascript و CSS  ایجاد می‌کند. بنابراین شما می‌توانید محتوایی که در ابزار Devtools Chrome می‌بینید را نسخه تجزیه‌شده HTML خود بدانید.

منظور از مسدود سازی DOM چیست؟

اگر قصد بهینه سازی سرعت وب سایت خود، توسط وب سایت‌های آنالیز سرعت وب سایت دارید، می‌بایست به بخشمسدودسازی DOM توجه کنید زیرا بخشی بسیار مهم در کاهش لود سرعت وب سایت می‌باشد. این بخش‌ها در بیشتر اوقات در وب سایت‌ها در قسمت منابع render blocking قرار می‌گیرند. مانند HTML Render Blocking – CSS Render Blocking – JavaScript Render Blocking به این بخش مربوط می‌شوند.

یکی از بهترین راه‌های یافتن مسدودسازی DOM استفاده از بخش Devtools Chrome می باشد که در زیر راه استفاده از آن را به شما می‌آموزیم:

1 – راه‌اندازی ابزار توسعه‌دهنده در گوگل Chrome

• ویندوز : F12 – یا استفاده از Ctrl + Shift + I
• مکینتاش : Cmd + Opt + I

2 – به پنل Network بروید و صفحه را با Ctrl + R رفرش کنید.

3 – اکنون شما یک نمودار آبشاری از لود وب سایتتان را مشاهده می‌کنید. در حال حاضر ما می‌خواهیم به دوچیز بپردازیم یکی از آن‌ها سرعت لود محتوای DOM می‌باشد و که براساس میلی ثانیه می‌باشد و در نمودار قبل از رنگ آبی می‌باشند.

از آنجا که فایل‌های CSS و جاوا‌اسکریپت از دسته منابعی هستند که امکان render blocking در آن‌ها وجود دارد و بین یا قبل از رنگ آبی مخصوص DOM لود می‌شوند ، می‌توانیم فرض کنیم که آن‌ها باعث مسدود‌سازی DOM نیز می‌شوند.

توجه داشته باشید که تصاویر به عنوان Render Blocking شناخته نمی‌شوند بنابراین درصورتی که در بخش DOM نمایش داده شدند می‌توانید آن‌ها را نادیده بگیرید، اگرچه ما همچنان توصیه می‌کنیم که تصاویر خودتان را بهینه‌سازی کنید.

در نمونه زیر دو منبع Style.css و Jquery.min.js هردو DOM را مسدود می‌کنند.

نمونه دیگری که می‌توانید برای این کار استفاده کنید ،ابزار PageSpeed Insights گوگل می‌باشد. همانطور که در زیر مشاهده می‌کنید، همان دوفایلی که در بالا به آن‌ها اشاره کردیم در اینجا نیز مشکل render blocking دارند.

توصیه های ما را دنبال کنید تا مشکل مسدود‌ شدن DOM وب سایت خود توسط فایل‌های CSS و JavaScript را حل کنید و سرعتتان را افزایش دهید. شما می‌توانید کاری کنید تا DOM وب سایت شما به تدریج ایجاد شود.

این را در نظر بگیرید که اصلا نیازی به این نیست که حتما نمره ۱۰۰ از ۱۰۰ را در بررسی‌های PageSpeed Insights گوگل کسب کنید ، برای مثال برای فونت‌های گوگل شما راهی برای حل مشکل Render Blocking ندارید. بنابراین سعی کنید که منابعی که Render Block می‌شوند در وب سایت شما بیشتر از ۱۰ عدد نشوند و همیشه کمتر از ۱۰ عدد باشند. با این‌کار سرعت لود وب سایت شما بسیار افزایش پیدا می‌کند.

CSS

non-render blocking کردن CSS

اگر می‌خواهید که به صورت کامل فایل‌های CSS وب سایتتان را Non-Render Blocking کنید، تنها یک راه خوب دارید. آن هم inline کردن فایل‌های CSS می‌باشد. برای اینکار می‌بایست کد‌های CSS وب سایتتان را در تگ‌های <style> قبل از تگ </body> قرار دهید. با اینکار دیگر CSS های شما به صورت Render Blocking نمایش داده نمی‌شوند.

افزونه های inline کردن CSS به صورت خودکار

• Grunt: grunt-critical-css
• critical

شما همچنین می‌توانید فایل‌های CSS خود را از طریق فایل‌های JavaScript هم بارگیری کنید ولی این را درنظر بگیرید که اینکار پس از لود شدن تمامی فایل‌ها انجام می‌شود که برای بازدیدکنندگان اصلا ایده‌آل نیست.

همانطور که در زیر مشاهده می‌کنید مشکل CSS ها حل شد و سرعت لود DOM نیز به ۲۷۹ میلی ثانیه کاهش پیدا کرد.

همچنین در گوگل PageSpeed Insights نیز مشاهده می‌کنید که طراحی سایت امتیاز ۹۵ را از ۱۰۰ امتیاز گرفته است و ۲ امتیاز افزایش پیدا کرده است.

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

پیشنهاد ما برای CSS

برای مثال در یک صفحه فرود سعی می‌شود که حداکثر یک منبع Render Blocking وجود داشته باشد. با این‌حال در زیر ما به نکاتی اشاره می‌کنیم که می‌تواند باعث افزایش سرعت لود صفحات شما شود.

• فایل‌های CSS خود را به درستی معرفی کنید. به عنوان مثال مقاله Put CSS in the document head و Optimize the order of styles and scripts می‌تواند به شما در این مورد کمک کند.
• از بعضی از Media Queries برای لود فایل‌های CSS استفاده کنید. منظور از این Media همان ریسپانسیو بودن سایت است.
• تعداد منابع CSS خود را کاهش دهید، همه منابع CSS را به یک فایل CSS منتقل کنید ما در پست های آموزش GTmetrix به شکل جامع در این باره توضیح داده‌ایم.
• فایل‌های CSS خود را فشرده‌سازی کنید. (فضا‌های خالی، کارکتر‌های اضافه و کامنت‌ها را پاکسازی کنید، مقاله Minify CSS مقاله شود)
• از CSS کمتر استفاده کنید.

افزونه های فشرده سازی CSS به صورت خودکار

• Grunt: grunt-contrib-cssmin
• Gulp: gulp-minify-css

جاوا اسکریپت

non-render blocking کردن فایل‌های جاوا اسکریپت

برای از بین بردن کامل مشکل Render Blocking در فایل‌های جاوا‌اسکریپت به طور کلی چندین راه مختلف دارید:

1. فایل‌ها را با تگ <script> قبل </body> قرار دهید.
2. از ناهمگامی یا به تعویق انداختن برای از بین بردن render blocking استفاده کنید.
3. کاهش تعداد فایل‌های جاوا‌اسکریپت با یکتا کردن کد‌های جاوا در یک فایل.
4. فشرده‌سازی فایل‌های جاوااسکریپت
5. inline کردن کد‌های جاوااسکریپت در صورت کوتاه بودن آن‌ها

ناهمگام اجرا کردن فایل‌های جاوا اسکریپت (async JS)

ناهمگام سازی اجازه می‌دهد که فایل‌های جاوااسکریپت به صورت کامل در پس زمینه وب سایت لود‌ شوند. سپس بعد از اینکه به صورت کامل دانلود شد، Render Block می‌شود و اسکریپت اجرا می‌شود.

Render زمانی ادامه پیدا می‌کند که اسکریپت اجرا شود.

به تعویق انداختن لود فایل‌های جاوا اسکریپت (Defer JS)

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

بنابر‌این ممکن است بعضی از اسکریپت‌ها زود‌تر دانلود شوند ولی منتظر‌ می‌مانند که ابتدا اولیت بالا‌تر آن‌ها نیز دانلود شود و سپس بعد از اجرای آن اسکریپت ، لود می‌شوند.

ما در مقاله رفع خطای Defer parsing of JavaScript در این مورد به شکل کاملی توضیح داده‌ایم.

افزونه‌های فشرده سازی فایل‌های جاوا اسکریپت به صورت خودکار

• Grunt: grunt-contrib-uglify
• Gulp: gulp-uglify

همانطور که مشاهده می‌کنید با قرار دادن فایل‌های جاوااسکریپت به فایل HTML تنها فایل Render Block شده jquery.min.js می‌باشد و سرعت DOMContentLoaded نیز به ۱۴۴ میلی ثانیه کاهش یافته است.

با توجه به inline کردن کد‌های جاوااسکریپت مشاهده می‌کنید که امتیاز ۱۰۰ را از ۱۰۰ نمره Google PageSpeed insights دریافت کردیم. شما نیز می‌توانید با این‌ کار امتیاز خود را افزایش دهید.

فونت‌های وب

وب فونت‌ها نیز یک منبع با قابلیت Render Block می‌باشند زیرا توسط CSS ها لود می‌شوند ، شما برای حل این مشکل دو انتخاب دارید ، یا آن را رها کنید و بگذارید همان Render Block بماند یا بعدا دوباره از اول آن را بسازید. (که در آینده می‌بایست از FOUT استفاده کنید)

برای مثال در کروم (+36) ، اپرا (+23) و فایرفاکس ۳ ثانیه برای لود فونت‌ها زمان لازم داریم.

در زیر چند پیشنهاد برای حل مشکل لود فونت‌ها ارائه کرده ایم که امیدواریم برای شما مفید باشد.

• از یک لودر وب فونت استفاده کنید. (Font Loading API)
• با استفاده از inline کردن فونت‌ها را بهینه سازی کنید.
• از روش‌های ذخیره‌سازی مانند localStorage استفاده کنید.

همچنین شما با یک جستجوی ساده می‌توانید اطلاعات بیشتری در رابطه با بهینه سازی لود فونت‌ها در صفحات وب پیدا کنید.

خلاصه

امیدواریم که از این آموزش سئو که در جهت بهبود سرعت سایت بود، لذت برده باشید و برایتان مفید بوده باشد. در این مقاله متوجه شدید که مسدودسازی DOM ها ممکن است به علت Render Blocking منابع CSS ، جاوااسکریپت یا وب فونت‌ها باشد و چگونگی حل مشکل این منابع را نیز به شما آموختیم.

به یاد داشته باشید که همیشه بدست آوردن امتیاز ۱۰۰ از ۱۰۰ برای وب سایت ها لازم نیست و تنها اینکه شما حداقل مسدودسازی DOM و همچنین حداکثر سرعت را در وب سایتتان داشته باشید اهمیت دارد بنابراین به جای وقت گذاشتن بر روی امتیاز به فکر سرعت وب سایت خود باشید.

تاثیر SSL بر سئو و دلایل استفاده از پروتکل HTTPS

بعد از رونمایی از پروتکل بسیار قدرتمند و سریع HTTP/2 ، دیگر دیدن وب سایت هایی با پروتکل ناامن HTTP معنا ندارد و می بایست همه طراحی سیات (طراحی سایت شرکتی، طراحی سایت فروشگاهی، قیمت طراحی سایت) ها از پروتکل امن و معتبر HTTPS استفاده کنند. وب سایت‌هایی که از پروتکل امن HTTPSاستفاده می کنند به مراتب امن‌تر و همچنین از لحاظ سئو بهینه‌تر از وب سایت‌هایی هستند که از پروتکل HTTP استفاده می‌کنند. ما در قالب دو مقاله به تشریح موارد زیر می‌پردازیم:

بخش ۱ : تاثیر SSL درسئو و دلایل استفاده از آن (همین مقاله)
بخش ۲ : نحوه انتقال دامنه از http به https

در این مقاله به تعریف SSL چیست و دلایل استفاده از پروتکل https می پردازیم. برای استفاده از این پروتکل https شما بایدگواهینامه SSL را تهیه کرده باشید و آن را در دامنه خود نصب نمایید. هر چند تهیه SSL در ایران به دلایل تحریم‌ها از نظر مالی کمی برای سایت‌ها مشکل ساز است و از طرفی اینترنت کند هم می‌تواند بر این مشکل بیافزاید.

سرفصل‌های پست

• 1 گواهینامه SSL چیست
• 2 دلایل استفاده از SSL
  • 2.1 1 – عملکرد و HTTP/2
  • 2.2 2 – سئو و رتبه بندی
  • 2.3 3 – ارجاع بهتر داده‌ها
  • 2.4 4 – امنیت بیشتر
  • 2.5 5 – SSL و افزایش اعتماد و اعتبار
  • 2.6 6 – تجربه کاربری
• 3 معایب استفاده از SSL

گواهینامه SSL چیست

اکثر ماها در طول روز با سایت‌های مختلفی روبه‌رو می‌شویم و این ارتباط بین ما و سایت گاهی با انتقال داده‌ها صورت می‌گیرد، مثلاً برای وارد شدن به‌حساب کاربری خود یوزنیم و پسورد نیاز داریم، به‌عبارت‌دیگر اطلاعات شخصی خود به منظورهای مختلف در ساخت سایت های مختلف به اشتراک می‌گذاریم. برای افزایش امنیت و حفظ حریم خصوصی کاربران باید از این اطلاعات حفاظت کرد و انتقالی امن بین کاربر و سرور برای داده‌ها به وجود آورد. به همین منظور شما می‌توانید با نصب گواهینامه SSL در سایت خود از پروتکل HTTPS بهره ببرید.

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

درواقع پروتکلHTTPS ، یک روش رمزگذاری است که موجب ایجاد ارتباط امن و رمزگذاری شده بین مرورگر کاربران و سرور می‌باشد. و این عمل باعث سخت شدن کار برای هکرها در دخالت در اتصالات می‌باشد. البته توجه داشته باشید که خواندن اطلاعات رمزگذاری شده توسط هکر هرچند بسیار سخت می‌شود اما نمی‌توان گفت غیرممکن است چراکه امنیت هیچ‌گاه ۱۰۰ درصد نیست.

در ادامه به اهمیت SSL در سئو و مزایا و معایب آن می‌پردازیم.

دلایل استفاده از SSL

گوگل به تازگی شعاری جدید به نام HTTPS در همه جا را برای داشتن جهان وبی امن در پیش گرفته است و شدیدا نسبت به آن سخت گیر است. با اینکه امن بودن پروتکل HTTPS اصلی‌ترین دلیل استفاده از HTTPS می‌باشد ولی خوب است که دیگر دلایل مهاجرت و استفاده از HTTPS را نیز در نظر بگیریم.

1 – عملکرد و HTTP/2

شبکه‌های تحویل محتوا (CDN) و ارائه دهندگان میزبانی وب به تازگی شروع به استفاده از HTTP/2 کرده‌اند. در یک جلسه بررسی سرعت سایت ، موزیلا و شرکت Load Impact گزارش دادند که کاربران از این پس می‌توانند انتظار بهینه سازی بیشتری در وب سایت‌های خود داشته باشند، تا جایی که انتظار می‌رود HTTP/2 حدودا ۵۰ الی ۷۰ درصد سریع تر و بهینه تر از HTTP/1.1 باشد. برای استفاده از HTTP/2 باید مرورگر شما از آن پشتیبانی کند و همچنین HTTPS بر روی وب سایت شما فعال باشد.

تاثیر-SLL-بر-سئو-و-دلایل-استفاده-از-پروتکل-HTTPS

2 – سئو و رتبه بندی

در سال ۲۰۱۴ ، مت کاتز اعلام کرد که در حال حاضر استفاده از پروتکل HTTPS یک معیار سبک ولی تاثیر گذار در رتبه بندی وب سایت‌ها توسط گوگل به شمار می‌آید. (منبع) بنابراین با توجه به این، فعالسازی و نصب SSL و استفاده از پروتکلHTTPS در وب سایتتان باعث افزایش بهبود آن نیز می‌شود.

باتوجه به آخرین اطلاعات ارائه شده توسط BuiltWith، از ۱۰۰ هزار وب سایت پرطرفدار جهان در حال حاضر حدود ۶.۳ درصد آنها به صورت پیشفرض از HTTPS استفاده می‌کنند.

گوگل همچنین در رابطه با تاثیرگذاری HTTPS بر روی رتبه بندی وب سایت شما نیز مقاله‌ای با عنوان نگاهی به HTTPS از نظر یک فاکتور رتبه بندی وب سایت تهیه کرده است که پیشنهاد می‌کنم حتما آن را مطالعه کنید.

3 – ارجاع بهتر داده‌ها

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

برای مثال اجازه می‌دهد که شما از طریق HTTP وب سایت خود را داشته باشید ولی هنگامی که کاربران از طریق وب سایت‌هایی مثل Reddit یا YCombinator به وب سایتتان ارجاع داده می‌شوند به آنها اعلام می‌دارد که شما ویروسی شده‌اید.

هردو سایت بالا تحت پروتکل HTTPS می باشند که برای ارجاع لینک ها به وب سایتی دیگر باید حتما آن وب سایت تحت همین پروتکل باشد تا بدون مشکل ارجاع انجام شود و با پروتکل HTTP این کار امکان پذیر نیست.

اگر از پروتکل HTTPS در وب سایتتان فعال شود مشکلات ایجاد شده نیز برطرف می‌شود.

4 – امنیت بیشتر

دلیل چهارم و مهمترین دلیل استفاده از پروتکل https و نصب SSL امنیت بالا است. برای سایت‌های تجاری دلیل اینکه شما نیازمند گواهینامه SSL هستید ، حساسیت بالای تراکنش‌ها با کارت‌های اعتباریست. برای دیگر وب سایت‌ها نیز دلیل اصلی استفاده از گواهینامه SSL امن نگاه داشتن صفحه ورود به پنل شما می‌باشد.

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

5 – SSL و افزایش اعتماد و اعتبار

دلیل پنجم استفاده از SSL و تغییر http به https ایجاد اعتماد و اعتبار در بازدیدکنندگان می‌باشد. براساس نظرسنجی Global Sign ، بیشتر از ۷۵ درصد بازدیدکنندگان نگرانی بسیار زیادی برای اعتماد کردن به فروشگاه‌های اینترنتی هستند و همچنین نسبت به اعتبار وب سایت نیز نگران هستند که اطلاعات کاربری آنها به سرقت نرود. با اضافه کردن گواهینامه SSL به وب سایتتان و نمایان شدن رنگ سبز رنگ روی قفل وب سایت ، اعتبار وب سایت بسیار افزایش پیدا می‌کند. این بسیار مهم است که کاربران شما از امنیت وب سایت شما مطمئن شوند و به اینکه اطلاعاتشان در وب سایت شما محفوظ است ، اعتماد کنند همانند سایت سئوراز

6 – تجربه کاربری

در زمان نوشتن این مقاله اخرین نسخه کروم 64 می‌باشد و قرار است در نسخه های آتی یعنی نسخه 68 کروم، گوگل سایت‌هایی را که از پروتکل HTTPS استفاده نمی‌کنند را واضح‌تر مشخص کند تا کاربران بر این موضوع با آگاهی بیشتری وبگردی داشته باشند.

و این موضوع تاثیر بسیار زیادی بر روی تجربه کاربری دارد، چرا که کاربران اگر حس امنیت در سایتی را نداشته باشند نرخ دفع کاربری به شدت بالا می‌رود و می‌تواند روی فروش و رتبه سایت شما در گوگل اثرگذار باشد.

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

به شکل بسیار خلاصه اشاره کنم که:

• استفاده از SSL باعث کاهش سرعت سایت البته به شکل بسیار نامحسوس می‌شود، حدودا باید ۲۰۰ میلی‌ثانیه باعث کاهش سرعت می‌شود که البته این عیب در کنار مزایای SSL قابل نادیده گرفتن است.
• همینطور هزینه SSL مخصوصا در ایران به دلایل تحریم و دلار بسیار بالا است، البته به لطف Let’s Encrypt که بسیاری از هاستینگ ها آن را به شکل رایگان در اختیار کاربران قرار می‌دهند تا بتوانند SSL نصبتا مناسبی را برای سایت خود استفاده نمایید.
• نصب سخت SSL هم می‌تواند بر معایب این گواهینامه اضافه شود ولی شما می‌توانید با درخواست از متخصصین هاستینگ و همینطور پشتیبانی هاست خود این مشکل را رفع کنید و مزایای SSL بهره‌مند شوید.
• 
  

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