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

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

مقدمه

کاربران اینترنت تحمل زیادی برای در انتظار ماندن بارگذاری صفحه اینترنتی ندارند. ما بر روی لینکی کلیک می کنیم و سپس یک، دو و نهایتا سه ثانیه منتظر می مانیم و تمام! بر اساس آمار گوگل، 50 درصد از کابران توقع دارند که یک سایت موبایلی در عرض دو ثانیه بارگذاری شود و 53 درصد از کاربران نیز اگر زمان بارگذاری بیش از 3 ثانیه طول بکشد صفحه را می بندند. این مدت، زمان بسیار اندکی است. اگر فرض بگیریم که میانگین زمان بارگذاری سایتی در دستگاه موبایلی 19 ثانیه باشد ( در شبکه های 3G ). بارگذاری صفحات در رایانه ها سریعتر و میانگین زمان آن 5 ثانیه است. با این حال بازهم مدت زمان بسیار طولانی ای است.
معیار قرار دادن سرعت بارگذاری وبسایت روی نسخه های دسکتاپ دیگر درست نیست. امروزه بیشتر بازدید از سایت‌ها نیز از طریق گوشی‌های هوشمند صورت می گیرد. در این مقاله ما نگاه کاملی به بیشترین فناوری های به روز برای ارتقای سرعت سایت‌های وردپرس خواهیم داشت. با راهنمایی های این مقاله قادر خواهید بود سرعت سایت وردپرس را افزایش داده، زمان بارگذاری صفحات در موبایل در رایانه را نیز به مقدار قابل توجهی کاهش داده و با کاربران خود بیشتر ارتباط بگیرید.
اگر شما یک سایت وردپرس ندارید، باز هم این مطلب را نادیده نگیرید. بسیاری از فنون افزایش دهنده سرعت در این راهنما می تواند هر نوع وب سایتی را در بر بگیرد.
اگر سایت شما با هدف کسب درآمد ساخته شده باشد، خواه یک فروشگاه آنلاین باشد یا خدمات تجاری آنلاین/آفلاین ارائه دهد، از دست دادن یک مشتری بالقوه اتفاق خوشایندی نخواهد بود. یعنی اساساَ نمی‌توانید در حد انتظارتان درآمد داشته باشید. بهبود سرعت صفحه وبتان می‌تواند تأثیر مثبتی بر درآمدتان داشته باشد.
به‌عنوان صاحب یک سایت یا توسعه دهنده آن، ما می خواهیم که بازدیدکنندگان بهترین تجربه های اینترنتی خود را با ما داشته باشند. ما زیباترین سایت‌ها را با بهترین عملکردها ایجاد می کنیم؛ اما معمولاً اهمیت سرعت وب سایت را فراموش می کنیم. یک وب سایت سریع اعتماد بازدیدکننده را جلب می‌کند، شانس طولانی تر کردن زمان بازدید کاربر را افزایش می دهد و به همین ترتیب شانس بیشتر هزینه کردن در سایت نیز افزایش می یابد. از سوی دیگر، اگر سرعت سایت ما پایین باشد، احتمالاَ بازدیدکننده صفحه را قبل از بارگذاری ببندد و حتی سایت را نبیند و پیشنهادات فوق العاده از طرف سایت را هم از دست بدهد.
اگر دلایل بالا به اندازه کافی قانع کننده نبود، یک دلیل دیگر نیز می‌توان آورد و آن اینکه گوگل و دیگر موتورهای جستجوگر نشان داده اند که اگر سرعت وب سایت پایینی داشته باشید، رتبه‌بندی آن نیز در جستجوها پایین خواهد آمد و بازدیدکنندگان کمتری را جذب خواهید کرد. بنابراین، داشتن یک وب سایت با سرعت بالا بدین معنی است که گوگل شما را بیشتر دوست خواهد داشت و این اتفاق می‌تواند رتبه‌بندی سایت را به صورت چشمگیری ارتقا دهد.
البته، زمان بارگذاری به عوامل دیگری نیز بستگی دارد، عواملی مانند سرعت اینترنت کاربر، موقعیت مکانی او و سبکی یا سنگینی سایت. ما در رابطه با میزان سرعت اینترنت کاربر کاری نمی‌توانیم انجام دهیم، اما در مورد بقیه موارد می‌توانیم تجربیات خود را در این زمینه بهتر کنیم. هدف ما در این راهنما این است که راه های افزایش سرعت وردپرس را برای سریع تر و سبک تر کردن سایت ارائه دهیم.

مبانی

برای اینکه سرعت وب سایت خود را تا جایی که امکان دارد افزایش دهید، باید آن را بر روی پایه های محکمی بنا نهید. درست مثل ساختن خانه، شما خانه را بر روی شن نمی سازید تا از همان اول با مشکل مواجه شوید. سایت نیز باید بر روی پایه های محکمی ساخته شود تا برای مدت مدیدی خوب و بدون مشکل کار کند. مهمترین زیربناها عبارت‌اند از:

• میزبانی وب
• قالب وردپرس
• پلاگین های وردپرس

میزبانی وب وردپرس

میزبانی وب بنادی ترین کار سایت وردپرس شماست، بنابراین مهمترین مؤلفه ای است که نباید نادیده گرفته شود، حتی اگر از قبل آن را تهیه کرده اید؛ می‌توانید میزبان را توسعه داده و بهینه کنید. تغییر به یک ارائه دهنده میزبانی وب بهتر، سرعت سایت شما را تا چند ثانیه افزایش خواهد داد.

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

میزبانی وب اشتراکی

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

یک پیتزای بزرگ را تصور کنید که هر وب سایت یک تکه بسیار کوچکی از آن است. اما از آنجا که سایت شما بازدیدکننده های بسیاری دارد، شما پیتزای بیشتری نیاز دارید چون وب سایتتان گرسنه است اما پیتزای بیشتری در کار نیست چرا که سایت‌های دیگر نیز گرسنه اند!

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

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

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

میزبانی وب مدیریت شده

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

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

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

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

VPS یا سروِرهای اختصاصی

اگر همچنان مثال پیتزا را بخواهیم مبنای مقایسه قرار دهیم، با VPS (سرور اختصاصی مجازی) می‌توانید چندین قطعه از پیتزا را داشته باشید، نه همه آن را و با سرور اختاصی می‌توانید تمام پیتزا را داشته باشید.

بدین معنی که، با سروِر اختصاصی شما بر روی کل سرور به همراه همه منابع آن کنترل دارید و با VPS بخشی از سرور را در اختیار دارید، چرا که هنوز بخشی از آن را با دیگران سهیم هستید. به این ترتیب هنگام بهینه‌سازی سرعت وردپرس، با دسترسی کامل شما به همه تنظیمات و فضاها چه در سرور اختصاصی و چه در VPS، دیگر سرور هیچ محدودیتی نخواهد داشت. در این حالت، شما دقیقا می دانید که چه مقدار منابع در دسترس دارید و می‌توانید به دلخواه خود آن را پیکره بندی کنید. شما حتی می‌توانید ویژگی های جدیدی بر روی سرور اجرا کنید که شاید سال ها طول بکشد تا پشتیبآن‌های میزبانی وب بتوانند آن را پشتیبانی کنند.

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

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

بهینه‌سازی وب سایت که در حال حاضر توسط هر شرکت میزبانی وب منصفی پیشنهاد می شود، این است که ورژن PHP را به نسخه 7.x ارتقا دهید. اگر سایت وردپرسی شما با PHP نسخه پایین تر از 7 مانند 5.6 یا حتی قدیمی تر اجرا می شود بنابراین با پشتیبانی هاست تماس حاصل کرده و از او بخواهید آن را به جدیدترین نسخه ارتقا دهد. اگر آن‌ها PHP نسخه 7.x را داشته باشند، باید این کار را انجام دهند اما اگر آن‌ها نسخه جدید را نداشته باشند بهتر است آن شرکت را رها کنید.  PHP7 در مقایسه با نسخه های قدیمی تر، در سرعت و اجرا بسیار بهتر و استفاده از آن بسیار ساده تر است.

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

قالب وردپرس

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

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

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

پلاگین های وردپرس

یک سؤالی همیشه در ذهن به وجود می آید: « چه مقدار پلاگین، اضافی و زیاد است؟» پاسخ این است که مشکل عموماً در تعداد پلاگین های وردپرس نیست بلکه در کیفیت کدها و تأثیری است که آن‌ها بر روی سیستم میگذارند، است. ممکن است تعداد پلاگین های فعال سایتتان بالای 50 باشد، اما با کدهای مناسب و اشغال حجم پایین، و سرعت سایت نیز خوب باشد. از سوی دیگر، ممکن است تنها 5 پلاگین فعال داشته باشید و یکی از آن‌ها می‌تواند باعث استفاده یاد از منابع  و در نتیجه باعث پایین آمدن سرعت وردپرس شود.

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

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

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

گام های بهینه‌سازی سرعت صفحه وردپرسی

قبل از شروع صحبت در مورد بهینه‌سازی، می خواهم مواردی را ذکر کنم:

اول اینکه یک پشتیبان گیری یا بکاپ از سایت وردپرسی خود ایجاد کنید. ثانیاً، به شما هشدار می دهم که توقع امتیاز 100 از 100 سایت تان را با ابزار page speed tools نداشته باشید. به دنبال امتیاز 100 از 100 بودن، نه تنها ایده جالبی نیست بلکه حتی در برخی سایت‌ها عملی هم نیست و بستگی به این دارد که سایت شما چه نوع محتوایی را نمایش می دهد. اگر سایتی تنها متنی کوتاه با یک عکس باشد، واضح است که سرعت سایت نیز ممکن است به بالاترین امتیاز برسد. اما اگر سایتی با صفحه ای طولانی و کلی محتوای چندرسانه ای و دیگر متعلقات داشته باشید، روشن است که امتیاز 100 برای سایت شما ممکن نیست و بهتر است به دنبال آن نیز نباشید.

چرا تلاش برای رسیدن به امتیاز 100 از 100 کار درستی نیست؟ زیرا اگر شما همه دستور العمل هایی که سایت page speed tools به شما می دهد را انجام دهید، سایت ممکن است به درستی کار نکند. اگر آدرس تمام فایل های JS و CSS را به پایین صفحه انتقال دهید، پدیده CSS flashing رخ خواهد داد و این اتفاق برای کدهای JS (جاوا اسکریپت) نیز خواهد افتاد و باعث می شود تا بعد از اجرا شدن کدهای جاوا اسکریپت، عناصر صفحه تغییر پیدا کند.

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

برای نمایش سرعت صفحه وردپرسی، ما از هاست اشتراکی و Medical WordPress theme استفاده می کنیم. بله می دانم قبلا عرض کردم از میزبانی وب اشتراکی استفاده نکنید. اما کم کم خواهیم فهمید که قابلیت ها و محدودیت های هاست اشتراکی چیست. به علاوه، این سایت فقط ابزار سنجش سرعت بهینه شده صفحه نتی است نه یک سایت وردپرسی کسب و کار.

من آخرین نسخه از وردپرس، MedicPress theme و همه پلاگین های پیشنهادی را نصب کرده و محتوای پیش نمایشی را وارد کردم. این  شروع سنجش سایت ما می باشد.

ابزار تست سرعت سایت

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

ابزارها را اجرا کنید ( حداقل یکی از آن‌ها را ) و بعد از انجام هر کدام از روش های بهبود سرعت، سایت را دوباره توسط این ابزارها کنترل و تست کنید.

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

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

• Google PageSpeed Insight
• GTmetrix
• Pingdom Website Speed Test
• WebPage Test

ابزارهای دیگری هم وجود دارند اما این‌ها پرطرفدارترین هستند، بنابراین به این‌ها خواهیم پرداخت.

Google PageSpeed Insight

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

اگر شما هر تصویر یا فایل منابع (JS,CSS) پردازش نشده و بهینه نشده ای داشته باشید. فایل زیپی با همان محتواهای بهینه شده ای تولید خواهد شد که می‌توانید در سرور خود جایگزین کنید. بعدا به این مبحث نیز پرداخت خواهد شد اما همین مقدار بدانید که این ابزار شما را در این امر یاری خواهد کرد.

Google PageSpeed Insight مانند دیگر ابزار دارای جزئیات بسیار نیست، اما نقطه شروع خوبی است که می‌تواند همه جنبه های ارتقای سرعت سایت را در برگیرد. در این برنامه، گام هایی که می‌تواند بیشترین توسعه را به سایت شما بدهد؛ لیست شده است.

لیستی از توصیه ها برای بهبود سرعت عبارت‌اند از:

• فعال کردن فشرده سازی (منابع فشرده سازی با Gzip یا deflate)
• بهینه‌سازی تصاویر
• کاهش زمان واکنش سرور
• حذف مسدود کننده اجرای جاوا اسکریپت و CSS در نیمه فوقانی صفحه
• کوچک سازی جاوا اسکریپت

GTmetrix

این ابزار به شما اطلاعات جزئی تری در مورد سایت می دهد. جزئیات هر عنصر ارتقا دهنده ای را لیست می‌کند و امتیازی بین 0 تا 100 به آن می دهد. این لیست بر اساس میزان اهمیت رتبه‌بندی شده است. بنابراین اگر شما طبق مراحل پیش بروید در مسیر خوبی برای افزایش سرعت سایت وردپرسی قرار خواهید گرفت.

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

من GTmetrix را در موقعیت ونکوور کانادا اجرا کردم، و امتیاز سرعت سایت 77 و امتیاز YSlow (سرعت بر اساس استانداردهای یاهو) 71 بود. همچنین با این ابزار، اطلاعات مفیدی را به دست آوردم:

• Fully loaded time (زمان بارگذاری کامل سایت به ثانیه): 1s
• Total page size ( حجم اصلی صفحه سایت که مورد بررسی قرار گرفته است): 803KB
• Requests (تعداد درخواست های ارسالی به سرور برای بارگذاری قسمت های مختلف سایت): 54

سنجش سرعت وبسایت Pingdom

Pingdom ابزار آنلاین دیگری برای نمایش اطلاعات بهینه شده با کمی تفاوت است. در این ابزار شما همان داده های اصلی GTmetrix را در اینجا نیز می بینید با این تفاوت که در Pingdom شما می‌توانید سرعت صفحه را در 4 نقطه مکانی ارزیابی کنید. نتایج هر منطقه با یکدیگر متفاوت است که نشان می دهد موقعت فیزیکی سرور اهمیت دارد؛ اما می‌توان با ابزار CDN یا شبکه تحویل محتوا سرعت را تقویت کرد. ما از Pingdom ارزیابی زمان بارگذاری صفحه در 4 منطقه جغرافیایی استفاده می کنیم زیرا این ابزار بسیار سریع تر از ابزارهای مشابه است.

Pingdom جدول هایی جالب در اندازه های جدول محتوا ارائه می دهد که در آن‌ها نیز گزارش های آبشاری ارائه می شود.

WebPage Test

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

ابزار خوبی است و می‌تواند برای هر اجرایی در سایت یک تحلیل آبشاری ارائه دهد و یک درجه بندی از A تا F را به فاکتورهای بهینه‌سازی سرعت بدهد:

• اولین زمان بایت (زمان ارسال پاسخ)
• حفظ اتصال فعال
• فشرده سازی انتقال (gzip)
• فشرده سازی تصاویر
• محتوای استاتیک کش
• استفاده مناسب از CDN

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

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

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

بارگذاری یک تصویر پردازش نشده برای یک فضای کوچک در وب سایت اشتباه بسیار بزرگی است. تصور کنید که یک فضای تصویر در اندازه 600×400 پیکسل را در سایت خود دارید با این حال تصویری که روی آن بارگذاری می کنید اندازه ای در حدود 1920×1080 پیکسل باشد، اگر چنین اشتباهی را دو بار تکرار کنید سرعت سایت به شدت افت خواهد کرد.

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

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

فرمت صحیح تصویر را انتخاب کنید: بهترین فرمت های تصویری برای استفاده آنلاین JPEG و PNG هستند. بهتر از روش زیر استفاده کنید:

• فرمت jpg برای عکس ها و تصاویر های با نشان‌های حرارتی و دامنه ای از میلیون ها رنگ
• فرمت png برای عکس هایی با رنگ های محدود (لوگوها) و تصاویر شفاف

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

عکس را فشرده کنید: این کار را می‌توان توسط ابزارهای آنلاین یا پلاگین وردپرس انجام داد:

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

پلاگین فشرده سازی عکس وردپرس: ShortPixel Image Optimizer، پلاگین مناسبی برای این کار است. بعد از نصب پلاگین، درخواست یک کلید API برای استفاده از پلاگین را نمایید (یک پروسه بسیار ساده). تنظیمات پیش فرض پلاگین بسیار عالی است و نیازی نیست که شما کار خاصی انجام دهید. کافی است به قسمت Media -> Bulk ShortPixel  رفته و بر روی دکمه Start Optimizing کلیک کنید.

Google PageSpeed Optimized Image

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

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

دیگر توسعه دهنده های تصویر

Lazy Loading Image

Lazy loading (لود تنبل) ، فنی برای بارگذاری تصاویری است که به صورت غیر همزمان بارگذاری می شوند. تصاویری که در قسمت فوقانی صفحه هستند هنگام بالا آمدن صفحه سایت باز نمی شوند و تنها زمانی که به آن‌ها نیاز باشد بارگذاری می شوند.  بدین معنی که هنگام ورود به یک صفحه وب تنها اطلاعات قابل مشاهده بارگذاری می شوند و بقیه اطلاعاتی که در پایین صفحه وجود دارند، بعد از اسکرول کردن شروع به بارگذاری کردن می کنند.

لود تنبل می‌تواند توسط کدهای سفارشی و یا با پلاگین وردپرسی اجرا شود. می‌توان از پلاگین کش WP Rocket نیز استفاده کرد که قابلیت لود تنبل را نیز در خود دارد.

Image Hotlinking (دزدی پهنای باند)

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

راه حلی که ارائه می شود بهینه‌سازی مستقیم سرعت نیست بلکه بیشتر بهینه‌سازی سرور است. شما می‌توانید مشکل هاتلینکینگ را با چند کد در فایل .htaccess حل کنید و حتی پا را فراتر نهید و تصویر دزدیده شده را با تصویر دیگری جایگزین کنید که این کار می‌تواند در فایل .htaccess انجام شود. فایل .htaccess را بر روی سرور باز کرده و این کد را به آن اضافه کنید. آدرس وب سایت خود با دامین را با هر دامین دیگری که می خواهید به عکس هایش دسترسی پیدا کند جایگزین کنید و در قسمت http://replacing-stolen-image-url-goes-here.jpg  کد تصویر مورد نظر را با URL  تصویری که می خواهید به جای تصویر دزدیده شده قرار دهید، جایگزین نمایید.

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC]

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]

RewriteRule \.(jpg|jpeg|png|gif)$ http://replacing-stolen-image-url-goes-here.jpg [NC,R,L]

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

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC]

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]

RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]

حافظه کش

زمانی که یک بازدیدکننده، سایت شما را از طریق مرورگر باز می‌کند، سرور سایت همه منابع اعم از HTML، تصاویر، JS ، CSS و غیره را برای بارگذاری شدن سایت دانلود می‌کند. حالا اگر همان کاربر صفحه دیگری از سایت شما را باز کند، فایل های JS و CSS همانجا ثابت می مانند، اما اگر تنظیمات سرور مناسبی نداشته باشید، مرورگر ممکن است دوباره آن‌ها را از سرور دانلود کند.

یک کش هدرز و تاریخ انقضا باید بر روی سرور باشد تا به منابع آماری (JS ، CSS و دیگر فایل ها) اجازه دهد تا در حافظه کش ذخیره گردد. این کار به صورت قابل توجهی سرعت اجرا را بالا می برد و باعث می شود تا بازدیدکننده ها بیش از یک صفحه از سایت شما را باز کنند.

معمولاَ سرورهای میزبان این تنظیمات را دارند.اگر ابزار بهینه کننده سرعت سایت گزارش دهد که شما در حال از دست دادن laverage browser caching یا چیزی مثل آن هستید، بهترین راه این است که با شرکت میزبانی وب تماس حاصل کرده و به آن‌ها اطلاع دهید که قصد نصب حافظه کش مرورگر بر روی سایت را دارید. آن‌ها می‌توانند به شما درست ترین روش انجام این کار را به شما نشان بدهند.

اگر میخواهید همه کارها را به تنهایی انجام دهید بنابراین باید از تنظیمات حافظه کش مرورگر، بسته به نوع سروری که شرکت میزبان از آن استفاده می‌کند، آگاهی داشته باشید. یک شروع خوب برای سرورهای آپاچی فایل .htaccess در HTML5 Boilerplate project است.

فشرده سازی منابع (Gzip یا Deflate)

فایل هایی که از طریق سرورتان به بازدیدکنندگان ارسال می شود، اگر فشرده شده باشد، سریعتر می‌تواند منتقل شود که باعث افزایش سرعت سایت می گردد. این کار می‌تواند با فعال کردن Gzip یا Deflate بر روی سرور انجام شود.

شما می‌توانید با پشتیبانی هاست تماس گرفته و از آن‌ها بخواهید که فشرده سازی منابع را برای سایت شما فعال سازند یا اینکه خودتان هم می‌توانید این کار را انجام دهید اما لازمه اش این است که حتما بدانید که شرکت از چه نوع سروری استفاده می‌کند. می‌توانیم دوباره نگاهی به پروژه HTML5 Boilerplate بیندازیم. آن‌ها برای هرکدام از انواع سرورها، تنظیمات پیش فرضی دارند . من این تنظیمات پیش فرض را پیدا کردم. محتوای آن را کپی کرده و از طریق FTP در فایل .htaccess سایت ورد پرس و در اننتهای فایل قرار دادم.

سپس ابزار سنجش سرعت را اجرا کردم و پس از فعال کردن فشرده سازی فایل های سایت وردپرس، این نتیجه برای من به نمایش درآمد:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 96
  • YSlow: 82

همانطور که مشاهده می کنید، امتیاز سایت را با یک کار ساده بالا بردیم و تنها کاری که انجام دادیم این بود که فشرده سازی منابع را فعال کردیم که زمان زیادی هم از ما نگرفت. با این کار اندازه صفحه از 803 کیلوبایت به 476 کیلوبایت تغییر کرد. ما گام دیگری در راه بهینه‌سازی سایت برداشتیم که در ادامه به آن می پردازیم.

حذف فایل های غیر ضروری جاوا اسکریپت (JS) یا CSS

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

پلاگینی که به ما در این کار کمک خواهد کرد WP Asset Clean Up است. بعد از اینکه این پلاگین را نصب و فعال کردید، بروید و صفحه اصلی سایتتان را ویرایش کنید. صفحات اصلی وب سایت‌ها معمولاً سنگین ترین آن‌ها هستند. به همین خاطر ما در مثال خود از این نمونه استفاده خواهیم کرد، اما به جز صفحه اصلی می‌توانید صفحات دیگر را هم ویرایش کنید.

در پایین ویرایش محتوای صفحه، گزینه WP Asset Clean Up را خواهید دید. این بخش تمام فایل های JS و CSS را که در صفحه نخست شما استفاده می شود را لیست خواهد کرد. حالا کاری که باید انجام دهید این است که بفهمید کدامیک از این‌ها در صفحه اول ورد پرس استفاده نمی شود.

به‌عنوان مثال، در سایت آزمایشی، ما از پلاگین Contact Form استفاده کرده ایم، در حالی که از این محتوا فقط در صفحه Contact Us استفاده می شود، بنابراین با خیال راحت فایل های JS و CSS را از این صفحه حذف کردیم. برای این کار می‌توان از افزونه WooCommerce نیز استفاده کرد. باید به تک تک افزونه ها در لیست نگاه کرده و آن‌ها را چک کنید و اگر نیاز نیست حذف کنید. اما مراقب آیکن ها با علامت قرمر باشید، چرا که آن‌ها فایل های هسته ای و اصلی وردپرس هستند و به هیچ عنوان نباید حذف شوند.

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

دوباره ابزار سنجش سرعت سایت را اجرا کردم. تغییری در امتیازهای Google PageSpeed ایجاد نشده بود ( زیرا در لیست پیشنهادی برای بهینه‌سازی نبود) اما امتیاز در GTmetrix بهتر شده بود:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 97
  • YSlow: 86

اکنون سایت ما با سرعت بیشتری بارگذاری می شود و تنها به 2.7 ثانیه زمان نیاز است تا کل صفحه بارگذاری شود ( در ابتدا 3.1 ثانیه بود ). ما سرعت سایت وردپرسی را به آهستگی اما با اطمینان افزایش دادیم. با حذف فایل های غیر ضروی JS  و CSS از صفحه اصلی، زمان بارگذاری، تعداد درخواست ها و در کل حجم صفحه بهبود پیدا کرد و در نتیجه امتیاز ما بالا رفت.

Render-blocking جاوااسکریپت و CSS در محتوای فوقانی صفحه

یکی از بهینه‌سازی هایی که Google PageSpeed ارائه می دهد این است: “حذف render-blocking جاوااسکریپت و CSS در محتوای فوقانی صفحه” این یک حقه است. آیا خاطرتان هست که گفته بودم همیشه نباید به هر طریقی به دنبال امتیاز 100 در ابزار page speed باشید؟ این مورد یکی از آن‌هاست.

اگر نگاهی به مثالمان بیاندازیم، گوگل پیشنهاد کرده بود که Page Builder front-flex.css را تعلیق کرده یا به صورت غیرهمزمان بارگذاری کنیم. ما از Page Builder که توسط پلاگین SiteOrigin اجرا می شود، برای ساخت محتوا در صفحه استفاده می کنیم. بنابراین اگر این فایل، مسئول ساخت لایه های صفحه سایت است، حذف آن ممکن است باعث خرابی سایت شود و این پیشنهاد را نادیده بگیرید.

اما این سوال پیش می آید که ” چرا اهمیتی به پیشنهاد گوگول نمی دهید؟ چطور جرئت می کنید؟” خب، به هرحال به هرحال گوگل هم تنها یک ابزار است و توصیه هایی به شما می دهد که چه کارهایی انجام دهید اما نمی داند که اجرای برخی از این پیشنهادات سبب خرابی سایت و از بین رفتن تجربه کاربری (UX) خوب برای بازدیدکنندگان می شود. به‌عنوان مثال اگر ابزارها پیشنهاد دهند که فایل style.css را با همه قالب هایش به صورت غیرهمزمان بارگذاری کنید، این کار باعث ایجاد پدیده محتوای غیرمجاز (FOUC) شده و باعث به هم ریختگی صفحه می گردد که یک تجریه کاربری بد است، بنابراین این پیشنهاد را نادیده می گیرم تا تجربه کاربری خوب در عوض بالا رفتن امتیاز را داشته باشم. به هرحال، گوگل از فاکتورهای دیگری هم برای رتبه‌بندی وب سایت شما در موتورهای جستجو استفاده می‌کند که تجربه کاربری یکی از آن‌هاست. زمانی که در حال بهینه‌سازی سرعت سایت هستید، همه توصیه های آن را کورکورانه اجرا نکنید و به جنبه های دیگر و هدف سایت وردپرسی خود نیز بیندیشید.

اگر فایل هایی که ابزار برای بارگذاری غیرهمزمان پیشنهاد می دهد، یک گزینه دم دستی است و باعث خرابی سایت نمی شود، روشن است که این تغییرات را انجام می دهیم. بهترین کار این است که این روش را بر روی سایت انجام دهیم و اگر سایت بدون مشکل اجرا شد، همان را ثبت می کنیم. فراموش نکنید که بارگذاری سایت را بدون حافظه کش مرورگر اجرا کنید تا یک کپی جدید از صفحه بارگذاری شود. می‌توانید این کار را با hard refreshing سایت انجام دهید.

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

کش سمت سرور

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

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

1. سرور یک درخواست صفحه دریافت می‌کند.
2. کد PHP وردپرس شروع به اجرا شدن می‌کند.
3. وردپرس به پایگاه داده برای اطلاعات مورد نیاز برای ساخت صفحه درخواست شده، دسترسی می یابد.
4. وردپرس HTML تولید می‌کند.
5. سرور از طریق HTML به مرورگر برای ارائه صفحه به بازدیدکننده؛ پاسخ می دهد.

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

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

1. سرور یک درخواست صفحه دریافت می‌کند.
2. سرور صفحه HTML را از کش ( اگر نسخه کش شده در دسترس باشد) بازیابی می‌کند.
3. سرور از طریق HTML به مرورگر پاسخ ارسال می‌کند تا صفحه را برای بازدیدکننده بارگذاری کند.

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

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

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

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

در اینجا خواهیم دید که چگونه باید پلاگین WP Rocket را نصب کرده تا کش ساید سرور و دیگر قابلیت های آن ( مانند لود تنبل تصاویر، بارگذاری غیرهمزمان محتواها، بیان فایل های JS و CSS و … ) را فعال کنیم. WP Rocket یک پلاگین پولی است، اما به دلیل قابلیت های آن ارزش هزینه کردن را دارد، البته اگر نمی خواهید هزینه کنید، مشکلی نیست، WP Super cache جایگزین رایگان خوبی است، اما قابلیت های WP Rocket را ندارد و نصب آن نیز مایه دردسر است.

WP Rocket ( پلاگین کش سمت سرور )

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

• کش همه صفحات برای مشاهده سریع.
• کاهش استفاده پهنای باند با فشرده ساز Gzip
• مدیریت هدرزها ( انقضاها، برچسب ها … )

تنظیمات پیش فرض WP Rocket نقطه شروع خوبی است. من ابزار سنجش سرعت سایت را اجرا کردم و با اجرای نسخه کش شده این نتایج به دست آمد:

• Google page speed insights
  • Mobile: 91
  • Desktop: 97
• GTmetrix
  • PageSpeed: 97
  • YSlow: 87

Google PageSpeed Insights بیش از این توصیه ای برای کاهش زمان پاسخگویی سرور نخواهد کرد، زیرا ما زمان پاسخگویی سرور را از 1 ثانیه به 121 میلی ثانیه رسانده ایم و این یعنی 88% بهینه‌سازی زمان پاسخگویی سرور، آن هم تنها با فعال کردن پلاگین WP Rocket. با این بهبودی، زمان بارگذاری کامل صفحه به 1.9 ثانیه رسیده است. اما کار ما هنوز تمام نشده است.

بیائید نگاهی به تنظیمات پلاگین WP Rocket بیندازیم. این پلاگین منو میانبر خوبی در بالای منو بار ادمین WP  دارد. از همانجا می‌توانید به صفحه تنظیمات دسترسی داشته باشید، کش را پاک کرده و دسترسی به دیگر اطلاعات مفید پلاگین داشته باشید.

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

این را نیز بدانید که فعال کردن هر کدام از تنظیمات WP Rocket می‌تواند نتایج متفاوت و حتی منفی بر سرعت وردپرس داشته باشد. تنظیمات را بسته به نیاز فعال کنید. می‌توانید هر یک از تنظیمات را فعال کرده و با ابزار سنجش سرعت، تأثیر آن را بر صفحه بیازمایید. همانطور که خواهید دید، برخی از تکنیک ها سرعت صفحه را بهتر نخواهند کرد، بنابراین ما نیز از آن‌ها استفاده نخواهیم نمود.

پاک کردن کش

به محض اینکه شما پلاگین WP Rocket را فعال کنید، کش ساید سرور شروع به کار خواهد کرد. بنابراین اجازه دهید ببینیم که چطور قرار است آن را پاک کنیم. شما می‌توانید دستی این کار را انجام دهید. یعنی بر روی گزینه منو “Clear cache” در منو میانبر WP Rocket کلیک کرده و این کار انجام خواهد شد. خود پلاگین نیز  این کار را به صورت اتوماتیک انجام خواهد داد، زمانی که تنظیمات سفارشی را به روز می کنید، هنگام به روز رسانی صفحه، تا اندازه ای کش را پاک می‌کند.

کش یک طول عمر دارد که می‌تواند در پنجره “Basic” در تنظیمات WP Rocket تعیین شود. پیشنهاد من، تنظیم کردن آن بر روی 1 روز است.

Preload cache

یکی از قابلیت های خوب WP Rocket، “Preload cache” است که کش صفحه اصلی سایت و صفحه ای که به آن لینک می شود را  پیش بارگذاری می‌کند؟! بنابراین کاربر همیشه به نسخه کش شده دسترسی خواهد داشت. می‌توانیم این پلاگین را قبل از باز کردن ابزار سنجش سرعت اجرا کرد تا نیاز نباشد ابزارها را هر بار برای رسیدن به نتیجه کش، اجرا کرد.!!!

تنظیمات پریلود کش را می‌توان از صفحه تنظیمات و در پنجره “Preload” انجام داد. به دنبال گزینه “Preload bot” باشید. در این قسمت هم می‌توانید گزینه تنظیمات دستی و تنظیمات خودکار را ببینید. اگر گزینه اتوماتیک را فعال کردید، کش پریلود هر زمان که صفحه جدیدی ایجاد کردید، آن را به روز رسانی کردید یا کش منقضی شد؛ اجرا خواهد شد. این گزینه می‌تواند تاثیراتی بر روی اجرای سرور داشته باشد بنابراین اگر این قابلیت را فعال کردید حواستان به اجرا شدن سرور باشد. اگر صفحه را به روز رسانی می کنید و صفحات و پست های زیادی ایجاد می نمایید و یک میزبان وب اشتراکی هم دارید به شما توصیه می کنم این گزینه را فعال نکنید. در عوض تنها گزینه دستی را فعال نمایید که باعث ایجاد یک منو میانبر دیگر با عنوان “Preload cache” می شود و تنها زمانی که روی آن کلیک کنید پیش بارگذاری می گردد.

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

لود تنبل (Lazy Load)

ما قبلا در مورد بهینه‌سازی تصویر توسط این ابزار صحبت کردیم. اما اکنون که پلاگین WP Rocket نصب شده است، می‌توانید این قابلیت را فعال کنید. به پنجره “Basic” رفته و لود تنبل را برای تصاویر فعال کنید. اگر از ویدئو ها یا iframe ها استفاده می کنید، لود تنبل را برای آن‌ها نیز فعال نمایید.

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

کوچک کردن تصاویر

یکی از توصیه های جی تی متریکس برای توسعه سایت، کوچک کردن فایل های HTML ، CSS و JS است، از آنجای که قالب های وردپرسی ما و اغلب پلاگین های پیشنهادی خود از نسخه های کوچک شده فایل های JS و CSS استفاده می کنند و همینطور فشرده ساز Gzip را هم فعال کرده ایم بنابراین، بهینه ساز WP Rocket در این زمینه پیشنهاد خاصی برای ما ندارد. اما شرایط شما ممکن است متفاوت باشد. در قسمت تنظیمات پنجره “Static Files” باز کنید و همه گزینه های مربوط به Minify file را ارزیابی کنید. تنظیمات را ذخیره کرده و با مرورگر ناشناس، وب سایت را ارزیابی کنید.

ترکیب فایل های JS و CSS

پنجره YSlow در جی تی متریکس از ما می خواهد که درخواست های HTTP را کاهش دهید. این ابزار به ما می گوید که وردپرس ما از  9 اسکریپت اضافی در JS  استفاده می‌کند و ما باید تلاش کنیم که آن‌ها را در یک اسکریپت ترکیب کنیم و اینکه صفحه از 4 فایل CSS اضافی استفاده می‌کندو ما باید تلاش کنیم که آن‌ها را در یک فایل جا دهیم.

ترکیب کردن فایل های JS و CSS در یک فایل، ایده خوبی نیست، زیرا مرورگرها می‌توانند به صورت موازی 6 فایل کوچکتر دانلود کنند که سریعتر از 1 یا 2 فایل بزرگ است. دلیل دیگر اینکه برخی از این فایل ها در بالای مستندات HTML و برخی در پایین مستندات قرار دارند و برای این کار باید فایل ها را حداقل به دو بخش تقسیم کنید.

برای ترکیب فایل ها با WP Rocket به قسمت “Static files” در تنظیمات پلاگین بروید و گزینه Combine files را فعال نمایید و مانند همیشه از طریق مرورگر ناشناس، هر مشکلی را بررسی کنید.

حذف رشته تقاضا یا query string از منابع آماری

جی تی متریکس از ما میخواهد که رشته تقاضا یا Query String را از منابع استاتیک حذف کنیم زیرا برخی از سرورهای پروکسی منبع را با این رشته، کش نمی کنند.

رشته تقاضا در منبع استاتیک (معمولا JS  یا CSS ) یک ویژگی URL می باشد که می‌تواند انتقال اطلاعات بین صفحات را انجام دهد.

به سادگی می‌توان این رشته با WP Rocket حذف کرد. به قسمت “Static files” رفته و گزینه Remove query string را فعال کنید.

شبکه توزیع محتوا

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

شبکه توزیع محتوا (CDN ) از نظر جغرافیایی شبکه ای توزیع شده از پراکسی سرورها و مراکز آن‌هاست و اولین هدف آن توزیع محتوای سایت شما به بازدیدکننده از نزدیک سرور به آن‌ها است. به این معنی که محتوای استاتیک وبسایت شما  (تصاویر، JS ، CSS و … ) توسط سرورهایی پردازش خواهد شد که در سرتاسر دنیا پخش هستند و باعث بارگذاری هرچه سریعتر آن‌ها برای کاربران می شوند.

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

• کاهش تأخیر زمانی به خاطر مسافت
• کاهش زمان اولین بایت (TTFB)، که محاسبه زمانی است که مرورگر باید منتظر بماند تا اولین بایت داده از طرف سرور برسد.
• ارائه محتوا از طرف کش برای سریعتر شدن بارگذاری صفحه و درگیری کمتر سرور میزبان.
• فشرده سازی داده با Gzip یا Brotli برای کوچکتر سازی فایل های HTML، شیوه نامه ها و جاوا اسکریپت

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

کلودفلر

با راه‌اندازی CloudFlare کاربر name-server یا DNS های این سرویس را در دامنه خود تنظیم می‌کند و در نتیجه هر درخواستی که به طرف سایت بیاید از فیلتر cloudflare عبور می‌کند به این ترتیب راه دسترسی روبات‌ها و هکرها به سایت بسته می‌شود. با عبور تمام ترافیک سایت از داخل CloudFlare سایت در برابر هر نوع دسترسی غیر مجاز مصون می‌شود.

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

سپس، نام دامنه را وارد کرده و بر روی “Begin Scan” کلیک کنید. حتی اگر از یک زیر دامنه استفاده میکنید، تنها آدرس دامنه اصلی را وارد کنید. تنها یک دقیقا طول میکشد تا اسکن انجام شود و بعد از اتمام، بر روی دکمه “Continue” کلیک کنید.

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

زمانی که کارتان با رکوردهای DNS تمام شد می‌توانید وارد مرحله بعد شوید، جایی که پلن “Free Website” را انتخاب کرده و بر روی Continue برای ادامه مرحله کلیک می کنید.

در مرحله آخر به شما دو DNS از طرف سایت کلود فلر ارائه میشود که باید انها را به جای دی ان اس های دامنه ای که به کلود فلر معرفی کرده اید قرار دهید یا در واقع DNS جدید کلود فلر را با DNS های قبلی جایگزین کنید . و پس از آن ، روی دکمه یا گزینه I’ve updated my nameservers, continue کلیک کنید .

به محض اینکه نام دامنه سرور را تغییر دادید، می بینید که حالت وضعیت سایت به Active تغییر پیدا کرد.

من همه تنظیمات کلودفلر را به حالت پیش فرض قرار دادم و تنها گزینه ای که تغییر دادم، سطح امنیتی بود. به قسمت فایروال رفته و “Security Level” را در حالت Low قرار دهید تا سایت بازدیدکنندگان را اشتباهی به جای هکر، دچار چالش نکند.

حال که کار نصب و فعال کردن کلودفلر به اتمام رسید، باید تنظیمات کلودفلر را در پلاگین WP Rocket فعال نماییم.

به صفحه ادمین وردپرسی تان وارد شوید و به تنظیمات پلاگین بروید. پنجره “CDN” را یافته و Show Cloudflare tab را فعال نمایید. پس از نمایان شدن تنظیمات آن در پلاگین WP Rocket ایمیل اکانت کلودفلر و دامنه را وارد کرده و همچنین، API آن را در قسمت تنظیمات کپی و پیست نمایید. برای به دست آوردن کلید API به قسمت داشبود کلودفلر رفته و بر روی Get your API Key، کلیک کنید. سپس در صفحه جدید، بخشی را به نام API Key خواهید دید و بایستی که بر روی دکمه View API Key در ردیف “Global API Key” کلیک کنید. به محض اینکه لینک را  در تنظیمات پلاگین پست کردید. تنظیمات را ذخیره کرده و سپس کش کلودفلر را پاک نمایید. و در حالت کلی حواستان باشد تا هر تغییراتی را ارزیابی کرده و ببینید که آیا اجرای صفحه به این تغییرات به درستی کار می‌کند یا خیر.

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

نتیجه نهایی

امتیاز نهایی سنجش سرعت سایت آزمایشی ما از این قرار است:

• Google PageSpeed insights
  • Mobile: 91
  • Desktop: 97

• GTmetrix
  • PageSpeed: 98
  • YSlow: 91

مقایسه نتایج GTmetrix قبل و بعد از بهینه‌سازی

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