پس انتشار دوره جامع آموزش جی تی متریکس، تصمیم گرفتیم تا راهنما و ترفندهای کلی را در قالب یک مقاله در حوزه بارگذاری صفحات وب سایت شما انتشار دهیم. هر موتور جستجو می‌خواهد کاربر، تجربه عالی از یافتن وب سایت موردنظر خود داشته باشد و از جمله این موتور جستجوها باید به گوگل اشاره کرد. یک وب سایت سریع که از کیفیت بالایی برخوردار بوده و همیشه از رضایت کاربران خود برخوردار است یعنی دارای ترجمه کاربری عالی می‌باشد. برخی از نکات زیر که در سایت سئوراز می‌خوانید، به طور کلی ترفندهایی برای بهبود سرعت سایت شما می‌باشد که امیدوارم مورد استفاده قرار گیرد.
آزمایش‌ها نشان دادند که افزایش مدت زمان تاخیر جستجو در وب سایت از 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 یکی کردن عکس‌های کوچک
تاثیر سرور در سرعت سایت
انتخاب هاست مناسب در سرمایه گذاری در آن، به عنوان اولین قدم در ساخت یک وب سایت ایده آل است. هاستی با پیکربندی حرفه‌ای می‌تواند کمک فراوانی برای کسب و کار آنلاین شما باشد، بنابراین بهتر است با کسب اطلاعاتی درباره آن، هاسب موردنظر و مناسب خود را برای سایت انتخاب کنید.
ما به ۴ مورد مهم مربوط به تنظیمات هاست در جهت بهبود سرعت سایت می‌پردازیم.
Leverage browser caching
شما می‌توانید از طریق هدرهای که وظیفه منقضی کردن فایل‌ها در مرورگر کاربر را دارند بگویید آیا منبع یک وب سایت مورد درخواست ذخیره شود یا از کش مرورگر می‌توان آن را دریافت کرد. هنگامی که یک هدر برای منبع تعیین می‌کنید، مانند تصاویر JPEG، مرورگر آن منابع را در حافظه پنهان ذخیره می‌کند. مرتبه دیگر که بازدید کننده به صفحه می‌آید شاهد بارگذاری سریع‌تر صفحه خواهد بود و همانطور که مرورگر آن تصاویر را دردسترس خود دارد. حتما پیشنهاد میکنم مقاله حل ارور Leverage browser caching را مطالعه نمایید.
فعال باقی گذاشتن Keep-Alive
در حقیقت HTTP Keep-Alive با اتصال به TCP اجازه می‌دهد تا مدت زمان تاخیر کاهش یابد و به درخواست های بعدی نیز کمک می‌کند. بنابراین با ارائه دهنده خدمات میزبان هاست خود تماس برقرار کنید و به آنها بگویید که بررسی کنند. بیشتر شرکت های میزبان هاست قابلیت مورد نظر را فعال می‌کنند زیرا فعال بودن چنین ویژگی بدیهی است، مگر دلایلی مالی و یا سیاست های خاصی را آن هاستینگ داشته باشد، با خواندن مقاله رفع مشکل Keep-Alive شما را در درک بهتر ادامه متن بسیار یاری خواهد کرد.
Enable gzip compression
Gzipping موجب کاهش پاسخگویی HTTP شده و به کاهش مدت زمان پاسخگویی کمک شایانی می‌کند. این یک روش آسان برای کاهش مدت زمان بارگزاری صفحه خواهد بود برای بهره‌گیری از این روش کافی است یکی از روش‌های موجود در مقاله فعال سازی gzip را مطالعه نمایید.
یاهو در این باره می‌گوید:
Gzip محبوب ترین و کارآمدترین روش فشرده سازی بوده که در حال حاضر دردسترس است. از این رو نزدیک به 70 درصد میزان پاسخ گویی را کاهش می دهد. تقریبا 90 درصد ترافیک اینترنتی امروز از طریق مرورگرهایی که ادعا پشتیبانی از Gzip را دارند، ناشی می شود.
استفاده از یک CDN
یک شبکه تحویل محتوا CDN یا همان Content Delivery Network مجموعه ای از سرورهای وب بوده که در میان مکان های مختلفی توزیع می شود تا مطالب به شکل موثرتری روی کاربران ارائه شود. سرور انتخاب شده برای ارائه محتوا به یک کاربر خاص معمولا براساس اندازه گیری نزدیکی شبکه صورت می گیرد. برای مثال سروری با کمترین میزان hops شبکه و یا سروری با سریعترین زمان پاسخ انتخاب می شود. ما در مقالهCDN چیست به نکات برتر و جالبی دربارهCDN اشاره کردیم، جمع بندی این نکات زمان زیادی را می‌گیرد، پس حتما خواندن آن را پیشنهاد میکنم. برای افزایش سرعت وردپرس خود می‌توانید از W3 Total Cache به کار گیرید، چرا که از تنظیمات مختلف CDN پشتیبانی می‌کند.
تاثیر منابع در سرعت سایت
در نکات بالا به مواردی که مربوط به سرور بود پرداختیم، از آنجایی که شما دسترسی کاملی به سرور خود ندارید، عناصر محتوایی تنها چیزهایی هستند که می‌توانید به دستکاری آنها بپردازید. مواردی از قبیل:
کاهش تغییر مسیر (Minimize redirects)
ریدایرکت باعث ایجاد یک چرخه درخواست پاسخ اضافی در پروتکل HTTP و در نهایت تاخیر در باز شدن یک صفحه از سایت می‌شود. در بهترین حالت، هر ریدایرکت، یک رفت و برگشت اضافی ایجاد می‌کند و در بدترین حالت ، امکان دارد چندین رفت و برگشت اضافی در پروتکل HTTP نیز به موجود آورد. در نتیجه، شما باید استفاده از تغییر مسیر را به منظور بهبود عملکرد وب سایت خود به حداقل برسانید. ریدایرکت ها باعث کاهش سرعت صفحه شما می‌شوند، زیرا رفتن به صفحه‌ای و سپس تغییر مسیر از آنجا باعث هدر رفتن زمان می‌شود. حتما پست مربوط به رفع ارور Minimize Redirects را مطالعه نمایید.
حذف رشته علامت سوال از منابع استاتیک (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 را بخوانید تا بتوانید باعث بهبود عملکرد وب سایت شوید.
مشخص کردن یک مجموعه کاراکتر (Specify a character set)
یک کاراکتر در هدرهای HTTP مشخص کنید تا سرعت رندر مرورگر افزایش پیدا کند. اگر در بررسی سایت خود در ابزار GTmetrix با خطای Specify a character set روبه‌رو شدید، پست رفع خطای Specify a character set را بخوانید.
کدهای خود کم کنید ( Minify your codes)
بهینه سازی نظرات ، بخش های CDATA ، فضاهای سفید، عناصر خالی و اندازه صفحه شما را کاهش خواهد داد. همچنین زمان تاخیر لود سایت را بهبود می‌بخشد و سرعت بارگذاری نیز کم می شود. شما می‌توانید از ابزارهای آنلاین برای فشرده سازی اسناد استفاده کنید و یا از پلاگین‌هایی که باعث بهینه سازی سایت شما می‌شود، ما در مقاله‌های رفع خطای Minify HTML ، رفع خطای Minify CSS و همینطور رفع خطای Minify JavaScript به شکل بسیار کاملی توضیحات لازمه را ارائه دادیم.
از درخواست های بد دوری کنید (Avoid bad requests)
لینک های دارای مشکل به صفحه 404/410 ختم می شوند. این باعث می شود درخواست های نامناسب بی پاسخ بماند و باید URLهای معیوب را برطرف کنید چرا که زمان لود سایت را هم بالا می‌برد. از online broken link checker یا پلاگین وردپرس WordPress link checker به شکل رایگان استفاده کنید. اگر نیاز به توضیحات جامع و کاملی داشتید مقاله رفع خطای Avoid bad requests را حتما مطالعه نمایید.
حفظ منابع از یک آدرس سازگار (Serve resources from a consistentURL)
برای منابعی (همانند فایل‌های JS و یا CSS) که در چندین صفحه مورد استفاده قرار گرفته‌اند، مطمئن شوید که هر منبع به یک URL یکسان متکی است. اگر یک منبع با چند آدرس مختلف باز شود و محتوای یکسانی داشته باشد. این حالت ممکن است موجب افزایش هزینه DNS شوید که قطعا مطلوب نخواهد بود و برخلاف نظر مخاطب می‌باشد. از طرفی حجم، لود زمان و تعداد درخواست ها نیز بالا می‌رود. برای مثال اگر شما در دو آدرس mysite.example.com و yoursite.example.com یک فایل JS را درج کرده باشید و در صفحه اصلی از هر دو فایل js استفاده کنید مشکلاتی که ذکر کردیم رخ می‌دهد، به شکل خلاصه از فراخوانی محتواهای یکسان در آدرس های متفاوت جلوگیری کنید، خواندن مقاله رفع خطای Serve resources from a consistent URL حتما برای شما مفید خواهد بود.
کاهش جستجو دی ان اس (Reduce DNS lookups)
جستجو DNS زمانی معنی پیدا می کند که می خواهید IP آدرس یک هاست را بدست آورید. مرورگر تا زمانی که جستجو کامل نشود نمی‌توان کاری انجام دهد. کاهش نام هاست های منحصربفرد ممکن است زمان پاسخ دهی را افزایش دهد. پیشنهاد میکنم حتما مقاله جذاب و کامل رفع خطای Reduce DNS lookups را مطالعه نمایید.
قرار دادن CSS در بالا و JS در پایین (Put CSS at the top and JS at the bottom)
قرار دادن stylesheets در سند سر صفحه ممنوع بوده بنابراین مرورگر رندر را مسدود می سازد تا نیاز به عناصر redraw صفحه نباشد. در بیشتر موارد کاربران با یک صفحه سفید رو به رو می شوند تا زمانی که صفحه به طور کامل بارگذاری شود. این همچنین به شما کمک می کند که یک صفحه وب استاندارد مطابق با استاندارد W3 ایجاد کنید. به همین دلیل است که گفته می شود کد جاوا اسکریپت را در پایین صفحه قرار دهید. توضیحات بیشتر درباره این فاکتور بسیار تاثیرگذار را در مقاله حل Defer parsing of JavaScript بخوانید.
ما در سایت سئوراز بارها درباره بهینه سازی و سئو عکس ها صحبت کردیم و در اینجا به شکل خلاصه به این موارد می‌پردازیم.
تاثیر تصاویر و عکس ها در سرعت سایت
ابعاد تصویر را مشخص کنید (Specify image dimensions)
مرورگر شما قبل از آن که صفحه ای را بارگذاری کند به رندر کردن تصاویر درون آن می‌پردازد. تعیین ابعاد تصویر کمک می‌کند تا سرعت بارگذاری را کاهش داد. اگر ابعاد مشخص نشده باشد پس از بارگیری تصاویر، مرورگر شما سرعت بارگذاری آن افزایش می‌یابد. برای انجام این کار در <img> مشخصات ارتفاع و عرض تصویر را مشخص کنید. در مقاله رفع ارور Specify image dimensions به نکات جالبی اشاره کرده‌ایم.
بهینه سازی تصاویر (Optimize images)
تصاویر اهمیت بسیاری در سایت داشته و باید به آن توجه داشت. اگر تصویری استفاده کنید که رنگ مطلوب یا کیفیت مناسبی ندارد قطعا مورد توجه کاربران و بازدیدکنندگان وب سایت قرار نمی‌گیرد. بنابراین هرگاه به تولید محتوایی در سایت خود می‌پردازید سعی کنید به موضوع انتخاب تصویر توجه بسیاری داشته باشید. سعی کنید تصاویری که در سایت خود ذخیره می کنید از نوع JPEG باشد زیرا این فرمت بسیار متداول بوده و به شکل بهینه شده ای است. شما با فشرد چند کلید CTRL+SHIFT+ALT+S یک تصویر را ذخیره کنید و آن را در فتوشاپ به بهینه سازی بپردازید. در مقاله رفع ارور Optimize images به تشریح این موضوع و انواع راه‌حل ها برای CMS های مختلف نظیر وردپرس و جوملا پرداخته‌ایم.
یکی کردن عکس‌های کوچک
به این ترفند به زبان انگلیسی Combine images using CSS sprites گرفته می‌شود، ادغام تصاویر به روش CSSSprites که باعث می‌شود عکس های کوچک سایت که هر کدام آدرس جداگانه برای لود شدن دارند را در قالب یک عکس بزرگ‌تر در سایت فراخوانی کنیم، یعنی اگر ۱۰ عکس کوچک دارید، آنها را ادغام نماییم و به یک عکس بزرگ‌تر تبدیل کنیم، این کار جدا از اینکه باعث کاهش کلی حجم سایت می‌شود، باعث کاهش تعداد درخواست‌ها هم نیز میگردد. در مقاله آموزش CSS sprites بیشتر به این موضوع پرداختیم و مثال جالبی از سایت دیجی کالا در این مقاله زده شده است و حتما مقاله را مطالعه نمایید.
مطلب قبلی : منظور از مسدود سازی DOM چیست و تاثیر آن در سرعت سایت