چگونه می توان وب سایت وردپرس خود را در 20 دقیقه سرعت بخشید

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

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

قبل از بهینه سازی

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

قبل از بهینه سازی

اکنون پس از حدود 20 دقیقه بهینه سازی سرعت صفحه ، همان صفحه را مشاهده می کنید:

پس از بهینه سازی

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

پس از بهینه سازی

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

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

1. افزونه های استفاده نشده را حذف کنید
2. تعویض DNS ارائه دهندگان Cloudflare
3. یک پلاگین حافظه پنهان نصب کنید
4. کد خود را کم کنید
5. ترکیب کنید CSS و پرونده های جاوا اسکریپت
6. حذف منابع مسدود کننده رندر
7. تصاویر و فیلم های پر تنبل
8. Google Fonts را بهینه کنید
9. پیش بارگیری را فعال کنید
10. استفاده از CDN
11. تصاویر خود را بهینه کنید

https://www.youtube.com/watch؟v=BrY6a-lsLp8

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

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

وب سایت ها پرونده هایی هستند که روی درایوهای سخت (سرورها) متصل به اینترنت قرار دارند. و هر دستگاهی که به اینترنت متصل است دارای یک IP آدرس (به عنوان مثال ، 123.123.12.1).

زیرا IP آدرس ها برای حفظ سخت هستند ، نام دامنه ها با آنها نقشه برداری می شوند IP آدرسها با استفاده از DNS، که مخفف Domain Name System است. شما می توانید این را به عنوان دفترچه تلفن وب بدانید. وقتی یک دامنه را در مرورگر خود تایپ می کنید ، a DNS جستجو برای یافتن سرورها اتفاق می افتد IP نشانی.

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

اگر این شما هستید ، سریعتر بروید DNS ارائه دهنده مانند ابر شکن.

برای این کار ، برای یک حساب Cloudflare رایگان ثبت نام کنید. روی «افزودن سایت» کلیک کنید ، نام دامنه خود را وارد کنید و روی دکمه کلیک کنید.

طرح رایگان را انتخاب کنید ، سپس روی “تأیید طرح” کلیک کنید.

Cloudflare اکنون به شما فرصتی می دهد تا بتوانید اطلاعات خود را مرور کنید DNS تنظیمات قبل از ادامه در صورت عدم هشدار ، ادامه کار معمولاً بی خطر است.

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

در صورت استفاده از دامنه های گوگل ، این فرایند به شرح زیر است:

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

دو نوع اصلی وجود دارد:

• ذخیره مرورگر: پرونده های “معمولی” مانند آرم ها را بر روی هارد دیسک کاربران ذخیره می کند تا در بازدیدهای مکرر مجبور به بارگیری مجدد آنها نباشند.
• ذخیره سرور: یک نسخه کاملاً ثابت و ثابت از صفحه را بر روی سرور ذخیره می کند ، بنابراین نیازی نیست هر بار که بازدید کننده جدیدی از آن درخواست می کند ، دوباره ساخته شود.

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

به دنبال گزینه رایگان هستید؟ تلاش كردن W3 کل حافظه پنهان.

Minification برای کاهش اندازه پرونده ، فضای خالی و نظرات را از کد حذف می کند. و پرونده های کوچکتر باعث بارگذاری سریعتر می شوند.

اگر از WPRocket استفاده می کنید ، کادرهای تأیید را علامت بزنید تا کوچک شوند CSS و جاوا اسکریپت در تنظیمات.

اگر از WPRocket استفاده نمی کنید ، نصب و فعال کنید بهینه سازی خودکار و همین کار را بکنید

فقط بدانید که شما همیشه باید قبل از استقرار مستقیم ، تأثیر این مورد را روی وب سایت خود آزمایش کنید. کوچک کردن اغلب می تواند منجر به خراب شدن کد شود ، مخصوصاً وقتی صحبت از Javascript باشد.

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

ترکیب این پرونده ها ممکن است سرعت را تسریع کند ، اما این به تنظیمات سرور شما بستگی دارد.

• با HTTP/1.1، CSS و پرونده های JavaScript به طور متوالی بارگیری می شوند. این بدان معناست که قبل از شروع بارگیری پرونده بعدی ، باید یک پرونده کاملاً بارگیری شود.
• با HTTP/ 2، پرونده ها همزمان بارگیری می شوند. یعنی چندتایی CSS و پرونده های جاوا اسکریپت می توانند همزمان بارگیری شوند.

اگر سرور شما استفاده می کند HTTP/1.1 ، ترکیب پرونده ها سرعت را افزایش می دهد زیرا پرونده های کمتری باید بارگیری شوند. اگر استفاده کند HTTP/ 2 ، ترکیب پرونده ها لزوماً تفاوت زیادی نخواهد داشت زیرا به هر حال پرونده ها می توانند در همان زمان بارگیری شوند.

برای دیدن سایت خود از کدام نسخه ، دامنه خود را به آن متصل کنید کلید CDNتست کننده.

اگر HTTP/ 2 پشتیبانی نمی شود ، ارزش ترکیب را دارد CSS و پرونده های جاوا اسکریپت.

برای انجام این کار در WPRocket ، کادرهای انتخاب را به “Combine files JavaScript” و “Combine” علامت بزنید CSS پرونده ها “در تنظیمات.

اگر از بهینه سازی خودکار استفاده می کنید ، دو کادر تأیید برای “جمع آوری” پرونده ها وجود دارد. فقط بدانید که این موارد گاهی اوقات باعث خراب شدن موارد موجود در سایت شما می شود ، بنابراین لازم است دوباره بررسی کنید که همه چیز همچنان فعال و یکسان است. و به یاد داشته باشید که از قبل حافظه پنهان را پاک کرده و تغییرات مربوط به پنجره ناشناس را بررسی کنید. در غیر این صورت ، ممکن است تغییرات در آنچه مشاهده می کنید منعکس نشود.

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

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

به همین دلیل ، منطقی است که منابع بارگذاری را برای محتوای “بالاتر از برابر” در اولویت قرار دهیم.

این کار را می توانید با به تعویق انداختن بارگذاری موارد غیر مهم انجام دهید CSS و پرونده های جاوا اسکریپت مورد نیاز برای محتوای “زیر برابر” تا بعدا. برای انجام این کار در WPRocket ، کادرهای “Load JavaScript deferred” و “Optimize” را علامت بزنید CSS تحویل.”

اگر از WPRocket استفاده نمی کنید ، به دو افزونه نیاز دارید: بهینه سازی خودکار و Async JavaScript.

در تنظیمات بهینه سازی خودکار ، کادر “Inline and Defer” را علامت بزنید CSS” سپس ، در تنظیمات Async JavaScript ، «فعال کردن Async JavaScript.

اگر قبلاً در PageSpeed ​​Insights با موضوع “از بین بردن منابع ممانعت از ارائه” روبرو شده باشید ، این مشکل معمولاً برطرف می شود.

بارگذاری تنبل با به تعویق انداختن بارگذاری تصاویر و فیلم ها تا زمانی که روی صفحه نمایان شوند ، سرعت صفحه را بهبود می بخشد. اگر از وردپرس 5.5+ استفاده می کنید ، بارگذاری تنبل تصویر بسیار کم است به طور پیش فرض فعال شده است، اما برای فیلم نیست.

اگر از WPRocket استفاده می کنید ، با علامت زدن در کادر “Enable for iframes and videos” در زیر تنظیمات LazyLoad این مشکل را حل کنید.

اگر از WPRocket استفاده نمی کنید ، رایگان است بار تنبل برای فیلم ها پلاگین تقریباً همان کار را انجام می دهد.

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

اگر از WPRocket استفاده می کنید ، به طور خودکار درخواست های Google Fonts را بهینه می کند. در غیر این صورت، صفحه نمایش قلم های گوگل را عوض کنید یک نقطه شروع خوب است.

پیش بارگیری به شما امکان می دهد منابع ضروری را تعریف کنید ، بنابراین مرورگرها اولویت بارگیری پرونده ها را می دانند.

به عنوان مثال ، بگذارید بگوییم کد شما به این شکل است:

<html> 
<head> 
<script type=”text/javascript” src=”somefile.js”></script>
<link rel=”stylesheet” href=”/style.css”>
</head>
<body>
Content
</body>
</html> 

بر اساس این کد ، ابتدا فایل JavaScript به دلیل سلسله مراتب بارگیری می شود. این ایده آل نیست زیرا CSS پرونده تقریباً مطمئناً مهمتر از کد JavaScript است.

ساده ترین راه حل این است که یک خط کد دیگر اضافه کنید ، مانند این:

<link rel="preload" href="https://ahrefs.com/style.css" as="style">

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

با ویرایش کد می توانید ویژگی های پیش بارگیری را به صورت دستی اضافه کنید ، اما این می تواند کثیف و گیج کننده شود ، مگر اینکه بدانید چه کاری انجام می دهید. نصب WPRocket بسیار ساده تر است ، که این کار را به صورت خودکار خارج از جعبه انجام می دهد.

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

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

تعداد زیادی وجود دارد CNS ارائه دهندگان ، بنابراین تمام آنچه شما باید انجام دهید این است که یکی را انتخاب کنید ، آن را در WPRocket فعال کنید و وارد کنید CNAME.

Lazy-loading بسیاری از مشکلات مربوط به تصاویر را برطرف می کند اما هیچ کمکی به تصاویر بارگیری شده در بالای سطح نمی کند. هرچه بزرگتر باشند ، بر زمان بارگیری تأثیر منفی می گذارند.

برای حل این مسئله ، تصاویر خود را با یک پلاگین مانند فشرده کنید پیکسل کوتاه. فقط آن را نصب کنید ، آن را فعال کنید ، به تنظیمات بروید ، خود را وارد کنید API را کلیک کنید ، “ذخیره و رفتن به فرآیند انبوه” را کلیک کنید ، سپس “شروع مجدد بهینه سازی” را کلیک کنید.

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

نتایج

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

در اینجا آمار قبل و بعد از ارسال برای من در PageSpeed ​​Insights گوگل وجود دارد:

قبل از بهینه سازی

پس از بهینه سازی

و در اینجا همان GTMetrix وجود دارد:

قبل از بهینه سازی

پس از بهینه سازی

می بینید که صفحه قبلاً در 5.9 ثانیه با اندازه صفحه 1.89mb و 67 درخواست به طور کامل بارگیری شده است. پس از بهینه سازی ها ، هر سه معیار کاهش دارند. اندازه صفحه 695 کیلوبایت است ، زمان بارگیری کامل 4 ثانیه است و تعداد درخواستها تقریباً 50٪ کاهش یافته است.

اگر همه صفحات وب سایت را در Ahrefs بررسی کنیم سایت حسابرسی، در حدود 40٪ بهبود در زمان بارگیری در صدک 95 و 95 مشاهده می کنیم.

افکار نهایی

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

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

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

آیا ما از این راهنما چیز مهمی را از دست داده ایم؟ پینگ من در توییتر.