8 راه افزایش سرعت و کاهش زمان لود DNS Lookups

راه‌های مختلفی برای بهینه سازی وب سایت وردپرسی شما موجود است که ممکن است برخی از آن‌ها مهم‌تر از دیگر راه‌ها باشند. یکی از فاکتور‌های مهمی که اغلب نادیده گرفته می‌شود، کاهش زمان لود DNS Lookups (جستجوهای DNS) می‌باشد. همانند TTFB و لی‌تنسی (latency) که قبلا درباره آن‌ها صحبت بسیار کرده بودیم، زمان لود DNS Lookups نیز در دستیابی به اولین اطلاعات وب سایت بسیار موثر است. بنابراین امروز تصمیم گرفتیم که به نحوه کاهش زمان لود DNSLookups و افزایش سرعت آن‌ها بپردازیم و با هم به دلیل اهمیت بالای این فاکتور در سرعت وب سایت پی‌ببریم. توضیحات بیشتر درباره TTFB در مقاله بهبود زمان TTFB بخوانید.

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

• 1 منظور از DNS Lookups یا جستجو‌های DNS چیست
  • 1.1 جستجو DNS ها در Pingdom
  • 1.2 بررسی DNS ها در GTMetrix
  • 1.3 بررسی DNS ها در WebPagetest
• 2 چگونه زمان لود DNS Lookups را کاهش دهیم
  • 2.1 ترفند ۱ :‌ از یک ارائه دهنده DNS سریع استفاده کنید.
  • 2.2 ترفند ۲ : تغییر ورودی‌های TTL برای استفاده از کش DNS
  • 2.3 ترفند ۳ :‌تعداد دامنه‌ها را کم کنید (hostnames)
  • 2.4 ترفند ۴ : از سرویس‌های جایگزین با DNS پر سرعت استفاده کنید.
  • 2.5 ترفند ۵ :‌ انتقال و میزبانی منابع در CDN
  • 2.6 ترفند ۶ :‌ از Prefetching DNS استفاده کنید.
  • 2.7 ترفند ۷ : به تاخیر انداختن لود جاوا‌اسکریپت
  • 2.8 ترفند ۸ :‌ از رکورد‌های ANAME و CNAME های مسطح استفاده کنید.
• 3 خلاصه:

منظور از DNS Lookups یا جستجو‌های DNS چیست

برای فهمیدن اینکه منظور ما از DNS Lookups یا جستجو‌های DNS چیست، ابتدا باید با روش کار اصلی DNS آشنا شوید. به طور کلی DNS مخفف کلمه Domain Name Systi و به معنای سامانه نام دامنه می‌باشد که اساسا به ستون فقرات  اینترنت معروف است.دفترچه یادداشتی برای تمام جهان. تمامی طراحی سایت  (طراحی سایت شرکتی، طراحی سایت فروشگاهی، سئو سایت) ها و دامنه‌هایی که شما در اینترنت مشاهده می‌کنید به طور مشخصی به یک IP Address مرتبط می‌شوند.

برای مثال هنگامی که آدرس Google.com را در اینترنت وارد می‌کنید، کوئری‌های DNS توسط ISP شما برای دریافت اطلاعات مشخص مرتبط به نیم سرور‌ها درخواست می‌شوند. سپس جمع‌آوری اطلاعات دامنه توسط IP در پشت صحنه سرور انجام می‌شود که شما با توجه به اختصاصی بودن IP آدرس وب سایت گوگل شما می‌توانید با آی پی 216.58.217.206 نیز وارد این وب سایت شوید. ورود با ای پی آنقدری که به نظر می‌رسد هم سرگرم کننده نیست.

هنگامی که شما درخواست ورود به یک وب سایت را وارد می‌کنید اولین چیزی که ISP شما از سرور مقصد درخواست می‌کند درخواست ارائه اطلاعات DNS وب سایت می‌باشد. اما در نظر داشته باشید که نیازی نیست برای هر منبعی دوباره DNSجستجو شود. برای مثال به درخواست‌های HTTP زیر توجه کنید:

با توجه به اینکه ۸ درخواست HTTP در بالا وجود دارد، با این حال، با توجه به اینکه ۳ دامنه در درخواست‌ها وجود دارد، ۳ جستجو برای اطلاعات DNS لازم است.

اگر نیاز به توضیحات بیشتر و ساده‌تر درباره نحوه کار DNS Lookups دارید مقاله رفع خطای Reduce DNS lookups را مطالعه فرمایید.

جستجو DNS ها در Pingdom

در زیر به نحوه نمایش درخواست‌های بالا در ابزار تست سرعت در ساخت سایت  Pingdom می‌پردازیم. DNS در تحلیل آبشاری به رنگ صورتی می‌باشد و تحلیل سرعت آن به صورت میلی ثانیه است. وقتی برای اولین بار وب سایتتان را در Pingdom مورد ارزیابی قرار می‌دهید، این وب سایت به صورت کامل اطلاعات IP آدرس و دیگر کوئری‌های DNS شما را دریافت و بررسی می‌کند. توجه کنید که لازم نیست برای هر ارزیابی برای مثال دامنه cdn.wpdev.ink شروع به ارزیابی DNSها کنید. این دقیقا کاری است که DNS می‌کند، برای هر دامنه کافیست که تنها یک بار آن را لود کنید. در بالا ۸ درخواستHTTP موجود است که از بین این‌ها تنها ۳ درخواست DNS لازم است.

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

برای مثال در بررسی ۳ DNS بالا ، یکی از ۳ DNS برای بررسی ۳۰۰ میلی ثانیه زمان گرفته است که این زمان بدون در نظر گیری زمان لازم برای بررسی DNS دیگر دامین هاست. بنابر این تاثیر بررسی DNS را بر روی سرعت می‌‌توانید کاملا واضح مشاهده کنید.

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

بررسی DNS ها در GTMetrix

به طور کلی هر وب سایت بررسی سرعت نوع بررسی خاص خود را دارد ولی بیشتر آن‌ها سرعت بررسی DNS ها را به شما می‌گویند. در زیر نحوه نمایش زمان بارگیری اطلاعات DNS را در GTMetrix مشاهده می‌کنید. DNS ها به رنگ سبز و بر اساس میلی ثانیه مشخص شده اند.

بررسی DNS ها در WebPagetest

ابزار بررسی سرعت وب سایت WebPageTest نیز یک ابزار بسیار دقیق و کارآمد در حوزه بررسی DNSها و تجزیه و تحلیل نمودار آبشاری برای سایت می‌باشد که در صورت علاقه می‌توانید از این وب سایت نیز استفاده کنید و به علت تعداد سرور‌ها در سراسر جهان و همچنین آنالیز کلی تمامی اطلاعات وب سایت کاربر بسیار معروف شده است. اطلاعات مربوط به زمان لود DNS در این ابزار در ستون DNS Lookup و با واحد اندازه گیری میلی‌ثانیه قرار می‌گیرد. برای مثال ما یک وب سایت خبری را به صورت تصادفی انتخاب کردیم و پس از انجام عملیات بررسی توسط این ابزار زمان لود DNS به ۶.۵ ثانیه رسید!

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

چگونه زمان لود DNS Lookups را کاهش دهیم

در رابطه با نحوه کار DNS ها اطلاعات کاملی به دست آوردید. حال وقت آن است که به نحوه کاهش زمان لود و افزایش سرعت DNS Lookups بپردازیم، افزایش سرعت لود DNS Lookups اسم های مختلفی دارد همانند:

• Minimize DNS Lookups (به حداقل رساندن جستجوی DNS)
• Reduce DNS Lookups (کاهش جستجوی DNS)

ترفند ۱ :‌ از یک ارائه دهنده DNS سریع استفاده کنید.

یکی از نکات مهم در DNS ها این است که DNS ها نیز مانند هاست‌های میزبانی ارائه دهندگانی سریع و کند دارند. این اولین چیزی است که باید در وب سایتتان رعایت کنید.

به طور معمول DNS های ثبت شده توسط GoDaddy و NameCheap بسیار ضعیف عمل می‌کنند. ارائه دهندگان DNS نیز مانند CDN دارای POPs های مختلفی در جای جای جهان هستند. از بهترین و پر سرعت‌ترین ارائه دهندگان DNS می‌توانیم به amazon ، Cloudflare ، Dyn و DNS Made Easy اشاره کنیم. همه این‌ ارائه دهندگان دارای زیرساخت‌هایی وسیع برای سریع‌ترین بازده می‌باشند.

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

بعضی از ارائه دهندگان بالا در مناطقی سریع تر از دیگری هستند و این خیلی مهم است که شما چگونه به بارگیری DNS نگاه می‌کنید، جهانی یا محلی؟

وب سایت DNSPerf ابزاری خوب برای مقایسه انواع ارائه دهندگان DNS می‌باشد و به شما کمک می‌کند که بهترین ارائه دهنده را انتخاب کنید. آیا می‌دانستید که شما می‌توانید بدون استفاده از امکانات دیگر Cloudflare از بخش DNS آن استفاده کنید؟

ترفند ۲ : تغییر ورودی‌های TTL برای استفاده از کش DNS

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

شما می‌توانید ورودی‌های TTL وب سایت خود را برای بهبود کش DNS تغییر دهید. قابل توجه است که ISP ها به صورت خودکار DNS شما را کش می‌کنند ولی با تغییر ورودی‌های TTL می‌توانید به این کش کمک کنید.

• ۳۰۰ ثانیه = ۵ دقیقه
• ۱۸۰۰ ثانیه : ۳۰ دقیقه
• ۳۶۰۰ ثانیه :‌ ۱ ساعت
• ۴۳۲۰۰ ثانیه : ۱۲ ساعت
• ۸۶۴۰۰ ثانیه : ۲۴ ساعت

۳۰ دقیقه در هر ساعت برای TTL بیشتر از همه استفاده می‌شود. با این حال، بعضی از کاربران به علت بروزرسانی پی در پی وب سایتشان TTL کمتری استفاده می‌کنند. برای مثال Cloudflare به صورت پیش‌فرض TTL را بر روی ۵ دقیقه ذخیره کرده است. این خیلی خوب است که شما به رکورد‌های دیگر خود نیز توجه کنید و نسبت به استفاده وب سایت آن‌ها را تنظیم کنید. برای مثال :

• رکورد‌های A و AAAA : این رکورد‌ها اغلب درحال تغییر هستند و ۵ دقیقه برای کش آن‌ها کافی است.
• رکوردهای CNAME :‌در بیشتر اوقات این رکورد‌ها تغییر نمی‌کنند و به نظر من ۲۴ ساعت برای کش آن عالی است.
• رکورد‌های MX : کمتر پیش می‌آید که این رکورد‌ها را تغییر دهید و معمولا ۱۲ ساعت برای کش پیشنهاد می‌شود.
• رکورد‌های TXT :‌ کمتر پیش می‌آید که این رکورد‌ها را تغییر دهید و معمولا ۱۲ ساعت برای کش پیشنهاد می‌شود.

به طور کلی وقتی در رابطه با TTL صحبت می‌کنیم جواب درست یا غلطی وجود ندارد. اما شما با کمی تغییر در ورودی‌های TTL و آزمایش آن می‌توانید به کش DNS کمک کنید.

ترفند ۳ :‌تعداد دامنه‌ها را کم کنید (hostnames)

یکی از بهترین راه‌ها برای کم کردن زمان بررسی DNS ها کاهش تعداد درخواست‌ها به دامنه‌های مختلف است یعنی به طور کلی کاهش تعداد دامنه‌های متصل به وب سایت است. زمان بررسی DNS ها به تعداد درخواست‌ها آنقدری هم مهم نیست، مهم تعداد دامنه‌ها است که هرچقدر کمتر باشد زمان بررسی DNS ها نیز کاهش می‌یابد. وب سایت خود را با یک ابزار مانند Pingdom بررسی کنید و درخواست‌های مهم را مشخص کنید. با توجه به اینکه DNS ها بر اساس IP ها طراحی می‌شوند، شاید برای شما سوال شود که چرا مردم از دامنه‌ها در DNS خود استفاده می‌کنند؟! حتما توجه داشته باشید که DNS های شما بر روی یک دامنه ست شده باشند زیرا آی پی‌ها قابل تغییر هستند (مثلا با تغییر هاست) ولی دامنه‌ها تغییر نمی‌کنند و همیشه خواهند ماند و برای کش کردن فایل‌ها مناسب‌تر هستند.

ترفند ۴ : از سرویس‌های جایگزین با DNS پر سرعت استفاده کنید.

درحالی که کم کردن تعداد دامنه‌ها (hostnames) نسبت به این ترفند راحت‌تر است، با این حال، ما پیشنهاد می‌کنیم که ابتداDNS هایی که سرعت بررسی آن‌ها بیشتر از بقیه طول می‌کشد را بیابید. برای مثال در وب سایت زیر یکی از فایل‌های جاوا‌اسکریپت لود شده از Crazy Egg برای لود DNS ۲۵۵ میلی ثانیه زمان لازم دارد که از بقیه DNS ها بیشتر است. این به علت این است که این وب سایت از یک ارائه دهنده DNS خوب استفاده نمی‌کند.

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

ترفند ۵ :‌ انتقال و میزبانی منابع در CDN

یکی از راحت‌ترین راه‌های موجود برای افزایش سرعت وب سایت خود این است که تا‌ جای ممکن منابع خود را به ارائه دهندهCDN خود انتقال دهید. هنگامی که شما در Pingdom وب سایت خود را آزمایش می‌کنید میزان درخواست‌های وب سایت خود را بر اساس هر دامنه را مشاهده می‌کنید. همانطور که مشاهده می‌کنید در زیر ۹۳.۸ درصد درخواست‌های ما از CDN لود می‌شوند. یک درخواست از هاست خودمان و یک درخواست نیز از گوگل آنالیز می‌باشد. با انتقال منابع به CDN زمان بررسیDNS ها را به تنها یک DNS ارائه دهنده CDN محدود می‌کنید و سرعت آن را افزایش می‌دهید. در مقاله دلایل استفاده از CDN ما به شکل کامل توضیحات لازم را ارائه داده‌ایم.

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

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

در زیر به نکته‌هایی اشاره کرده‌ایم که می‌تواند به شما در این مورد کمک کند.

فونت Awesome :

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

یک راه دیگر استفاده از cdnjs ویا bootstrapcdn می باشد تا فایل‌های فونت را از طریق CDN عمومی لود کنید

با توجه به اینکه با اضافه کردن لینک از طریق CDN های بالا یک رکورد به DNS های شما اضافه می‌شود پیشنهاد می‌شود کهCDN مخصوص خود را استفاده کنید. (cdnjs از سرور‌های Cloudflare و Bootstrap CDN از سرور‌های MAXCDN استفاده می‌کند)

Gravatars :

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

فونت‌های گوگل :

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

فونت Awesome ، فونت‌های گوگل و gravatars تنها نمونه‌هایی از روش‌های کاهش زمان لود DNS ها بودند. آیا شما سعی کردید که بیشتر منابع خود را از طریق CDN ها لود کنید؟

ترفند ۶ :‌ از Prefetching DNS استفاده کنید.

یکی دیگر از راه‌های کاهش زمان لود DNS،‌ استفاده از DNS Prefetching می‌باشد. این امکان به شما کمک می‌کند تا DNS‌ ها را در پس‌زمینه وب سایت خود لود کنید. این کار با اضافه کردن چند خط کد به وب سایتتان امکان پذیر است.به کد‌های زیر توجه کنید :

فقط توجه کنید که DNS prefetch در بعضی از مرورگر‌ها مانند Opera Mini پشتیبانی نمی‌شود ولی نگران نباشید، این پشتیبانی نشدن در عملکرد وب سایت شما تاثیری نمی‌گذارد ولی برای کاربرانی که از آن مرورگر استفاده می‌کنند DNS ها دیرتر لود می‌شوند.

یا اگر از نسخه وردپرس بالای ۴.۶ استفاده می‌کنید، می‌توانید از ترفند‌های منابع منتشر شده کمک بگیرید. توسعه دهندگان با استفاده از متد wp_resource_hints می‌توانند با اضافه کردن دامنه‌ها و لینک‌های جدید، dns-prefetch، preconnect، prefetch و یا prerender را در پس‌زمینه وردپرس لود کنند.

ترفند ۷ : به تاخیر انداختن لود جاوا‌اسکریپت

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

در وردپرس افزونه‌هایی مانند Async JavaScript وجود دارند که باعث به تاخیر انداختن لود جاوا‌اسکریپت می‌شوند. با این‌حال بعضی از اسکریپت‌ها در لود وب سایت اهمیت دارند و باید شما قبل از فعال‌سازی تاخیر در لود آن‌ها را پیدا کرده و در لیست پرش یا استثنا قرار دهید.

افزونه Async Javascript با افزونه Autoptimize نیز به صورت کامل هم‌خوانی دارد و قابل ادغام است و یکی از بهترین پیشنهاد‌ها برای به تاخیر انداختن لود جاوا‌اسکریپت می‌باشد.

البته این بحث به تاخیر انداختن لود جاوا اسکریپت به خطای asynchronous resources در GTmetrix هم برمیگردد که می‌تواند در آنجا به شکل کامل مطالعه نمایید.

ترفند ۸ :‌ از رکورد‌های ANAME و CNAME های مسطح استفاده کنید.

در بعضی از ارائه دهندگان DNS رکورد‌های اضافه‌ای وجود دارد که می‌تواند سرعت لود DNS را افزایش دهد.

استفاده از رکورد‌های ANAME در ارائه دهنده DNS Made Easy :

رکورد‌های ANAME به شما عملکرد کلی رکورد‌های CNAME را در سطح ROOT نمایش می‌دهند. برای مثال در نظر بگیرید که شما CNAME دامنه خود را به صورت www.domain.com پیکربندی کرده‌اید. ابتدا www. باید نام هاست نیم را پیدا کند و سپس به IP متصل شود. پس این‌کار ۲ مرحله ایست. در ANAME مرحله اولیه CNAME حذف شده است و مستقیم به IPمتصل می‌شود که این باعث افزایش سرعت می‌شود. دقیقا مانند نمونه زیر :

CNAME :

ANAME :

مسطح سازی CNAME با Cloudflare :

به طور مشابه Cloudflare هم نوعی سرویس به نام CNAME مسطح دارد که دقیقا همان کار ANAME را انجام می‌دهد و داده‌ها را در سطح zone apex  نمایش می‌دهد.

خلاصه:

به طور کلی، DNS Lookups یکی از فاکتور‌هایی است که در بیشتر وب سایت‌ها نادیده گرفته می‌شود ولی با اندکی توجه مدیر وب سایت می‌تواند به لود وب سایت خود کمک کند. فقط کافیست که بدانید DNS چطور کار می‌کند، ارائه دهندگان کند و سریعی برای DNS وجود دارد و یاد بگیرید که چگونه مشکلات بررسی DNS را حل کنید.

TTFB چیست و تاثیر آن در سرعت سایت

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

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

• 1 TTFB چیست
  • 1.1 درخواست به سرور
  • 1.2 پردازش سرور
  • 1.3 پاسخ به کاربر
• 2  آیا TTFB مهم است؟
• 3 چگونه TTFB را بسنجیم
  • 3.1 اندازه گیری TTFB با DevTools گوگل کروم
  • 3.2 اندازه گیری TTFB با WebPageTest
  • 3.3 اندازه گیری TTFB با Pingdom
  • 3.4 اندازه گیری TTFB با GTmetrix
  • 3.5 اندازه گیری TTFB با performance.sucuri
• 4 4 روش برای کاهش TTFB در سایت
  • 4.1 استفاده از یک هاست پرسرعت با کانفیگ بهینه
  • 4.2 استفاده از CDN مناسب
  • 4.3 استفاده از کش مناسب در سایت
  • 4.4 استفاده از یک DNS Provider معتبر (رایگان نباشد)

TTFB چیست

TTFB مخفف time to first byte است. به بیان ساده، اندازه گیری مدت زمانی است که مرورگر باید قبل از دریافت اولین بایت داده از سرور منتظر بماند. هرچه این مدت زمان دریافت داده بیشتر باشد، مدت زمان بیشتری طول می‌کشد تا صفحه برای بازدیدکننده نمایش داده شود. یکی از تصورات رایج غلط این است که TTFB پس از جستجوی DNS محاسبه می‌شود، با این حال، محاسبه TTFB در شبکه همیشه شامل network latency می‌باشد. 3 مرحله  Process و Delay و Latency ممکن است در هرجایی در این بین رخ دهند و به مجموع کلی TTFB شما اضافه کنند.

1. درخواست به سرور

   هنگامی که کسی از وبسایت شما بازدید می‌کند، اولین چیزی که اتفاق می‌افتد، ارسال درخواست HTTP از کاربر به سرور است. در این مرحله، عوامل گوناگونی وجود دارند که در delay تاثیر دارند. زمان کند DNS lookup می‌تواند باعث افزایش زمان درخواست شود. اگر سرور از نظر جغرافیایی دور باشد، فاصله ای که داده باید بپیماید در latency موثر است. همچنین، اگر قوانین firewall پیچیده ای دارید، ممکن است زمان routing را افزایش دهد. و علاوه بر این موارد، سرعت اینترنت کاربر را فراموش نکنید.

2. پردازش سرور

   پس از اینکه درخواست ارسال شد، سرور باید آن را پردازش کند و پاسخی تولید کند. این امر می‌تواند تعداد گوناگونی delay مانند فراخوانی آهسته پایگاه داده، اسکریپت های واسطه بیش از حد، ذخیره(cache) نشدن اولین پاسخ، کد یا قالبی که به طور مناسبی بهینه سازی نشده و منابع ناکافی سرور مانند disk I/O یا حافظه ایجاد کند.

3. پاسخ به کاربر

   بعد از اینکه درخواست توسط سرور پردازش شد، باید آن را به کاربر ارسال کند. این مرحله هم از سرعت شبکه سرور و هم از سرعت اینترنت کاربر تاثیر می‌گیرد. اگر سرعت اینترنت کاربر پایین باشد، بر TTFB تاثیر می‌گذارد.

 آیا TTFB مهم است؟

بسیار مهم است که بدانید TTFB و سرعت وبسایت یکسان نیستند. بحث‌های زیادی در حوزه وب وجود دارند که آیا TTFB مهم است یا نه. بعضی می‌گویند TTFB بی معنی است و بعضی دیگر می‌گویند اهمیت دارد. هر دو گروه دلایلی برای گفته خود می‌آورند و سوالاتی درباره نحوه محاسبه آن می‌پرسند.

حتی وبسایت Moz  مطالعه گسترده ای درباره ارتباط بین رتبه بندی جستجو و TTFB انجام داد. با این حال، دانستن علت این موضوع یا اینکه ساخت سایت های با TTFB پایین تر سریعتر هستند، می تواند به نوبه خود توسط عوامل رتبه بندی صفحات گوگل تحت تاثیر قرار گیرد.

اما به جای صرف زمان روی اهمیت داشتن یا نداشتن آن در سئو، می‌توانید برای بهبود این معیار مهم تمرکز کنید. هرکاری که انجام می‌دهید می‌تواند بر سرعت کلی سایت شما از هر نوع CMS که باشید (وردپرس، جوملا و …) شما تاثیر داشته باشد و این موضوع بر TTFB شما هم شاید تاثیر بگذارد. در آزمایش های انجام شده با TTFB زیاد، سرعت  بارگذاری بسیار آهسته بود.

در کل، اگر سرعت بارگذاری زیر 100 میلی ثانیه باشد TTFB مناسب است. Google PageSpeed Insights برای هر پاسخی زمان کمتر از 200 میلی ثانیه را توصیه می‌کند. اگر در بازه 300 تا 500 میلی ثانیه هستید، تقریبا استاندارد است. و اگر بیش از 600 میلی ثانیه باشید، ممکن است در پیکر بندی سرور مشکلی وجود داشته باشد یا زمان آن فرا رسیده که به نرم افزار وب بهتری ارتقا پیدا کنید. یا اینکه می‌توانید دستور العمل های گفته شده در ادامه را دنبال کنید تا TTFB را کاهش دهید و به یاد داشته باشید که SSL/TLS نیز می‌تواند یکی از عوامل کندی هم باشد.

چگونه TTFB را بسنجیم

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

اندازه گیری TTFB با DevTools گوگل کروم

می توان TTFB را در گوگل کروم با استفاده از DevTools اندازه گیری کرد. به یاد داشته باشید، اگر در اندازه گیری TTFB از کامپیوتر خود استفاده می‌کنید، TTFB تحت تاثیر latency شبکه و ارتباط اینترنت قرار می‌گیرد. پس بهتر است از ابزارهای واسطه استفاده کنید تا آزمایش را از data center انجام دهد.

• در قسمت منوی کروم More Tools را انتخاب کنید و پس از آن Developer Tools را از فهرست کروم انتخاب کنید.
• روی عنصری از صفحه کلیک راست کنید و inspect را انتخاب کنید.
• از کلید های میانبر Ctrl+Shift+l(ویندوز) یا Cmd+Opt+l(مک) استفاده کنید

می توانید پنجره network را انتخاب کنید و عملکرد سئو سایت خود را ببینید.

اندازه گیری TTFB با WebPageTest

همچنین می توانید TTFB را با WebPageTest بسنجید. Great time زمان مورد نیاز برای DNS، socket و SSLnegotiations + 100 میلی ثانیه می باشد. به ازای هر 100 میلی ثانیه یک حرف A کسر می شود. همانطور که در آزمایش زیر می توانید ببینید، TTFB این سایت در 0.256 ثانیه یا 256 میلی ثانیه محاسبه شده است.

اندازه گیری TTFB با Pingdom

کروم و WebPageTest به عنوان TTFB به Pingdom رجوع می کنند. با این حال، اگر شما از Pingdom استفاده می کنید، در واقع به عنوان زمان Wait به TTFB مراجعه می کند. می توانید از راهنما استفاده از Pingdom برای آشنایی بیشتر استفاده کنید.

اندازه گیری TTFB با GTmetrix

یکی از ابزارهای معروف برای مدیران ایرانی که بیشترین استفاده را از آن می‌کنند، سایت Gtmetrix هم می‌تواند ابزاری بسیار مناسب جهت محاسبه TTFB سایت شما باشد، شما می‌توانید با استفاده از لوکیشن های مختلف سایت خود را بررسی نمایید.

اندازه گیری TTFB با performance.sucuri

تفاوت اصلی ابزار performance.sucuri با سایر ابزارها این است به یک تست می‌تواند از ۱۰ ها مکان مختلف در سراسر دنیا سایت شما را تست نمایید و زمان TTFB هر مکان با میانگین کلی را ارائه دهد، یکی از ضعف‌های این ابزار کش کردن و یا بهتر است بگیم توان مدیریت برای تست دوباره وجود نداره و اگر همان سایت رو تست دوباره بگیریم نتایج قبلی رو نشون میده.

همچنین ابزار های مختلف دیگری نیز برای اندازه گیری TTFB وجود دارند، مانند tools.keycdn.com و ByteCheck. حتی Google Analytics نیز بخشی برای مشاهده میانگین response time دارد.

4 روش برای کاهش TTFB در سایت

حال به ارائه راهکارهایی برای کاهش TTFB در وبسایت می‌پردازیم.

1. استفاده از یک هاست پرسرعت با کانفیگ بهینه

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

2. استفاده از CDN مناسب

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

3. استفاده از کش مناسب در سایت

   راه سوم و شاید راحت ترین راه کاهش TTFB استفاده از caching در وبسایت وردپرسی است. افراد زیادی فکر می کنند که تنها استفاده از caching می تواند باعث کاهش زمان بارگذاری صفحه شود، اما در حقیقت در کاهش TTFB نیز موثر است و همچنین زمان پردازش سرور را نیز کاهش می دهد. برای اطلاعات بیشتر به مقاله نحوه کش کردن سایتمراجعه نمایید.

4. استفاده از یک DNS Provider معتبر (رایگان نباشد)

   DNS نیز در TTFB موثر است. محاسبه دقیق مقدار این تاثیر بسیار سخت است، اما همچنان می‌توانید زمان کلی DNSlookup را مشاهده کنید. Provider های سریع و آهسته ای وجود دارند. با استفاده از ابزار SolveDNS speed testمی‌توانید از مکان‌های مختلف آزمایش لازم را انجام دهید. برای کاهش زمان لود DNS می‌توانید پست ۸ راه کاهش DNS Lookups و رفع خطای Reduce DNS lookups در GTmetrix مطالعه نمایید.

در پایان

موارد متعددی وجود دارند که می توانید بهینه سازی یا تعمیر کنید تا TTFB را کاهش دهید، مانند database caching، Disk IO، Swap usage، RAM، تنظیمات PHP، تنظیمات MySQL، تنظیمات شبکه، TLS overhead و غیره. اما پیاده سازی و اجرای موارد گفته شده در بالا آسانتر هستند و عملکردتان را سرعت می بخشند. پس دفعه بعدی که شخصی از شما پرسید که چطور TTFB را کاهش دهیم، به یاد داشته باشید که هاست سریع وردپرس، CDN، Caching و DNS مواردی هستند که در این زمینه از اهمیت زیادی برخوردارند. رفع و بهبود این موارد راه حل مشکل TTFB است.

پروژه AMP چیست و نحوه فعالسازی آن در وردپرس

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

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

• 1 AMP چیست
  • 1.1 مزایای گوگل AMP
  • 1.2 معایب گوگل AMP
• 2 تاثیر AMP در رتبه سئو سایت گوگل
• 3 نحوه فعالسازی AMP در وردپرس
  • 3.1 افزونه‌های مخصوص گوگل AMP برای وردپرس :
• 4 آموزش تنظیمات افزونه AMP For WP
  • 4.1 بخش General
  • 4.2 بخش Page Builder
  • 4.3 بخش Design
  • 4.4 بخش Single
  • 4.5 بخش Advertisient
  • 4.6 بخش AMP Menu
  • 4.7 بخش Social
  • 4.8 بخش SEO
  • 4.9 بخش Contact Form
  • 4.10 بخش Notifications
  • 4.11 بخش Comments
  • 4.12 بخش Advanced Settings
  • 4.13 بخش Extensions
• 5 افزونه AMP مخصوص ووکامرس
• 6 سئو گوگل AMP
• 7 نحوه پیدا کردن و رفع ارور AMP
  • 7.1 خطای Not a valid AMP page در AMP
  • 7.2 مانیتورینگ گوگل AMP با New Relic
  • 7.3 فعالسازی AMP برای فایل‌های خارجی با کلودفلر
• 8 در پایان

AMP چیست؟

AMP چیست سوالی هست که این روزها دوستان می‌پرسند، AMP مخفف عبارت Accelerated Mobile Pages یعنی لود سریع صفحات در تلفن همراه است گوگل پروژه AMP را در اکتبر سال ۲۰۱۵ رونمایی شد. پروژه متکی بر HTML AMP می‌باشد که یک چارچوب باز جدید بر‌مبنای فناوری‌های موجود در وب می‌باشد که حجم وب سایت‌ها هنگام لود شدن در توسط تلفن‌های هوشمند کاهش یابد. به طور خیلی خلاصه، باعث کاهش حجم صفحات طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) شما در تلفن‌های همراه می‌شود.

David Besbris رهبر پروژه AMP گوگل می‌گوید:

From day one, a key focus for AMP has been speed.  It is arguably one of the most frustrating things about the mobile web — borne out by recent Google research that shows that 53% of people will leave a site that fails to load in three seconds or less. That’s the worst of all worlds for users, businesses, publishers, websites and the mobile web as a whole. — David Besbris, AMP project lead at Google

از روز اول، هدف ما از توسعه AMP افزایش سرعت سایت بوده است. مسلما یکی از بدترین چیز‌ها در موبایل سرعت پایین وب سایت ها می‌باشد – با توجه به تحقیق گوگل ۵۷ درصد کاربران اگر وب سایتی زیر ۳ ثانیه لود نشود، آن وب سایت را ترک می‌کنند. سرعت پایین در وب سایت‌ها هنگام لود در تلفن‌های هوشمند مشکلی جهانی برای تمامی کاربران، کسب و کار‌ها، ناشران و وب سایت‌ها درست کرده است.

با توجه به آخرین بررسی Akamai، مشخص می‌شود که هر دهم ثانیه هم مهم است. برای مثال اگر یک دهم ثانیه وب سایتی دیرتر لود شود برای مثال از ۲.۷ ثانیه به ۲.۸ ثانیه برسد، باعث می‌شود که نرخ تبدیل وب سایت ۲.۴ درصد کاهش یابد. (در وب سایت‌های بزرگ این رقم فاجعه است)

پروژه-AMP

بسیاری از شرکت‌های بزرگ درطول این چند وقت از پروژه AMP گوگل حمایت کردند. از این شرکت‌ها می‌توانیم به اتوماتیک (توسعه دهنده وردپرس)، Reddit ، eBay ، Pinterest ، Washington Post ، Wired ، Gizmodo و غیره اشاره کرد. با توجه به گفته گوگل، فعالسازی این متد در ساخت سایت باعث می‌شود که ۴۴ درصد بازدید‌کنندگان منحصر به فرد ماهیانه و ۷۱ درصد بازدید‌های بازدیدکنندگان منحصر به فرد ماهیانه وب سایت شما افزایش یابد.

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

نشانه‌گذاری‌های ساختاری گوگل در نتایج جستجو باعث می‌شود که وب سایت شما برجسته تر نمایش یابد. برای مثال اسلاید‌های مقالات در نتایج جستجو بسیار زیبایی بخش می‌باشد.

پروژه-AMP

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

پروژه-AMP

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

مزایای گوگل AMP

• پروژه AMP گوگل کاملا رایگان و متن باز است.
• پروژه AMP گوگل می‌تواند سرعت لود وب سایت شما در تلفن‌های همراه را افزایش دهد و توجه داشته باشید که سرعت لود یکی از فاکتور‌های رتبه بندی وب سایت می‌باشد. توضیحات بیشتر درباره این موضوع را می‌توانید در مقاله gtmetrix چیست بخوانید.
• قرار گیری بهتر در SERP ها (نتایج صفحات موتور‌های جستجو ، Search engine results page) با فعال‌سازی اسلاید مقالات برای افزایش نرخ کلیک. پس از فعال سازی AMP در یکی از وب سایت‌های معروف ، AMP باعث افزایش۲۰۰ درصدی نرخ کلیک یک وب سایت شده است که نتیجه این رشد باعث افزایش بازدید سایت هم نیز می‌شود.
• پروژه AMP گوگل به عملکرد وب سایت بسیار کمک می‌کند، برای مثال نیازی به لود شدن فریم‌ورک‌های حجیم CSS وJS ندارد.
• می‌تواند باعث افزایش نرخ تبدیل وب سایت شما شود.
• با‌ توجه به پیشرفت هر روزه AMP ، به تازگی امکان اضافه کردن تبلیغات نیز به آن اضافه شده است که با‌توجه به آن می‌توانید از طریق Adsense برای خود در‌آمد داشته باشید.
• به صورت خودکار تصاویر را فشرده سازی می‌کند. (تصاویر برای نمایش به فرمت WebP تبدیل می‌شوند)
• AMP Lite باعث افزایش سرعت در اتصالات ضعیف می‌شود. گوگل می‌گوید که این تکنیک تا ۴۵ درصد وب سایت را نسبت به قبل فشرده تر می‌کند.

معایب گوگل AMP

• به طور کلی گوگل AMP از فاکتور‌های رتبه بندی وب سایت نیست ولی ممکن است که در آینده جزو این فاکتور‌ها باشد. با توجه به این موضوع از نظر تاثیر گذاری روی رتبه وب سایت هم جز‌و مزایا و هم جزو معایب به حساب می‌آید.
• اگر شما یک توسعه دهنده وب نباشید فعالسازی AMP در وب سایتتان کمی سخت است ولی خوشبختانه با تشکر از وردپرس این کار کمی آسان تر شده است و آن‌هایی که توسعه دهنده وب نیستند نیز با فعالسازی افزونه‌ها می‌توانند از امکانات AMP استفاده کنند. در ادامه به نحوه فعالسازی AMP در وردپرس نیز می‌پردازیم.
• ممکن است که به نرخ تبدیل شما آسیب بزند یا نتیجه‌ای منفی برایتان به وجود آورد.
• ممکن است که شما را نگران کند که پس از بهینه سازی چه بر سر وب سایتتان می‌آید؟
• گزارشات مشکلات برای مثال صفحات ۴۰۴ در گوگل آنالیز نیز ثبت می‌شود.
• بعضی‌ها در میزان مشارکت و میزان نرخ دفع کاربری (Bounce rate) دچار مشکل شدند.
• از اسکریپت‌های ثالث و برنامه‌هایی استفاده می‌کنند که شاید هنوز توسط بعضی از مرورگر‌ها پشتیبانی نشوند.
• در بعضی از مرورگر‌های قدیمی مانند Internet Explorer 11 پشتیبانی نمی‌شود. گوگل گفته است که در ۲ ورژن آخر بیشتر مرورگر‌های معروف مانند گوگل کروم، مازیلا فایرفاکس، اوپرا، اج و سافاری AMP پشتیبانی می‌شود.

تاثیر AMP در رتبه سایت گوگل

در فوریه ۲۰۱۷ ، گوگل پروژه AMP شروع به انتشار لینک مستقیم ناشران کرد که تا قبل از آن صفحات به صورت کش شده در گوگل بارگیری می‌شدند که برای سئو وب سایت کارآمد ولی برای رتبه بندی در وب سایت‌های رتبه‌بندی مانند Alexa مضر بود. همچنین برای شرکت‌ها برندینگ را با مشکل مواجه می‌کرد. خوشبختانه گوگل این را درک کرده و راه حلی برای آن ایجاد کرده است. در حال حاضر، وب سایت‌هایی که از AMP استفاده می‌کنند هنوز هم از لینک‌های گوگل برای نمایش محتویات وب سایت استفاده می‌کنند ولی در بالای صفحه AMP یک قسمت برای لینک وب سایت وجود دارد که هم به رتبه بندی کمک می‌کند و هم با کلیک بر روی آن وب سایت لود می‌شود. با‌ این حال، این کار گوگل روش عالی‌ برای افزایش رتبه وب سایتنیست ولی از هیچی بهتر است.

پروژه-AMP

این هم یک نمونه از مشکلاتی که AMP در برندینگ ایجاد می‌کند.

پروژه-AMP

حتی اگر وب سایت شما از نسخه موبایل هم پشتیبانی نکند و تنها AMP را برای تلفن همراه پشتیبانی کند نیز گوگل لینک صفحه مخصوص دسکتاپ را نمایش می‌دهد و به صورت مستقیم لینک می‌کند. حتی اگر در جستجو‌های گوگل اولین وب سایت باشید.

پروژه-AMP

نحوه فعالسازی AMP در وردپرس

خوشبختانه، در حال حاضر فعالسازی AMP در وردپرس خیلی راحت تر از ۶ ماه گذشته است. پیشرفت‌های بسیار‌ زیادی در وردپرس ایجاد شده است و پلتفرم AMP به طور کامل تغییر کرده است. با این حال، برای نمایش وب سایتتان به عنوان یک وب سایت پشتیبانی کننده از AMP کد‌هایتان باید توسط گوگل تایید شود. یک افزونه پست‌های شما را به AMP تبدیل می‌کند ولی این گوگل است که تصمیم می‌گیرد که مقالات شما را به صورت AMP نشان دهد یا خیر.

به شکل خیلی ساده برای تبدیل یک مقاله به AMP وردپرس یک ساختار AMP به مقالات شما اضافه می‌کند و برای دستیابی به این ساختار باید از /amp یا /?amp استفاده کنید. به عنوان مثال :

مقاله اصلی : https://domain.com/blog-post

مقاله AMP گوگل :  https://domain.com/blog-post/amp

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

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

پروژه-AMP

در‌حال حاضر که این مقاله را درحال نوشتن هستم این افزونه بیشتر از ۲۰۰ هزار نصب فعال می‌باشد و امتیاز ۳.۵ از ۵ را دریافت کرده است. شما می‌توانید این افزونه را از مخزن وردپرس و همچنین بخش افزودن افزونه در پیشخوان وردپرس دانلود و فعالسازی کنید. شما می‌توانید با این اپلیکیشن صفحه AMP خود را شخصی‌سازی کنید ولی این را بدانید که این شخصی‌سازی‌ها محدود است و شما برای اضافه کردن تبلیغات و دیگر امکانات باید اطلاعات کافی در رابطه با کد‌نویسی داشته باشید.

پروژه-AMP

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

اگر شما تصمیم دارید که امکانات اضافی را به صفحه AMP وب سایت خود اضافه کنید، اینجاست که افزونه رایگان AMP For WP پا به میدان رقابت می‌گذارد. این افزونه اساسا پیشرفته‌تر از افزونه AMP است و امکانات بیشتر را پشتیبانی می‌کند. این افزونه توسط دو توسعه دهنده هندی وردپرس احمد کالودی و محمد کالودی ساخته شده است.

amp

الان که در حال نوشتن این مقاله هستم، این افزونه بیشتر از ۸۰ هزار بار نصب شده و امتیاز ۴.۶ را از ۵ دریافت کرده است. شما می‌توانید این افزونه را از مخزن وردپرس و همچنین بخش افزودن افزونه در پیشخوان وردپرس دانلود و فعالسازی کنید. این افزونه به شما اجازه می‌دهد تا بسیاری از اطلاعات درون صفحه AMP وب سایت خود را شخصی‌سازی کنید. در زیر ما به نحوه شخصی سازی AMP می‌پردازیم. توجه داشته باشید افزونه AMP for WP با پیش‌‌نیاز نصب بودن افزونه AMP که در بالا معرفی کردیم کار می‌کند.

amp

آموزش تنظیمات افزونه AMP For WP

بخش General

در صفحه General شما می‌توانید لوگو خود را اضافه کنید، سایز لوگو را تغییر دهید و AMP را برای صفحات نیز فعال کنید. بسته به نوع وب سایت و مصرف ترافیک شاید شما بخواهید فقط AMP بر روی وبلاگ شما فعال باشد (مقالات).

amp

Homepage

در بخش Homepage شما می‌توانید AMP را برای صفحه اصلی وب سایتتان فعال/غیرفعال کنید. می‌توانید سایز تصاویر درون صفحه اصلی را کنترل کنید و با فعال کردن گزینه Non-AMP Home page link…. می‌توانید در هدر و لوگو لینکی ایجاد کنید که وقتی کاربر آنها را لمس کرد از صفحه اصلی AMP به صفحه اصلی پیش‌فرض (غیر AMP) متصل شود.

amp

بخش Page Builder

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

amp

بخش Design

در بخش Design ، شما می‌توانید برای صفحه AMP خود از طریق Post Builder یک پوسته شخصی بسازید یا از طریق Design selector یک پوسته آماده انتخاب کنید.

شما می‌توانید جستجو را در صفحه اضافه کنید که برای فعالسازی آن باید گواهینامه HTTPS داشته باشید و همچنین کلید Call Now را به صفحه اضافه کنید. همچنین می‌توانید از طریق Custom CSS تغییرات در CSS ایجاد کنید.

amp

بخش Single

در بخش Single نیز می‌توانید آیکون‌‌های شبکه اجتماعی ، لینک‌ها را غیر فعال کنید، لینک مقاله بعدی/قبلی را اضافه کنید، زمان نوشته شدن مقاله را اضافه کنید و تغییراتی در مقالات محبوب ایجاد کنید.

amp

بخش Advertisient

در این بخش شما می‌توانید تبلیغات AdSense  را به وب سایتتان اضافه کنید و از آن درآمد کسب کنید. این تبلیغات می‌تواند در چندین مکان مختلف قرار گیرد. گوگل از وب سایت‌هایی که از تبلیغات AdSense استفاده می‌کنند قدردانی می‌کند. (AdSense  سرویس تبلیغاتی گوگل است و گوگل از طریق نمایش تبلیغات درآمد کسب می‌کند)

amp

بخش AMP Menu

در این بخش شما می‌توانید کاری کنید که کاربران برای ورود به هر بخش از منو نیز از AMP استفاده کنند و سرعت بالا را همانطور که هست احساس کنند.

amp

بخش Social

در این بخش شما می‌توانید شبکه‌های اجتماعی را برای خودتان فعال کنید. برای فیس‌بوک شما نیازمند APP ID هستید که باید در فیس‌بوک بسازید.

amp

بخش SEO

بخش سئو این افزونه یکی از مهمترین بخش‌ها است، زیرا گوگل از این طریق می‌تواند تشخصی دهد که شما از AMP استفاده می‌کنید و تصمیم بگیرد که از AMP شما استفاده کند یا خیر. ما پیشنهاد می‌کنیم که برای برندینگ از Meta Description استفاده کنید. همچنین اگر از افزونه Yoast برای سئو استفاده می‌کنید بهتر است که از Meta Tags from Yoast و Yoast Description in ld+jason استفاده کنید.

amp

بخش Analytics

در این بخش شما می‌توانید نوع آنالیز وب سایت خود را انتخاب کنید و همچنین از گوگل Tag Manager استفاده کنید.

amp

این بخش از آنالیزور های زیر پشتیبانی می‌کند :

• Google Analytics
• Segment Analytics
• Piwik Analytics
• Quantcast Measurient
• comScore
• StatCounter
• Effective Measure
• HitStats Analytics
• Yandex Metrika
• Chartbeat Analytics

بخش Structured Data

بخش The structured data به شما اجازه می‌دهد که در صفحه The structured data لوگو و سایز تصاویر شخصی سازی شده داشته باشید.

amp

بخش Contact Form

یک فرم تماس با افزونه Contact form 7 می‌توانید اینجا اضافه کنید.

amp

بخش Notifications

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

amp

بخش Comments

در این بخش شما تعداد نظراتی که در یک صفحه AMP می‌توانید استفاده کنید را شخصی سازی می‌کنید و می‌توانید از افزونه‌های Disqus و Facebook Comments نیز برای نظر‌دهی استفاده کنید.

amp

بخش Advanced Settings

این بخش مخصوص تنظیمات پیشرفته‌تری مانند انتقال مستقیم کاربران موبایل به AMP ، همگام سازی صفحات آرشیو باAMP ، فعالسازی RTL که مخصوص وب سایت‌های فارسی زبان و عربی زبان است، اضافه کردن کد‌های HTML مخصوص سربرگ (هدر) و پانوشت (فوتر) و غیره می‌باشد.

amp

بخش Extensions

در این بخش شما‌ می‌توانید افزونه‌های اضافه‌تر مخصوص AMP for WP را مشاهده کنید و درصورت نیاز آن‌ها را خریداری کنید.

amp

افزونه AMP مخصوص ووکامرس

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

amp

سئو گوگل AMP

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

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

مثال در نسخه اصلی :

مثال در نسخه AMP :

افزونه AMP for WP که در بالا معرفی کردیم، با Yoast ادغام می‌شود و به صورت خودکار تگ‌های OG و meta را AMP وارد می‌کند.

amp

نحوه پیدا کردن و رفع ارور AMP

پس از فعالسازی AMP در وب سایت وردپرسی خود حالا باید کد‌های خود را در گوگل تایید کنید وگرنه گوگل وب سایت‌ شما را به عنوان استفاده کننده از AMP نمی‌شناسد. برای تایید وب سایت خود با یک نرم افزار عبور از تحریم وارد وب سایت Google AMP Validator شوید و دونه به دونه مقالات خود را اعتبارسنجی و تایید کنید.

amp

شما می‌توانید Chrome AMP extension را نیز دانلود و در کروم نصب کنید تا مشکلات و خطاهای صفحات AMP را مشاهده کنید.

amp

خطای Not a valid AMP page در AMP

اگر اعتبارسنجی AMP با مشکل رو به رو شود شما با پیغام زیر رو به رو می‌شوید : Not a valid AMP page

برای مثال در تصویر زیر مشکل AMP در تگ‌های <deltime> و <instime> می‌باشد. گوگل صفحه‌ی AMP supported HTML tags را برای نمایش تگ‌های قابل پشتیبانی در AMP قرار داده است تا توسعه‌ دهندگان صفحاتAMP بدون مشکلی تهیه کنند. توجه داشته باشید که صفحاتی که در اعتبارسنجی AMP با خطا و مشکل رو به رو می‌شوند، توسط گوگل تایید نمی‌شوند.

باید بررسی کنید که در قسمت Fix the following issue چه مواردی را گوگل اشاره می‌کند ممکن است به خاطر استفاده از ویژگی !important در CSS باشد چرا که استفاده از این ویژگی در صفحات AMP ممنوع است و باید حذف شود.

amp

شما همچنین می‌توانید مشکلات موجود در AMP خود را از طریق Google Search Console نیز در بخش Search Appearance  و قسمت Accelerated Mobile Pages بررسی کنید.

فقط توجه داشته باشید که بیشتر‌ کاربران گزارش داده‌اند که گوگل در قرار دادن مشکلات AMP کند عمل می‌کند که دلیل آن نیز جدید بودن پلتفرم amp می‌باشد که در حال حاضر با crawling به طور کامل همگام‌سازی نشده است.

amp

در بعضی مواقع نیز شما ممکن است ایمیلی برای اضافه کردن متد‌های structured data در صفحه AMP خود دریافت کنید که این ایمیل‌ها در ایندکس صفحات AMP شما پر اهمیت است و باید حتما انجام بپذیرد.

amp

مانیتورینگ گوگل AMP با New Relic

عزیزانی که از مانیتورینگ New Relic برای بررسی وب سایت خود استفاده می‌کنند نیز ممکن است با خطای زیر مواجه شوند:

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

فعالسازی AMP برای فایل‌های خارجی با کلودفلر

کلودفلر به تازگی امکان جدیدی را به امکانات خود اضافه کرده است که شما می‌توانید لینک‌های خارجی وب سایت خود را در amp نیز به نمایش بگذارید و در صفحات AMP لود کنید. یکی از مزایای این امکان لود شدن لینک‌ها به صورت مستقیم از سرور سایت می‌باشد که این برای سئو شما بسیار مفید می‌باشد. بنابراین ، این امکان کلودفلر به این معناست که نرخ دفع کاربران (bounce rate) را کاهش می‌دهد. شما این امکان را می‌توانید در بخش performance اضافه کنید، مقاله فعال سازی کلود فلر می‌تواند به شما در استفاده بهتر این سی دی ان معروف کمک شایانی بکند.

amp

در پایان

همانطور که مشاهده کردید فعالسازی AMP در وردپرس راحت تر از آنچیزی است که فکرش را می‌کنید. آیا واقعا با فعالسازی گوگل AMP پیشرفت خواهید کرد؟ این دیگر به وب سایت وردپرسی شما بستگی دارد. اگر یک مجله خبری دارید، خب بله منطقی است که شما از چنین پلتفرم‌های جدیدی استفاده کنید و احتمال پیشرفت شما در این نوع عملکرد‌ها بالاست. اگر شما تجارت Saas (نرم‌افزار به عنوان یک سرویس یا Software as a service) انجام می‌دهید، ممکن است که فعالسازی AMP به ضرر وب سایت شما باشد. گوگل AMP‌ قطعا یک تغییر عمده در وب سایت شما ایجاد می‌کند، مخصوصا اگر ترافیک بالایی از موبایل دریافت کنید. در کل پیشنهاد می‌شود که به راحتی از فعالسازی AMP در وب سایتتان گذر نکنید و حداقل یکبار آن را تست کنید و نتیجه را بررسی کنید.

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 و همچنین حداکثر سرعت را در وب سایتتان داشته باشید اهمیت دارد بنابراین به جای وقت گذاشتن بر روی امتیاز به فکر سرعت وب سایت خود باشید.