همه می‌دانند که سرعت صفحه مهم است. این یک عامل رتبه‌بندی تأییدشده‌ی گوگل در دسکتاپ و موبایل است، بر تجربه‌ی کاربری تأثیر می‌گذارد و می‌تواند مستقیماً بر درآمد شما اثر بگذارد.

اما وب‌سایت‌های وردپرسی کند یک مشکل رایج هستند.

در اینجا امتیاز موبایل یکی از صفحات من در PageSpeed Insights آورده شده است.

اگر کل وب‌سایت را از طریق Site Audit ابزار Ahrefs اجرا کنیم—که زمان بارگذاری تمام صفحات را نشان می‌دهد—می‌بینیم که این تنها صفحه‌ای نیست که کند بارگذاری می‌شود. هیچ‌کدام از صفحات با سرعت بالا بارگذاری نمی‌شوند و میانگین زمان بارگذاری ۵۷۰ میلی‌ثانیه است.

 

حالا این همان صفحه بعد از حدود ۲۰ دقیقه بهینه‌سازی سرعت صفحه است:

 

و بقیه صفحات در Site Audit:

 

تفاوت آن زمین تا آسمان است. امتیاز PageSpeed Insights تقریباً بی‌نقص شده و هر صفحه با سرعت بالایی بارگذاری می‌شود.

در این راهنما، دقیقاً به شما نشان می‌دهم که چگونه این کار را در چند مرحله ساده و آسان انجام دادم:

• حذف افزونه‌های غیرضروری

• تغییر ارائه‌دهنده DNS به Cloudflare

• نصب یک افزونه کشینگ

• کوچک‌سازی کدها

• ترکیب فایل‌های CSS و JavaScript

• حذف منابعی که مانع رندر شدن صفحه می‌شوند

• بارگذاری تنبل تصاویر و ویدیوها

• بهینه‌سازی فونت‌های گوگل

• فعال‌سازی پیش‌بارگذاری

• استفاده از یک CDN

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

·         مرحله ۱: حذف افزونه‌های غیرضروری

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

·         فقط هنگام انجام این کار احتیاط کنید. اگر مطمئن نیستید که افزونه‌ای لازم است یا نه، آن را نگه دارید.

·         مرحله ۲: تغییر ارائه‌دهنده DNS به Cloudflare

·         وب‌سایت‌ها مجموعه‌ای از فایل‌هایی هستند که روی هارددیسک‌های متصل به اینترنت (سرورها) قرار دارند. هر دستگاهی که به اینترنت متصل باشد، یک آدرس IP (مانند 123.123.12.1) دارد.

·         از آنجایی که به خاطر سپردن آدرس‌های IP دشوار است، نام دامنه‌ها از طریق سیستم DNS (سیستم نام دامنه) به آدرس‌های IP متصل می‌شوند. DNS را می‌توان به‌عنوان دفترچه تلفن اینترنت در نظر گرفت. زمانی که یک دامنه را در مرورگر خود تایپ می‌کنید، یک جستجوی DNS انجام می‌شود تا آدرس IP سرور پیدا شود.

·         اما نکته اینجاست: بیشتر افراد از ارائه‌دهندگان DNS رایگانی که توسط ثبت‌کننده دامنه‌شان ارائه می‌شود، استفاده می‌کنند که معمولاً کند هستند.

·         اگر شما هم از این دسته هستید، به یک ارائه‌دهنده DNS سریع‌تر مانند Cloudflare تغییر دهید.

·         برای انجام این کار، یک حساب کاربری رایگان در Cloudflare ایجاد کنید. سپس روی «Add a site» کلیک کنید، نام دامنه خود را وارد کنید و دکمه تأیید را بزنید.

 

طرح رایگان را انتخاب کنید، سپس روی «Confirm plan» کلیک کنید.

Cloudflare اکنون به شما این امکان را می‌دهد که قبل از ادامه، تنظیمات DNS خود را بررسی کنید. اگر هیچ هشداری وجود نداشته باشد، معمولاً ادامه دادن ایمن است.

اکنون تنها کاری که باقی مانده، تغییر نیم‌سرورها (Nameservers) در ثبت‌کننده دامنه شما است. روش انجام این کار بین ثبت‌کنندگان دامنه متفاوت است، بنابراین اگر مطمئن نیستید، از پشتیبانی آن‌ها کمک بگیرید.

اگر از Google Domainsاستفاده می‌کنید، فرآیند به این صورت است:

 

مرحله ۳: نصب یک افزونه کشینگ

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

دو نوع اصلی کشینگ وجود دارد:

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

2. کشینگ سرور: یک نسخه‌ی کاملاً ساخته‌شده و استاتیک از صفحه را روی سرور ذخیره می‌کند تا هنگام درخواست هر بازدیدکننده جدید، نیازی به بازسازی صفحه نباشد.

برای فعال کردن کشینگ به‌سادگی می‌توانید از WP Rocketاستفاده کنید. کافی است آن را خریداری، نصب و فعال کنید. کشینگ پایه (هم سرور و هم مرورگر) به‌صورت پیش‌فرض فعال است.

اگر سایت شما واکنش‌گرا (ریسپانسیو) است، به تنظیمات کش بروید و گزینه فعال کردن کشینگ برای دستگاه‌های موبایل را نیز تیک بزنید.

 

مرحله ۴: فشرده‌سازی کد (Minify)

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

اگر از WP Rocketاستفاده می‌کنید، در تنظیمات، گزینه‌های فشرده‌سازی CSSو JavaScriptرا فعال کنید.

 

اگر از WP Rocketاستفاده نمی‌کنید، افزونه Autoptimizeرا نصب و فعال کنید و همان مراحل را انجام دهید.

📌نکته مهم:
همیشه قبل از اعمال تغییرات در سایت اصلی، این تنظیمات را آزمایش کنید.
Minify کردن (فشرده‌سازی کدها) گاهی اوقات می‌تواند باعث خراب شدن کدها شود، مخصوصاً در مورد JavaScript.

مرحله ۵: ترکیب فایل‌های CSS و JavaScript

اکثر وب‌سایت‌های وردپرسی شامل چندین فایل CSS و JavaScriptهستند. برخی از این فایل‌ها مربوط به قالب، برخی دیگر مربوط به افزونه‌ها و برخی نیز فایل‌های سفارشی هستند.

ترکیب این فایل‌ها ممکن است سرعت سایت را افزایش دهد، اما این موضوع به نوع سرور شما بستگی دارد:

🔹در HTTP/1.1:
فایل‌های CSS و JavaScript به‌صورت متوالی بارگذاری می‌شوند؛ یعنی یک فایل باید کاملاً بارگذاری شود تا فایل بعدی شروع به بارگذاری کند.
✅در این حالت، ترکیب فایل‌ها می‌تواند سرعت را افزایش دهد.

🔹در HTTP/2:
فایل‌ها هم‌زمان و به‌صورت موازی بارگذاری می‌شوند؛ یعنی چندین فایل می‌توانند همزمان شروع به بارگذاری کنند.
❌در این حالت، ترکیب فایل‌ها تأثیر زیادی بر سرعت سایت نخواهد داشت.

💡چگونه بفهمیم سایت ما از HTTP/1.1 یا HTTP/2 استفاده می‌کند؟
🔍برای بررسی این موضوع، دامنه سایت خود را در ابزار "KeyCDN’s tester" وارد کنید.

اگر سرور شما از HTTP/2 پشتیبانی نمی‌کند، ترکیب فایل‌های CSS و JavaScript ارزشمند خواهد بود و می‌تواند سرعت بارگذاری سایت را افزایش دهد.

✅در WP Rocketبرای انجام این کار:

1. وارد تنظیمات افزونه شوید.

2. گزینه "Combine JavaScript files"را فعال کنید.

3. گزینه "Combine CSS files"را فعال کنید.

اگر از Autoptimizeاستفاده می‌کنید، دو گزینه برای "aggregate"فایل‌ها وجود دارد. با این حال، این کار گاهی ممکن است باعث ایجاد مشکلاتی در سایت شما شود. بنابراین، بعد از فعال‌سازی این گزینه‌ها، حتماً بررسی کنید که سایت همچنان به درستی نمایش داده می‌شود و عملکرد آن مختل نشده است.

🔹نکته:قبل از تست تغییرات، حتماً کش را پاک کنید و سایت را در پنجره ناشناس (Incognito)بررسی کنید تا مطمئن شوید که تغییرات اعمال شده است.

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

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

🔹چرا این مهم است؟
برای بهبود سرعت، بهتر است منابع مورد نیاز برای محتوای بالای صفحه ("Above the fold") را در اولویت قرار دهیم و بارگذاری منابع غیرضروری (مانند CSS و JavaScript مربوط به محتوای پایین صفحه) را به تعویق بیندازیم.

✅در WP Rocket:

1. گزینه "Load JavaScript deferred"را فعال کنید.

2. گزینه "Optimize CSS delivery"را فعال کنید.

 

اگر از WP Rocketاستفاده نمی‌کنید، به دو افزونه نیاز خواهید داشت: Autoptimize و Async JavaScript.

• در تنظیمات Autoptimize، گزینه "Inline and Defer CSS"را فعال کنید.

• سپس، در تنظیمات Async JavaScript، گزینه "Enable Async JavaScript"را روشن کنید.

اگر قبلاً در PageSpeed Insightsبا مشکل "Eliminate render-blocking resources"مواجه شده‌اید، این تنظیمات معمولاً آن را برطرف می‌کنند.

 

مرحله ۷: بارگذاری تنبل (Lazy-load) تصاویر و ویدئوها

Lazy-loadingسرعت بارگذاری صفحه را بهبود می‌بخشد، زیرا تصاویر و ویدئوها فقط زمانی بارگذاری می‌شوند که در صفحه قابل مشاهده باشند.

• اگر از وردپرس ۵.۵+استفاده می‌کنید، Lazy-loadingتصاویر به‌صورت پیش‌فرض فعال است، اما این قابلیت برای ویدئوها اعمال نمی‌شود.

• اگر از WP Rocketاستفاده می‌کنید، برای حل این مشکل، در تنظیمات LazyLoadگزینه "Enable for iframes and videos"را فعال کنید.

 

اگر از WP Rocketاستفاده نمی‌کنید، افزونه رایگان Lazy Load for Videosتقریباً همان کار را انجام می‌دهد.

مرحله ۸: بهینه‌سازی فونت‌های Google

بسیاری از قالب‌های وردپرس از Google Fontsاستفاده می‌کنند، و این فونت‌ها هربار که کسی از وب‌سایت شما بازدید می‌کند، باید از سرورهای گوگل دانلود شوند. این فرآیند می‌تواند زمان‌بر باشد زیرا سرور شما مجبور است درخواست HTTP ارسال کند، یک فایل CSS را دانلود کند و سپس فونت را از مسیری که در استایل‌شیت مشخص شده است، بارگیری کند. این روند برای هر فونتی که در صفحه استفاده می‌شود تکرار می‌شود.

اگر از WP Rocketاستفاده کنید، این افزونه درخواست‌های مربوط به Google Fontsرا به‌صورت خودکار بهینه‌سازی می‌کند. در غیر این صورت، افزونه Swap Google Fonts Displayیک گزینه مناسب برای شروع است.

مرحله ۹: فعال‌سازی Preloading

پیش‌بارگذاری (Preloading)به شما اجازه می‌دهد منابع ضروری را مشخص کنید تا مرورگر بداند کدام فایل‌ها را با اولویت بیشتری بارگیری کند.

مرحله ۱۰: استفاده از CDN

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

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

ارائه‌دهندگان مختلفی برای CDNوجود دارند. تنها کاری که باید انجام دهید، این است که یکی از آن‌ها را انتخاب کنید، آن را در WP Rocketفعال کنید و مقدار CNAMEمربوطه را وارد نمایید.

 

مرحله ۱۱: بهینه‌سازی تصاویر

بارگذاری تنبل (Lazy-loading)بسیاری از مشکلات مربوط به تصاویر را حل می‌کند، اما کمکی به تصاویری که در بخش بالای صفحه (Above the Fold)بارگذاری می‌شوند، نمی‌کند. هرچه این تصاویر بزرگ‌تر باشند، تأثیر منفی بیشتری بر سرعت بارگذاری سایت خواهند داشت.

برای حل این مشکل، تصاویر خود را با یک افزونه فشرده‌سازی مانند ShortPixelبهینه کنید. برای این کار:

1. افزونه ShortPixelرا نصب و فعال کنید.

2. به تنظیمات افزونه بروید.

3. کلید APIخود را وارد کنید.

4. روی گزینه "Save and Go to Bulk Process"کلیک کنید.

5. سپس روی "Restart optimizing"کلیک کنید تا فرآیند فشرده‌سازی تصاویر آغاز شود.

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

 

نتایج
بیایید ببینیم این بهینه‌سازی‌ها چگونه بر سرعت بارگذاری صفحه ما تأثیر گذاشته‌اند، بر اساس داده‌های چند ابزار محبوب.

در اینجا آمار قبل و بعد از اجرای این تغییرات در PageSpeed Insightsگوگل آورده شده است:

و در اینجا همان آمار از GTMetrixآورده شده است:

می‌بینید که صفحه قبلاً در 5.9 ثانیه به‌طور کامل بارگذاری می‌شد، با حجم 1.89 مگابایت و 67 درخواست. پس از بهینه‌سازی‌ها، هر سه معیار کاهش یافته‌اند:

• حجم صفحه به 695 کیلوبایت رسیده است،

• زمان بارگذاری کامل به 4 ثانیه کاهش یافته،

• تعداد درخواست‌ها تقریباً 50٪ کمتر شده است.

اگر تمام صفحات وب‌سایت را در Site Auditابزار Ahrefsبررسی کنیم، می‌بینیم که به‌طور میانگین زمان بارگذاری و همچنین زمان بارگذاری در صدک ۹۵، حدود ۴۰٪بهبود داشته است.

 

نکته پایانی

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

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

منبع: Source