تسریع در وردپرس: چگونه لیست 25 را 256 درصد بهینه می کنیم

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

احتمالاً شنیده اید که سرعت وردپرس برای سئو مهم است. یک سایت سریعتر از تعامل کاربر بهتر ، بازدید بیشتر از صفحه و فروش بهتر برخوردار است. در یک مطالعه موردی عجیب و غریب ، آنها دریافتند که یک ثانیه تأخیر می تواند برای شما 7٪ فروش ، 11٪ بازدید صفحه کمتر و 16٪ رضایت مشتری را کاهش دهد.

Strangeloop Speed Case Study

بنابراین چگونه واقعاً سرعت وردپرس را افزایش می دهیم؟

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

بررسی اجمالی h4>

List25 یک وبلاگ سرگرمی است که توسط بنیانگذار ما شروع شده است سید بلخی . این سایت بیش از 1.5 میلیون مشترک دارد و کانال YouTube بیش از سه ماهه میلیاردها بازدید

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

قبل از شروع بهینه سازی ، بارگیری صفحه اصلی ما طبق Pingdom 2.21 ثانیه طول کشید. پس از پایان کار ، زمان بارگذاری صفحه به 1.21 ثانیه کاهش یافت (45 ~ سریعتر)

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

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

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

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

سرورهای آنها به راحتی نمی توانند سایتی را به این اندازه مدیریت کنند زیرا List25 ده ها میلیون بازدید از صفحه را دریافت می کند. HostGator است برای سایتهای کوچکتر عالی است ، اما برای مواردی به این بزرگی مناسب نیست.

میزبانی وردپرس مدیریت شده گزینه ها ، و در نهایت با استفاده از SiteGround برای میزبانی لیست 25 زیرا آنها بهترین ارزش کلی را برای این سایت ارائه می دهند.

بلافاصله می توانید بهبود زمان پاسخ سرور ما را مشاهده کنید. ما از زمان پاسخ حداکثر 442 میلی ثانیه به 172 میلی ثانیه رسیدیم. این 256٪ پیشرفت است.

List25 Server Response Time After Switching to SiteGround

سایت سایت تقویت کننده های عملکرد را برای سیستم عامل های خاص مانند WordPress ، Joomla و Magento ساخته است. بر اساس بستر سایت شما ، آنها به طور خاص سرورهای شما را بهینه می کنند که نتیجه آن عملکرد کلی بهتر است.

ما مقاله ای در مورد که در مورد 7 شاخص کلیدی صحبت می کند.

اگر به دنبال تغییر میزبان هستید ، مطمئناً SiteGround را امتحان کنید. کاربران WPBeginner 60٪ تخفیف ویژه در میزبانی + دامنه رایگان .

افزونه ذخیره سازی h4>

در مورد سرعت بخشیدن به وردپرس ، ذخیره سازی دومین عامل مهم پس از میزبانی وب شما است.

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

نمودار زیر روند کار را برجسته می کند. به زبان غیرعادی ، فکر کنید که حافظه پنهان ایجاد یک میانبر دسک تاپ است که به شما کمک می کند سریعتر به پرونده برسید.

What is Page Cache?

برای سایت List25 ، ما از SiteGround SuperCacher استفاده می کنیم ، افزونه ای که مخصوص مشتریان خود ساخته اند. علاوه بر این ، آنها گزینه های پیشرفته پنهان سازی پویا را با استفاده از Varnish (بخشی از تقویت کننده عملکرد آنها) اضافه کردند.

اگر در Siteground نیستید ، نگران نباشید. می توانید با استفاده از یکی از راه حل های موجود مانند W3 Total Cache یا WP Super Cache .

در WPBeginner ، ما از W3 Total Cache استفاده می کنیم که تعدادی گزینه ذخیره صفحه ، ذخیره پایگاه داده و ذخیره شی را فراهم می کند.

همانطور که شرکتهای میزبان بیشتری برای وردپرس تخصص دارند ، ما شاهد راه حلهای سفارشی سازی بیشتری خواهیم بود. صفحه صفحه a > و WPEngine a > همچنین سیستم ذخیره سازی داخلی خود را ارائه دهند.

CDN h4>

شبکه های تحویل محتوا (CDN) به شما کمک می کند سرعت وب سایت خود را تقویت کنید. ما از MaxCDN از ابتدای List25 ، بنابراین این قسمت تغییر نکرد.

ما یک مقاله کامل در مورد CDN چیست و چرا به همراه اینفوگرافیک به آن نیاز دارید.

What is a CDN

CDN به ما امکان می دهد همه CSS ، Javascript و تصاویر را از یک شبکه تحویل محتوا ارائه دهیم. این با تعیین مکان بازدید کننده سایت و ارائه محتوا از سرور نزدیک به بازدید کننده کار می کند.

اگر به دنبال راه حل حق بیمه CDN نیستید ، می توانید از Cloudflare .

ترکیب فایلها برای کاهش درخواستهای HTTP h4>

با افزودن افزونه های بیشتر ، آنها اغلب پرونده های JavaScript و CSS خود را اضافه می کنند. هر پرونده اضافی یک درخواست HTTP جدید است.

ما برای کاهش درخواست ها و سرعت بخشیدن به زمان بارگذاری ، این پرونده های JavaScript و CSS را در یک پرونده واحد برای هر یک ترکیب کردیم. می توانید جزئیات بیشتر در این مورد را در نحوه تأثیر پلاگین های وردپرس بر زمان بارگذاری .

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

این کاری است که شما باید مرتباً انجام دهید زیرا افزونه هایی که استفاده می کنید اضافه کاری را تغییر می دهند.

Image Sprites

ما از یک sprite تصویری استفاده کردیم که چندین نماد اجتماعی و سایت را در یک تصویر واحد ترکیب می کرد:

List25 Sprite

هر زمان که نیاز به نمایش یک نماد خاص داشتیم ، از CSS برای این موارد استفاده می کنیم:

  1. تصویر را به عنوان تصویر پس زمینه بارگیری کنید
  2. عرض و ارتفاع عنصری را که برای آن نماد نیاز داریم تعریف کنید
  3. موقعیت تصویر پس زمینه را برای بارگذاری نماد لازم تنظیم کنید

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

 li.widget_social_icons ul li {float: left؛ عرض: 36 پیکسل ارتفاع: 36 پیکسل؛ حاشیه: 0 10px 10px 0؛ بالشتک: 0؛ پس زمینه: url (../ images / sprite.png) بدون تکرار ؛ }
li.widget_social_icons ul li.twitter {background-position: 0 -50px؛ }
li.widget_social_icons ul li.facebook {background-position: -36px -50px؛ }
li.widget_social_icons ul li.pinterest {background-position: -72px -50px؛ }
li.widget_social_icons ul li.google {background-position: -108px -50px؛ }
li.widget_social_icons ul li.rss {background-position: -144px -50px؛ }
li.widget_social_icons ul li.youtube {background-position: -180px -50px؛ }

ویژگی های CSS background-Position ، width و height به ما کمک می کند تا قسمت خاصی از تصویر را که می خواهیم تولید کنیم هدف قرار دهیم:

List25 Sprite, Edited

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

با ترکیب JavaScript ، CSS و تصاویر با هم ، تعداد درخواستها را به میزان قابل توجهی کاهش دادیم.

کوچک سازی کد h4>

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

برای List25 ، ما از SCSS ، یک صفحه سبک مبتنی بر نحو استفاده می کنیم ( Intro to Sass ). این به ما امکان می دهد تا فایل های CSS خود را در چندین زمینه توسعه در یک چیدمان آسان برای خواندن ساختار بندی کنیم:

List25 SCSS

ما از CodeKit استفاده می کنیم تا پرونده های SCSS را در یک فایل CSS جمع آوری کنیم. همچنین CodeKit برای اطمینان از کمترین حد ممکن پرونده ، فضای خالی و وقفه ها را حذف می کند:

در نتیجه ، ما توانستیم اندازه پرونده CSS خود را 28٪ کاهش دهیم.

بهینه سازی تصویر h4>

ما تصاویر خود را در دو زمینه بهینه سازی کردیم: تم وردپرس و محتوای بارگذاری شده.

برای قالب وردپرس خود ، از CodeKit استفاده کردیم تا اطمینان حاصل کنیم که همه تصاویر بدون فشرده سازی فشرده شده اند. این اطمینان می دهد که اندازه پرونده ها در کمترین حد ممکن و بدون افت کیفیت هستند.

List25 Image Optimisation

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

اشتراک اجتماعی بدون جاوا اسکریپت h4>

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

List25 Social Sharing Buttons

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

برای مقابله با این مشکل ، ما به یک راه حل (تقریبا) بدون Javascript منتقل شدیم. هر یک از دکمه های اشتراک شبکه اجتماعی توسط افزونه وردپرس سفارشی ما ارائه می شود و Javascript موضوع فقط برای باز کردن پنجره مرورگر وب هنگامی که کاربر روی یک دکمه کلیک می کند استفاده می شود.

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

می توانید از API مانند Sharre استفاده کنید یا نوار اجتماعی شناور برای شخصی سازی.

با استفاده از Pingdom’s RUM (نظارت بر کاربر واقعی) ، این افزونه اشتراک گذاری جدید زمان بارگیری صفحه “واقعی” را از 6 ثانیه به کمی بیش از 2 ثانیه کاهش داد. همچنین این اطمینان حاصل کرد که تعداد درخواست های ارائه شده برای اسکریپت های شخص ثالث را کاهش می دهیم.

نتیجه h4>

ما سرعت سایت خود را به طور قابل توجهی بهبود بخشیدیم. زمان بار از 2.2 ثانیه به 1.22 ثانیه رسید.

6

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

List25 Server Response Time After Switching to SiteGround

این امر باعث کاهش زمان صرف شده برای بارگیری صفحه ای توسط ربات Google می شود که به سرعت خزیدن ما کمک می کند.

Webmaster Tools time spent crawling page

نرخ جستجوی کلی ما 7٪ کاهش یافت زیرا سایت با سرعت بیشتری بارگیری می شود و با تغییر میزبان ها توانستیم خطاهای سرور را کاهش دهیم.

List25 Bounce Rate

همانطور که می توانید با نرخ پرش کمتر تصور کنید ، زمان صرف شده در سایت نیز بیش از 30 ثانیه افزایش یافت.

نتیجه گیری h4>

همانطور که مشاهده می کنید سرعت بارگیری وب سایت می تواند تعامل بازدیدکنندگان را بهبود بخشد. تکنیک هایی که در مورد آنها بحث کردیم طیف وسیعی از بهبودهای اساسی و متوسط ​​را پوشش داده است که می توانید برای بهینه سازی سایت وردپرس خود پیاده سازی کنید.

امیدواریم این مقاله به شما در سرعت بخشیدن به سایت وردپرس کمک کرده باشد. همچنین ممکن است بخواهید مقاله ما را در مورد 20 باید برای سال 2015 افزونه های وردپرس داشته باشند .

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

منبع:
https://www.wpbeginner.com/wp-tutorials/speeding-up-wordpress-how-we-optimized-list25-performance-by-256/.

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