روش‌های افزایش سرعت لود وب سایت

روش‌های افزایش سرعت لود وب سایت

Tips to Speed Up Your Website

روش های افزایش سرعت وب سایت

 

ترفندها و نکات افزایش سرعت لود وب سایت

 

لزوم افزایش سرعت لود وب سایت:

پس از بررسی ها و آنالیزهای انجام شده بر روی وب سایت MOZ ، مواردی را که باعث کندی لود وب سایت می شود را دریافتیم و در این مقاله می خواهیم ۱۵ مورد از کارهایی که باعث افزایش سرعت لود سایت می شوند را بیان کنیم. هر موتور جستجویی (و در صدر آنها گوگل) می خواهد تجربه خوبی (UX:User Experience) را برای کاربران خود فراهم کند. سرعت لود بالا برای وب سایت ها باعث بهبود کیفیت کلی سایت می شود و در نتیجه باعث افزایش رضایتمندی کاربران (User Satisfaction) خواهد شد.

در این مقاله، لیستی از فاکتورهای تاثیرگذار روی سرعت لود وب سایت و نیز روش های بهبود آن را از دیدگاه گوگل و یاهو را ارائه خواهیم کرد.

نکته: حتما قبل از انجام مراحل زیر، یک بک آپ از وب سایت خود تهیه نمائید.

 

 بخش اول- سرور (Server): 

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

 

۱- Leverage browser caching:

قابلیت Expires headers به مرورگر اعلام می کند که آیا یک صفحه وب باید از سورس و منبع آن دریافت شود و یا از کش مرورگر (browser’s cache) کاربر خوانده شود. هنگامیکه شما expire header را برای منابع وب سایت تان (مانند تصاویر با فرمت jpg) تنظیم می کنید، مرورگر تمام تصاویر jpg را در کش خود ذخیره می کند. دفعه بعدی که کاربر وارد آن صفحه وب سایت شود، سریع تر لود خواهد شد. زیرا مرورگر (browser) در آن لحظه، تصاویر آن صفحه وب سایت را در اختیار دارد.

با مطالعه مقاله "Expire Header for SEO" می توانید از قابلیت Expire Header در وب سایت خود برای افزایش سرعت لود آن بهره ببرید.

 

۲- فعالسازی Keep-Alive:

"یک سیگنال Keep-Alive غالبا با وقفه هایی از پیش تعریف شده ارسال می شود و نقش مهمی در اینترنت ایفا می کند. بعد از اینکه یک سیگنال ارسال شد، اگر پاسخی دریافت نشود، تصور بر این است که آن لینک مشکل دارد و داده هایی که در آینده قرار است ارسال شود از طریق دیگری ارسال خواهند شد تا زمانی که آن لینک درست شود."    به نقل از ویکی‌پدیا

در واقع، HTTP Keep-Alive به اتصال TCP اجازه می دهد که زنده و برقرار بماند و اینکار باعث می شود تا تاخیر در درخواستهای بعدی کاشهش یابد. بنابراین با شرکت میزبان وب سایت خود تماس بگیرید و درباره این موضوع با آنها صحبت کنید! بیشتر شرکت های میزبانی وب، این قابلیت را غیر فعال کرده اند، زیرا این یک قابلیت اختیاری می باشد.

 

۳- فعالسازی فشرده‌سازی Gzip:

فعالسازی فشرده‌سازی Gzip

منبع: betterexplained.com

 

Gzip موثرترین و محبوبترین متد فشرده‌سازی در دنیای وب می باشد بطوریکه تا ۷۰ درصد از سایز پاسخ (Response Size) را کاهش می دهد. یاهو ادعا کرده است که تقریبا ۹۰% ترافیک وب سایت ها از Gzip استفاده می کنند.

انجام Gzip سایز HTTP Response را کاهش می دهد و در نتیجه ارسال پاسخ نیز سریع تر انجام خواهد شد. Gzip یک روش ساده است برای کاهش حجم صفحات وب.

شما می توانید Gzip را با افزودن کدهای زیر به فایل .htaccess فعال کنید:

# compress text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:

<files *.html>

SetOutputFilter DEFLATE

</files>

و سپس کد PHP زیر را در بالای فایل PHP/HTML خود اضافه کنید:

<?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

در صورتی که از سیستم های مدیریت محتوا (مانند وردپرس) استفاده می کنید، می توانید از پلاگین های موجود برای Gzip استفاده کنید.

 

۴- قابلیت Cache را برای ریدایرکت صفحات فرود (Landing pages) فعال کنید:

ممکن است در برخی وب سایت ها، نسخه موبایل در ساب دامین دیگری لود شود. مانند http://mobile.mohtava.info

بنابراین، ذخیره شدن این ریدایرکت در کش مرورگر می تواند سرعت لود سایت را در دفعات بعدی بازدید کاربر افزایش دهد. بدین منظور می توانید از Redirect 302 به همراه کش با طول عمر یک روز استفاده کنید. همچنین تنظیمات Vary: User-Agent و

Cache-Control: private را برای آن تعریف کنید. با اینکار، تنها کاربران موبایل به ساب دامین mobile ریدایرکت خواهند شد.

 

۵- استفاده از CDN:

استفاده از CDN

 

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

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

در وب سایت MOZ از Amazon CloudFront در این زمینه استفاده شده است.

اگر از وردپرس استفاده می کنید، می توانید از پلاگین W3 Total Cache برای مدیریت و تنظیم کش و سایر ابزارهای مفید در این زمینه استفاده کنید.

 

 

بخش دوم- المان های محتوا (Content Elements):

از آنجائیکه شما دسترسی کامل به سرور وب سایت تان ندارید، المان های محتوایی مهمترین بخشی هستند که می توانید آنرا تغییر دهید و دستکاری کنید.

 

۱- به حداقل رساندن ریدایرکت‌ها (Minimize Redirects):

گاهی اوقات برای مشخص کردن Location یک URL ، رهگیری کلیک ها (Track Clicks) ، اتصال چند بخش از سایت به یکدیگر و… شما احتیاج دارید که از یک URL به URL دیگر ریدایرکت کنید. ریدایرکت ها یک درخواست HTTP جدید را فعال می کند. سعی کنید تنها زمانی از ریدایرکت ها استفاده کنید که واقعا مورد نیازتان است و نمی توانید راه حل دیگری بجز آن پیدا کنید. در زیر توصیه های گوگل را مشاهده می کنید:

  • هرگز در صفحات وب سایت خود از URL هایی استفاده نکنید که می دانید ریدایرکت خواهند شد. اپلیکیشن یا وب سایت شما باید طوری طراحی شده باشد که در هنگام مواجه با اینگونه URL ها در صفحات وب سایت، آنها را آپدیت کنند.
  • هرگز برای دستیابی به یک منبع (Resource) بیش از یک ریدایرکت انجام نشود. بعنوان مثال، اگر C صفحه هدف است، و دو نقطه شروع A و B داریم، هر دوی صفحات A و B باید به صفحه C ریدایرکت شوند. و اینگونه نباشد که A ابتدا به B ریدایرکت شوند و سپس به C.
  • از تعداد دامین هایی که فقط باعث ریدایرکت شدن می شوند و هیچ محتوایی را شامل نمی شوند کم کنید. گاهی اوقات نیاز است تا دامین های مشابه دامین اصلی به این دامین ریدایرکت شوند تا در صورتی که کاربر در نوشتن نام دامین در مرورگر خود دچار اشتباه تایپی شد و یا اینکه مثلا دامین های.NET و .ir به دامین .com ریدایرکت شوند.

 

تصویر زیر نشان می دهد که بهنگام لود وب سایت SeoMoz.org در مرورگر، چه اتفاقاتی رخ می دهد:

به حداقل رساندن ریدایرکت‌ها (Minimize Redirects)

 

همانطور که در تصویر مشخص است، بیشترین تاخیرها زمانی رخ می دهند که نیاز است خروجی از یک منبع خارجی گرفته شود. وب سایت SeoMoz از حدود ۲۰ زنجیره ریدایرکت استفاده می کند که این موضوع باعث می شود زمان لود به ۳۰۰۰ میلی ثانیه برسد.

 

۲- حذف رشته های پرس‌وجو از منابع استاتیک (Remove query strings from static resources):

در صورتی که در URL لینک از علامت سوال یعنی ؟ استفاده شده باشد، شما نمی توانید آن لینک را کش کنید ، حتی اگر هدر Cache-control: public تنظیم شده باشد. علامت سوال مانند Ctrl+F5 عمل می کند. از علامت سوال فقط در منابع داینامیک استفاده کنید.

 

۳- یک مجموعه کاراکتر تعیین کنید (Specify a character set):

در HTTP Header یک مجموعه کاراکتر (Character set) تعیین کنید. این قضیه با تعریف تکه کد ساده زیر در هدر امکان پذیر می باشد:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

نکته: برخی از سیستمهای مدیریت محتوا (CMS)، از تابع برای تعریف Character Set استفاده می کنند (مانند وردپرس که از کد <?php bloginfo('charset'); ?> استفاده می کند). در صورتی که از character set وب سایت خود مطمئن هستید، بجای استفاده از تابع PHP ، در HTML کد آن را تعریف کنید. با اینکار باعث می شوید تعداد درخواست ها کاهش یابد. بنابراین سعی کنید در صورت امکان، از کدهای HTML بجای توابع PHP استفاده کنید.

 

۴- فشرده سازی کدهای سایت (Minify your codes):

فشرده سازی کدهای سایت (Minify your codes)

حذف کامنت های HTML ، بخش های CDATA ، فضای سفید و المان های خالی ، سایز صفحات وب سایت شما را کاهش خواهد داد، تاخیر شبکه (Network Latency) را کم کند و در نتیجه سرعت لود سایت شما افزایش می یابد.

شما می توانید از ابزارهای مفید آنلاین مانند Will Peavy minfier استفاده کنید. اگر وب سایت شما وردپرسی می باشد، پلاگین Autoptimize می تواند کدهای سایت شما را فشرده کند. این پلاگین از CDN نیز پشتیبانی می کند.

 

 5- اجتناب از درخواست های بد (Avoid bad request): 

اجتناب از درخواست های بد (Avoid bad request)

 

لینک های شکسته باعث بروز خطاهای ۴۰۴ و ۴۱۰ می شوند. این قضیه باعث ایجاد درخواست های بی فایده می شود. URL های شکسته و ناقص وب سایت خود را شناسایی کرده و تصحیح نمائید. در انجام اینکار، توجه ویژه ای به تصاویر داشته باشید. می توانید از ابزار Online Broken Link Checker استفاده کنید و یا اگر پلاگین وردپرس نیاز دارید، افزونه رایگان Broken Link Checker مناسب می باشد.

 

۶- منابع را از یک URL ثابت میزبانی کنید (Serve resources from a consistent URL):

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

برای منابعی که در چند صفحه وب سایت تان بطور اشتراکی استفاده می شوند، URL های یکسانی درنظر گرفته شود. دو سایت یا ساب دامین یا صفحه وب را درنظر بگیرید، اگر سایت اول به دوم لینک باشد، در صورتی که در هاست های مجزا سرویس داده شوند، بهتر است منابع مشترک در یک هاست و یک url ذخیره شوند تا اینکه در هر دو سایت یا ساب دامین میزبانی شوند. بعنوان مثال، دو ساب دامین sub1.example.com و sub2.example.com را در نظر بگیرید. فرض کنید هر دوی این سایت ها از یک فایل js استفاده می کنند و سایت اول یعنی sub1 به سایت دوم یعنی sub2 لینک باشد. منطقی است که فایل js مشترک بین این دو سایت در هاست اول ذخیره و میزبانی شود. بدین صورت، وقتی کاربر وارد سایت sub2 می شود، مانند اینست که فایل js مذکور در کش مرورگر کاربر ذخیره شده باشد و سریع تر لود خواهد شد.

 

۷- جستجویDNS  را کاهش دهید (Reduce DNS Lookup):

جستجویDNS  را کاهش دهید (Reduce DNS Lookup)

 

فعالیت جستجوی DNS زمان قابل توجهی را برای یافتن آدرس IP برای یک هاست صرف می کند. مرورگر تا قبل از تکمیل DNS Lookup، نمی تواند کاری انجام دهد. کاهش تعداد Hostname های یکتا و منحصر بفرد می تواند زمان های پاسخ را افزایش دهد. شما می توانید زمان لازم برای DNS Lookup را با مراجعه به وب سایت Pingdom بدست آورید.

نکته: از Image sprite استفاده کنید. بدین معنی که سعی کنید تصاویری را که در تمام صفحات وب سایت تان نمایش داده می شوند (مانند آیکون های شبکه اجتماعی در فوتر سایت) را در یک تصویر تجمیع کنید. بدین ترتیب می توانید تایم DNS Lookup را کاهش دهید. بعنوان مثال سایت SeoMoz اکثر تصاویر مورداستفاده اش را به یک تصویر واحد تبدیل کرده است. برای کسب اطلاعات بیشتر در این زمینه به وب سایت Sprite me مراجعه شود.

 

بخش سوم-  کدهای CSS و JS و تصاویر: 

 

۱- مشخص کردن ابعاد تصاویر (Specify Image Dimensions):

مرورگر شما قبل از لود تصاویر، شروع به رندر کردن (render) صفحه وب می کند. به منظور تعریف ابعاد برای تصاویر، در تگ  از<img> اتریبیوت های height و width استفاده کنید.

نکته: ابعاد تصاویر را بصورت داینامیک تعریف نکنید. در صورت مشخص کردن ابعاد تصویر توسط برنامه نویسی و داینامیک، تصویر همچنان با سایز اصلی در مرورگر کاربر دانلود می شود. حتی اگر در طراحی صفحه وب، محل نمایش تصویر محدود شده باشد و تصویر کوچک به نمایش در بیاید.

 

۲- بهینه سازی تصاویر (Optimize Images):

بهینه سازی تصاویر (Optimize Images)

 

همانطور که در تصویر فوق مشاهده می فرمائید، تصاویر ممکن است دارای کامنت های اضافی (Extra Comments) و همچنین رنگ های بلااستفاده (Useless Colors) باشند. پایین نگه داشتن حجم تصاویر می تواند کمک بزرگی برای کاربرانی که اینترنت کم سرعت دارند باشد. سعی کنید تصاویر را در فرمت JPEG ذخیره کنید. در نرم فزار فتوشاپ می توانید از کلیدهای میانبر CTRL+SHIFT+ALT+S برای ذخیره تصویر بهینه برای وب استفاده کنید. همچنین می توانید از وب سایت TinyPNG به منظور بهینه سازی تصاویر برای وب بدون پایین آوردن کیفیت تصویر و یا از پلاگین TintPNG در وردپرس استفاده نمائید.

وب سایت TinyPNG به منظور بهینه سازی تصاویر برای وب بدون پایین آوردن کیفیت تصویر

 

۳- تعریف استایل های CSS در بالای صفحات وب و اسکریپت های JS در پایین:

درج کدهای css در داخل تگ head در بالای صفحات وب باعث جلوگیری از Progressive Rendering خواهد شد. در اکثر موارد، کاربران تا اتمام بارگذاری کامل صفحه وب، با یک صفحه سفید روبرو خواهند بود. علاوه بر این، با رعایت ترتیب کدهای css و js صفحات وب سایت خود را بر اساس استانداردهای W3 طراحی کرده اید. به همین ترتیب، تعریف کدهای JS در پایین صفحات وب و قبل از تگ بسته body یعنی </body> باعث استاندارد بودن طراحی وب سایت تان خواهد شد.

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

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

 

منبع: https://moz.com/blog/15-tips-to-speed-up-your-website


برچسب‌ها:

Leverage browser cachingاستفاده از CDNافزایش سرعت سایتافزایش سرعت لود سایتبهبود سرعت لودبهینه سازی تصاویرپلاگین W3 Total CacheجستجویDNSسرعت لود سایتسرعت وب سایتفایل .htaccessفشرده سازی کدهای سایتفشرده‌سازی Gzipفعالسازی Keep-Aliveقابلیت Cache

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

2 × 4 =