چک‌ لیست افزایش سرعت سایت [15 راهکار] | افزایش سرعت وردپرس

چک‌ لیست افزایش سرعت سایت :

بهینه‌ سازی تصاویر: تصاویر را فشرده و اندازه آن‌ ها را کاهش دهید تا حجم فایل بدون افت کیفیت کم شود .
فشرده‌ سازی CSS، JavaScript و HTML: کدهای غیرضروری را حذف کنید تا حجم فایل‌ها کاهش یابد.
استفاده از کش مرورگر: تاریخ انقضا برای فایل های سایت تنظیم کنید تا مرورگر آن‌ ها را محلی ذخیره کند.
استفاده از CDN: محتوای سایت را در CDN ها توزیع کنید تا تاخیر کاهش یابد.
کاهش زمان پاسخ سرور: تنظیمات سرور و کوئری‌های پایگاه داده را بهینه کنید تا پاسخ سریع‌تر شود.
فعال‌ سازی فشرده‌سازی: از Gzip یا Brotli برای فشرده‌ سازی فایل‌ ها قبل از ارسال به مرورگر استفاده کنید.
حذف منابع مسدودکننده رندر: CSS و JavaScript مهم را به‌ صورت درون‌ خطی بارگذاری کنید.
اولویت‌ بندی محتوای بالای صفحه: محتوای اصلی را ابتدا بارگذاری کنید تا زمان بارگذاری محتوای اصلی کاهش یابد.
کاهش ریدایرکت‌ ها: تعداد ریدایرکت‌ ها را کم کنید تا زمان بارگذاری صفحه کوتاه‌ تر شود.
بارگذاری ناهمگام CSS و JavaScript: منابع غیرحیاتی را بدون توقف رندر صفحه بارگذاری کنید.
بهینه‌ سازی فونت‌ های وب: از font-display: swap و پیش‌ بارگذاری فونت‌ ها برای کاهش زمان بارگذاری استفاده کنید.
استفاده از Lazy Loading: بارگذاری تصاویر و ویدیوها را تا زمان نیاز به تاخیر بیندازید.
نظارت بر اسکریپت‌ های شخص ثالث: تاثیر اسکریپت‌ های خارجی را بررسی و به حداقل برسانید.
استفاده از سلکتورهای CSS بهینه: سلکتورهایی بنویسید که مرورگر سریع‌تر آن‌ ها را پردازش کند.
کاهش اندازه DOM: تعداد عناصر DOM را کم کنید تا عملکرد رندر بهبود یابد.

بهینه‌ سازی تصاویر

تصاویر را با ابزارهایی مانند ImageOptim یا TinyPNG یا compresspng یا compressjpeg فشرده کنید تا حجم فایل‌ ها کاهش یابد. از فرمت‌ های جدیدتر مثل WebP استفاده کنید که کیفیت بالا و حجم کمتری دارند. این کار زمان بارگذاری را کوتاه‌ تر می‌ کند بدون اینکه کیفیت تصویر کم شود.

فشرده‌ سازی CSS، JavaScript و HTML

با ابزارهایی مثل UglifyJS یا CSSNano، فضا های خالی، کامنت ها و کدهای غیرضروری را حذف کنید. این کار حجم فایل‌ها را کاهش داده و سرعت انتقال داده‌ ها را افزایش می‌ دهد. مطمئن بشید که فشرده‌ سازی این کدها به عملکرد کدها آسیب نرساند و کدهای ضروری را حذف نکند.

استفاده از کش مرورگر

با تنظیم هدرهای Cache-Control و Expires، مرورگر را وادار کنید تا فایل‌های استاتیک را ذخیره کند. این کار باعث می‌ شود کاربران در بازدیدهای بعدی صفحات را سریع‌ تر ببینند. منابع پرکاربرد مانند تصاویر و CSS را با تاریخ انقضای طولانی تنظیم کنید. این روش فشار روی سرور را نیز کاهش می‌ دهد.

استفاده از CDN

شبکه توزیع محتوا (CDN) فایل‌ها را در سرورهای نزدیک به کاربر ذخیره می‌ کند. این کار تاخیر شبکه را کاهش داده و سرعت بارگذاری را بهبود می‌ بخشد. سرویس هایی مثل Cloudflare گزینه‌های محبوبی هستند. CDN برای سایت‌های جهانی که کاربران آن پراکنده هستند، بسیار مفید است.

کاهش زمان پاسخ سرور

کوئری‌ های پایگاه داده را بهینه کنید، از ایندکس‌ گذاری مناسب استفاده کنید و سرورهای پرسرعت انتخاب کنید. هاستینگ باکیفیت و تنظیمات سرور مانند استفاده از PHP 8 یا Nginx می‌ توانند زمان پاسخ را کاهش دهند. از حافظه نهان (Caching) سمت سرور استفاده کنید.

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

با استفاده از Gzip یا Brotli، فایل‌ های ارسالی به مرورگر را فشرده کنید تا حجم آن‌ها کاهش یابد. این روش به‌ ویژه برای فایل‌ های متنی مانند HTML و CSS مفید است. اکثر سرورها مثل Apache و Nginx این قابلیت را به‌ راحتی فعال می‌ کنند. این کار پهنای باند مصرفی را نیز کاهش می‌ دهد.

حذف منابع مسدودکننده رندر

CSS و JavaScript را درون‌خطی کنید و فایل‌های غیرضروری را به‌ صورت ناهمگام بارگذاری کنید. این کار باعث می‌شود صفحه سریع‌تر رندر شود و کاربر زودتر محتوا را ببیند. از ابزارهایی مثل Critical CSS برای شناسایی استایل‌های ضروری استفاده کنید. این روش برای Core Web Vitals مفید است.

اولویت‌ بندی محتوای بالای صفحه

ابتدا منابعی که برای نمایش محتوای بالای صفحه لازم هستند را بارگذاری کنید. این کار باعث می‌ شود کاربر سریع‌ تر محتوای اصلی را ببیند، حتی اگر بقیه صفحه هنوز در حال بارگذاری باشد. ابزارهایی مثل Google PageSpeed Insights می‌ توانند این منابع را شناسایی کنند. این تکنیک تجربه کاربری را بهبود می‌بخشد.

کاهش ریدایرکت‌ها

ریدایرکت‌ های غیرضروری را حذف کنید، زیرا هر ریدایرکت زمان اضافی برای بارگذاری صفحه اضافه می‌کند. از URL‌های مستقیم استفاده کنید و ساختار سایت را ساده نگه دارید. اگر ریدایرکت لازم است، از نوع 301 برای سئو بهتر استفاده کنید. ابزارهای بررسی ریدایرکت مثل Screaming Frog می‌ توانند کمک‌ کننده باشند.

بارگذاری ناهمگام CSS و JavaScript

با استفاده از ویژگی‌ های async یا defer در تگ‌ های اسکریپت، بارگذاری منابع غیرحیاتی را بدون توقف رندر انجام دهید. این کار باعث می‌ شود صفحه سریع‌ تر نمایش داده شود. CSS غیرضروری را نیز به‌ صورت ناهمگام بارگذاری کنید. این روش برای سایت‌ های سنگین با اسکریپت‌ های زیاد مفید است.

بهینه‌ سازی فونت‌ های وب

از font-display: swap استفاده کنید تا متن در حین بارگذاری فونت‌ ها نمایش داده شود. فونت‌ ها را پیش‌ بارگذاری کنید و تعداد فونت‌ های سفارشی را محدود کنید. از فرمت‌های بهینه مثل WOFF2 استفاده کنید. این کار زمان رندر متن را کاهش می‌ دهد و تجربه کاربری را بهبود می‌بخشد.

استفاده از Lazy Loading

با افزودن ویژگی loading=”lazy” به تصاویر و ویدیوها، بارگذاری آن‌ ها را تا زمانی که در دید کاربر قرار گیرند به تاخیر بیندازید. این کار حجم اولیه صفحه را کاهش می‌ دهد و سرعت بارگذاری را افزایش می‌ دهد. اکثر مرورگرها این ویژگی را پشتیبانی می‌ کنند. برای ویدیوی سنگین، این تکنیک بسیار مفید است.

نظارت بر اسکریپت‌ های شخص ثالث

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

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

سلکتور های ساده و خاص (مانند ID یا کلاس) را به‌ جای سلکتورهای پیچیده استفاده کنید. سلکتورهای بهینه باعث می‌ شوند مرورگر سریع‌ تر استایل‌ها را پردازش کند. از ابزارهای بررسی CSS مثل CSS Lint برای شناسایی سلکتورهای سنگین استفاده کنید. این کار به‌ ویژه در صفحات بزرگ تاثیرگذار است.

کاهش اندازه DOM

تعداد عناصر DOM را با ساده‌سازی ساختار HTML کاهش دهید. DOM بزرگ باعث کندی رندر و اجرای جاوا اسکریپت می‌ شود. از ابزارهای توسعه‌ دهنده مرورگر برای بررسی عمق و اندازه DOM استفاده کنید. حذف عناصر غیرضروری و استفاده از ساختار تمیز سرعت رندر را افزایش می‌ دهد.

استفاده از GZIP

کدهای gzip بعنوان کش (cache) در مرورگرها عمل میکنند و باعث بالا رفتن سرعت بارگذاری سایت میشوند.نمونه کدهای gzip جمع آوری شده توسط بلوسرور در لینک زیر قرار داده شده که ابتدا باید کدهای gzip رو دانلود باز کنید و سپس محتویات این فایل (کدهارو) در فایل .htaccess هاستتون قرار بدید.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##



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

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
</IfModule>





<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>



<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# HTML
ExpiresByType text/html "access plus 2 days"
</IfModule>




<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Javascript
ExpiresByType application/javascript "access plus 1 month"
</IfModule>


<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# CSS
ExpiresByType text/css "access plus 1 month"
</IfModule>



<IfModule mod_headers.c>
# Set XSS Protection header
Header set X-XSS-Protection "1; mode=block"
</IfModule>



<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

بهینه سازی css, html , js و قالب سایت

استفاده از تعداد زیادی از Javascript باعث بالا رفتن load سایت میشه ، همچنین اگر برای قالبتون ، استایل های زیادی ایجاد کردید و فایل های css زیادی ساختید ، پیشنهاد میکنم همه رو در یک فایل واحد css قرار بدید ، چون برای هربار لود استایل ، باید درخواست های زیادی به Css ها ارسال کنه.

بعضی از قالب های وردپرس بدلیل کدنویسی نامناسب ، query های زیاد به دیتابیس ، باعث ایجاد مصرف منابع بالا میشوند که برای حل این مشکل یا باید قالب رو بهینه کنید و یا از قالب های استاندارد برای سایت استفاده کنید.

کاهش درخواست اتصال به سرور HTTP requests

تعداد بالای عناصر استفاده شده در یک صفحه ، باعث ایجاد درخواست های زیاد به سرور میشن ، برای مثلا عناصر زیادی مثل ، تصاویر ، css ، فایل های js ، و … که هم خودتون میتونید در سایت استفاده کرده باشید و یا اینکه پلاگین هایی که نصب کردید ، این تعداد عناصر رو زیاد کرده باشن. در واقع وقتی آدرس صفحه رو در مرورگر وارد میکنید ، باید این عناصر تک به تک دانلود بشن و طبیعتا هرچقدر تعداد و حجم اینها زیاد باشه ، باعث بالا رفتن زمان load سایت میشه.

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

مشاهده سایر آموزش ها:

آموزش فعال کردن Directory Browsing در IIS

فهرست تیترها