افزایش سرعت لود وردپرس با چند راهکار عالی
- آموزش سئو وردپرس مقالات آموزشی
- بروزرسانی شده در
آیا میخواهید سرعت سایت وردپرس خود را افزایش دهید؟ در این مقاله قصد داریم ترفندهای بهینه وردپرس که در افزایش سرعت لود وردپرس کمک میکند را به شما ارائه کنیم. در این مقاله ما به شما چگونگی سرعت دادن به وردپرس با به اشتراک گذاشتن روشهای بهینه در افزایش عملکرد را نشان میدهیم. شما ممکن است شنیده باشید که سرعت وردپرس برای سئو مهم است. درواقع یک سایت پرسرعت فروش بیشتری نیز دارد. توسعهدهندگان در یک مطالعه دریافتند کم بودن سرعت سایت میتواند از فروش و بازدید شما بکاهد.
آنچه در این مقاله میخوانید
افزایش سرعت لود وردپرس
List25 یک وبلاگ است که توسط Syed Balkhi تأسیس شد. این سایت دارای بیش از 1.5 مشترک و بازدیدکننده است. استفاده از مطالب این سایت که اغلب فیلم و تصویر است طول میکشد، بنابراین بهطور کلی بهینهسازی در سرعت و نگهداشتن هزینههای پایین و بهبود زمان در سایت برای ما مهم است. قبل از شروع بهینهسازی صفحه اصلی ما برای بارگذاری در زمان 2.21 ثانیه انجام میگرفت. اما پس از انجام کار این زمان به 1.08 ثانیه کاهش یافت.
در طول انجام این بهینهسازی ما قادر بهسرعت بخشیدن به پاسخ سرور خواهیم بود. بهبود بخشیدن سرعت صفحه، زمان کلی بار و کاهش تعداد درخواستها را بهبود میبخشد. هماکنون یک نگاه اجمالی به تکنیکهایی که به سایت وردپرس ما سرعت میدهد میاندازیم.
تاثیر هاست در سرعت سایت
دارا بودن یک میزبان وب خوب برای سرعت وبسایت شما ضروری است. زمانیکه سایت شما مشهور شد شما بهراحتی از شرکت میزبانی قبلی پیشی میگیرید. سرور آنها نمیتواند به یک سایت با این سایز رسیدگی کند؛ چون میهن وردپرس دهها هزار بازدیدکننده دریافت کرده است. درواقع هاست معمولی برای سایتهای کوچکتر مناسب است. ما به گزینههای مختلف مدیریت در وردپرس میزبان نگاه میکنیم و درنهایت استفاده از سایتهای معمولی برای میزبانی میهن وردپرس را بهپایان میرسانیم و سرور اختصاصی برای سایتمان تهیه میکنیم.
شما میتوانید بهبود زمان پاسخ سرور را ببینید. سایت List25 از حداکثر سرعت 442 میلیثانیه به 172 میلیثانیه رسیده است که یک بهبود 256 درصدی میباشد.
سایتهای بوستر عملکرد را برای سیستم عاملهای خاص مانند وردپرس ساختهاند. بر اساس سیستمعامل سیستم شما سرور را بهینه میکنند که منجر به عملکرد بهتری شود.
ما در مقالهای توضیح دادهایم که بهترین هاست برای وردپرس چیست؟ پیشنهاد ما استفاده از هاست مناسب وردپرس است.
افزایش سرعت لود وردپرس با افزونه کش
همراه با بالا بردن سرعت وردپرس دومین عامل مهم بعد از میزبان وب فاکتور ذخیرهسازی میباشد. بهطور معمول وقتی یک بازدیدکننده به سایت وردپرس میآید سرور شما از درخواست PHP به دادهی MySQL با پیدا کردن صفحهای که بازدیدکننده دارد و در حال درخواست است عبور میکند. این ذخیره باعث صرفهجویی در زمان و منبع میشود.
برای سایت List25 از سایتهای SuperCacher و پلاگینی که خاص مشتری ساختهشده استفاده میشود. بالاتر از آن گزینههای ذخیره پویای پیشرفتهای با استفاده از لاک اضافه کردهاند. اگر شما در سایت نیستید نگران نباشید، میتوانید روی سایت وردپرس خود با استفاده از بسیاری از راه حلهای در دسترس مانند W3 Total Cache و WP Super Cache کش را راهاندازی کنید.
CDN
شبکههای تحویل محتوا میتوانند به شما در افزایش دادن سرعت وبسایتتان کمک کنند. List25 از آغاز کار خود از Maxcdn استفاده کرده است. پس این قسمت تغییری نداشته است.
CDN به ما اجازهی خدمت به تمام CSS ها، جاوا اسکریپت و عکسهایی که از محتوای شبکه ارسال میشوند را میدهد. این کار با تعیین موقعیت بازدیدکنندگان از سایت و خدمت به بازدیدکننده از نزدیکترین سرور عمل میکند. اگر شما به دنبال راهحل CDN نیستید میتوانید از Cloudflare استفاده کنید.
ترکیب فایلها برای کاهش درخواستهای HTTP
همانطور که شما افزونههای بیشتری اضافه میکنید، اغلب آنها به سایت شما جاوا اسکریپت و فایل CSS اضافه میکنند. هر فایل اضافه یک درخواست HTTP جدید است. ما جاوا اسکریپتها و فایلهای CSS را درون یک فایل تکی برای کاهش درخواست و افزایش سرعت زمان بارگیری ترکیب میکنیم.
درحالیکه ما در هر حال در حال بارگذاری برخی قابلیتهای کوچک هستیم ممکن به بخشهای خاصی از سایت نیاز نداشته باشیم. این کد روی CDN ذخیرهسازی شده و نتایج نشان میدهد که درخواستهای کمتری برای فراهم کردن عملکرد بهتر نسبت به بارگذاری چندین فایل JS وجود دارد. اینها کارهایی است که باید بهطور منظم انجام دهید؛ زیرا افزونهای که استفاده میکنید در طول زمان تغییر میکند.
استفاده از یک تصویر ترکیبی
ما از جداکننده تصویر استفاده میکنیم و تصویر همه آیکونهای شبکه اجتماعی را در یک تصویر ترکیب کنیم.
هر زمان نیاز به نمایش یک آیکون خاص را داریم نیز از CSS استفاده میکنیم.
1. بارگذاری تصویر مانند پسزمینه تصویر
2. تعریف عرض و ارتفاع از این عنصر برای نیاز آیکون
3. تنظیم موقعیت پسزمینه برای عکسهای ما در بارگذاری آیکونهای ضروری
برای مثال، برای بارگذاری آیکونهای اجتماعی نوار کناری از کد زیر استفاده میکنیم:
li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.webp) no-repeat; }
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 به ما در هدف قرار دادن بخش خاصی از تصویر در خروجی کمک میکنند. در نتیجه فقط اولین درخواست برای فایل تصویری استفاده میشود. درخواستهای CDN برای تصاویر منجر به ذخیرهسازی نسخه بارگیری میشود و تنها نیاز به یک تصویر واحد در مقابل آیکونهای مختلف اجتماعی میباشد.
فراموش نکنید که ترکیب جاوا اسکریپت و CSS و تصاویر با یکدیگر درخواستها را کاهش میدهد.
Minify کردن CSSها
کد کوچکسازی شامل برداشتن فضای خالی و پرش خطها بهمنظور کاهش سایز فایلها برای بارگذاری سریعتر هنگام درخواست میباشد. برای List25 از SCSS و شیوه مبتنی بر نحو استفاده میکنیم. این موضوع به ما اجازه میدهد تا ساختار فایل CSS را در مناطق مختلف توسعه دهیم.
از CodeKit برای گردآوری فایلهای SCSS در یک فایل CSS استفاده میکنیم. همچنین CodeKit فضاهای خالی را برای اطمینان از کوچکی فایل حذف میکند. درنتیجه ما قادر به کاهش سایز فایل CSS تا 28% هستیم.
بهینهسازی تصویر
تصاویر را در دو حوزه بهینه میکنیم: تم وردپرس و محتوای آپلود شده.
برای تم وردپرس، از CodeKit استفاده میکنیم که مطمئن شویم تمام تصاویر فشرده شدهاند. CodeKit تضمین میکند که سایز فایلها تا حد ممکن بدون از دست دادن کیفیت کوچک میشود.
ما همچنین تمام نویسندگان را در مورد اهمیت صرفهجویی بهینه کردن تصاویر آموزش میدهیم.
استفاده نکردن از اشتراکگذاری در شبکههای اجتماعی بهصورت جاوا اسکریپت
اشتراکگذاری اجتماعی برای سایت شما مانند هر سایتی بسیار مهم است. با این حال افزونههای اشتراکگذاری اجتماعی که از جاوا اسکریپت استفاده میکنند. میتوانند به نسبت قابلتوجهی سرعت سایت شما را کاهش دهند.
درحالیکه یکپارچهسازی این 4 شبکه اجتماعی در زمان بارگذاری تأثیری ندارد؛ سرعت سایت را زمانی که آن را در دستگاه تلفن همراه میبینیم کم میکند. دکمههای اشتراکگذاری با وجود اسکریپت بارگذاری ناهمگام زمان کوتاهی برای ظاهر شدن صرف میکنند. در نتیجه در محتوای پست بهعنوان دکمه بارگذاری به اطراف حرکت میکند. برای مقابله با این مشکل، به سراغ راهحلهای رایگان جاوا اسکریپت میرویم.
پس پیشنهاد ما این است که بهجای استفاده از افزونه، با چند کد ساده شروع به ساخت یک باکس اشتراکگذاری در شبکههای اجتماعی کنید.
ما بهطور قابل توجهی سرعت سایت را بهبود بخشیدیم.
این موضوع در کاهش زمان مصرفی در دانلود یک صفحه توسط ربات گوگل مؤثر است.
نرخ Bounce Rate کاهشیافته است. زیرا این سایت بهسرعت بارگذاری میشود و با تعویض میزبان قادر به کاهش خطاهای سرور شدیم.
میتوانید ببینید با افزایش سرعت سایت، کاربران بیشتر در سایت ما میمانند و سایت ما را ترک نمیکنند.
نتیجهگیری نهایی
همانطور که میبینید بارگذاری سریع وب میتواند تعامل بازدیدکنندگان را بهبود بخشد. این تکنیکهایی که طیف وسیعی از بهبود اولیه هستند را میتوانید برای بهبود سایت وردپرس خود پیادهسازی کنید.
موفق باشید.
لطفا راهنمایی میکنید که برای اینکه تمام فایل های css,html,js همه ی پلاگین ها در همه صفحهات تکرار نشه باید چه کنیم؟
منظورم اینه که مثل انگولار صفحه هات رو lazy کنیم تا هر کامپوننت فقط در همان صفحه ایی که استفاده شده فایل هاش بارگزاری شود.
پلاگین WP Plugin Manager – Deactivate plugins per page رو با جستجو در گوگل پیدا کردم، ولی خواستم نظر کارشناسی شما رو بدونم که یا روش دستی ایی هست یا پلاگین قوی تر و حرفه ای تر تو این زمینه هست؟
سلام
این مورد در دوره افزایش سرعت سایت به صورت کامل توضیح داده شده
سلام
خسته نباشید . من یه مشکلی دارم میشه کمک کنید لطفا
من برای وب سایت خودم از سرویس cloud flare استفاده کردم اما کاربران با موبایل اکثرا سایت براشون لود نمیشه در صورتی که توسط desktop لود میشه سایت . و سایت های دیگه که Cloud flare ندارند این مشکل رو ندارند .!!!
با سلام . تشکر و قدر دانی بابت آموز هاتون . واقعا بهم خیلی کمک کرد
درود به شما. ممنون از نظرتان.
موفق باشید.
سلامبا تشکر ویژه از سایت خوبتانیک سوال شما قالب سایت خودتان را خودتان طراحی و پیاده سازی کردید و یا از قالب آماده استفاده کردید و تغییر دادید.اگر از قالب آماده استفاده کردید امکانش هست نام آن را بگویید.چون شما خیلی سایتتان زیباست
سلام متشکرم. بصورت اختصاصی توسط خودمان طراحی شده
سلام چطوری میشه طراحی کرد؟
باید طراحی قالب وردپرس رو یاد بگیرید