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

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

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

در صورتی که به کد نویسی و زبان های html و css تخصص ندارید به بخش دوم بروید و اصول تولید محتوا را مطالعه کنید.

بخش اول ) اصول بهینه سازی کدهای سایت

برای بهینه کردن سایت نیاز به افرادی است که نسبتا آشنایی لازم با html و css داشته باشند. اما نیاز به مهارت کامل نیست.

تست سرعت سایت

شما با مراجعه با سایت  gtmetrix.com و  تست سرعت گوگل می توانید سرعت صفحات وب را تست کنید و دلایل افت سرعت و چارت باز شدن تک تک المان های سایت را مشاهده کنید. راهکار های زیر از عمومی ترین مشکلات سایت هاست.

کوچک کردن فایل های استاتیک

minify کردن فایل های استاتیک کش سایت مهم ترین بخش بهینه سازی سایت است. برای مینی‌فای کردن باید سراغ فایل های css و java script رفت و کد های آن ها را در سایت هایی نظیر https://www.minifier.org قرار دهید تا فضای خالی بین کد ها را از بین ببرد و حجم فایل css یا جاوا اسکریپت را کاهش دهد.

بهینه کردن فایل ها

بیشتر قالب های سایت ها به صورت کپی شده از قالب های دیگر است و کد های بسیار متناقض با اولویت کم وجود دارد که در مورد المان های div و … همپوشانی دارند. با شناسایی این کدها و برداشتن و حذف آن ها از فایل هایی مانند css موجب کاهش حجم فایل و بهینه شدن آن می شویم. برای بهینه سازی فایل ها می توانید با ما تماس بگیرید یا از ابزار ها و وب سایت های مشخصی استفاده کنید.

حذف منابع مسدود کننده و اصلاح آن

شاید با عبارت Eliminate render-blocking resources مواجه شده باشید. این یعنی تا زمانی که فایل های css یا java script دانلود نشوند هیچ کدام از کد های html نمایش داده نمی شود که این فاکتور خیلی بدی بری سایت است. برای رفع این موارد می توان بخش های حیاتی و مهم کد های استاتیک را به صورت درون خطی در کد های html قرار داد تا اولین نمایش نیمه بالایی سایت سریع انجام گردد. برای دیدن کد های حیاتی و مهم هر صفحه می توانید از critical-path-css-generator استفاده کنید و فایل های css را به صورت خطی یا inline درون html اصلی بنویسید.

یکی سازی فایل ها

هر بار که page مشخصی باز می شود در خواست های بسیاری برای سایت و هاست دامنه ارسال می شود که سرعت بارگزاری سایت را نه تنها در یک کاربر بلکه درکاربران دیگر نیز کاهش می دهد. یعنی با گرفتن پهناب باند مشخصی از هاست و درگیر کردن هاست موجب کاهش سرعت پاسخ دهی سایت در کاربران دیگر نیز می شود که به آن  Server Response Time می گویند که عوامل دیگری نیز بر افزایش زمان پاسخ دهی سرور تاثیر می گذارند که در مورد آن ها در بخش بعد توضیح می دهیم.

شاید عبارت Make fewer HTTP requests را شنیده باشید. این یکی از مرسوم ترین دلایل کاهش سرعت سایت است. با یکی کردن فایل های css در یک فایل واحد و javascript در فایل واحد دیگری می توان به سرعت هر صفحه و سرعت پاسخدهی سرور و هاست کمک کرد.

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

از سرور ها و هاست های متفرقه استفاده نکنید (یک مثال ساده : اگر تعداد سایت هایی که می توان در یک cpanel هاست و سرور فعال باشد  نشان می دهد که هاست خریداری شده مشترک است ) برای دیدن سایت هایی که آیپی مشترک با شما دارند به  viewdns.info/reverseip بروید و ببینید چه تعداد سایت با آیپی شما فعال هستند. هرچه بیشتر باشند وب سایت را کند تر می کنند.

کاهش فرایند های محاسباتی سایت مانند استفاه کم تر از افزونه ها و کد های آماده غیر بهینه مخصوصا افزونه های وردپرس عامل اصلی ارور Server Response Time است.

لود فایل بعد از بارگزاری (async and defer)

استفاده از ویژگی های async و defer برای بار گزاری فایل های استاتیک بسیار مهم است. استفاده از async و defer موجب بهینه شدن بارگزاری فایل ها در هنگام تجزیه و تحلیل و یا بعد آن می شود که سرعت سایت را به شدت افزایش می دهد.

async

اگر ویژگی async وجود داشته باشد : کد دانلود فایل به صورت همزمان با بقیه سایت اجرا می شود ( فایل زمان تجزیه و تحلیل کد سایت توسط مرورگر بارگزاری می شود)

defer

در صورت نبود async و استفاده از defer : کد زمانی اجرا می شود و فایل را دانلود می کند که کد های html صفحه اجرا شده و تجزیه و تحلیل به صورت کامل انجام شده.

عدم استفاده از async و defer

بلافاصله قبل از تجزیه و تحلیل کد ها شروع به بارگیری می کند و هیچ کد و متنی تا زمان اتمام بارگیری فعال نمی شود. این یعنی صفحات اول وب سایت نمایش داده نمی شود تا تمام فایل عا به صورت کامل دانلود شوند. این موجب ارور هایی مانند Eliminate render-blocking resources یا First Contentful and Meaningful Paint بدهد که یکی از دلایل بالاست.

استفاده از CDN

CDN یا مخفف آن content delivery network به شبکه توزیع محتوا می گویند. این شبکه می تواند فابل های استاتیک مانند css , جاوا اسکریپت و حتی عکس ها را به صورت فایل های استاتیک برای مشخصی در سرور های سرتاسر دنیا ذخیره کند . با این کار فردی که در آمریکا است برای دیدن سایت هندی نیازی نیست به سرور هند متصل شود بلکه به سرور CDN در آمریکا وصل می شود و فایل های استاتیک کش شده را از آنجا دانلود می کند.
یکی از سایت هایی که به صورت رایگان خدمات CDN رایگان می دهد سایت Cloud Flare است.

بخش دوم ) اصول بهینه سازی محتوا سایت

تغییر سایز عکس ها

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

فرمت عکس ها

از فرمت هایی استفاده کنید که کم حجم و فشرده باشند مانند jpg , webp که میزان حجم عکس ها را به شدت کاهش می دهند و در نتیجه سرعت بارگزاری سایت را بهبود می دهد.

ذخیره سازی ویدیو

ویدیو بسیار حجیم بوده و برای لود شدن آن حجم بسیاری از داده های هاست را به خود اختصاص می دهد و پهنای باند بسیاری را می گیرد. برای گذاشتن ویدیو در سایت می توانید آن را در سایت های اشتراک ویدیو مثل یوتوب و آپارات آپلود کنید و کد src آن را در سایت past کنید تا بدون نیاز به استفاده از منابع سایت ویدیو نمایش داده شود.

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

برای فشرده سازی کد ها و منابع وارد فایل .htaccess بشوید و آن را edit کنید و کد های زیر را که برای فشرده سازی اطلاعات سایت پیش از ارسال است استفاده کنید. در صورتی که سرور از این قابلیت پشتیبانی کند فایل ها به صورت فشرده شده ارسال می شوند.

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

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

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

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