راهنمای بهینه سازی وردپرس در چند گام ساده (قسمت دوم)

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

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

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

۱- بهینه سازی ابعاد و حجم تصاویر:

طبیعی است که بیشترین حجم یه سایت را تصاویر مطالب و قالب می‌گیره و باید بهینه سازی شان را در اولویت اول قرار دهیم. پس بهتر است تصاویرتان قبل از انتشار یک مطلب در نظر داشته باشید که طول آن بیشتر طول ستون مطالب سایت نباشد؛ می‌توانید برای این کار از نرم افزار Photoshop و یا Fotor استفاده کنید. بعد نوبت به حجم تصویر شماست که اگر فرمت PNG هست سایت tinypng.org در غیر این صورت می‌توانید از سایت kraken.io استفاده کنید. دقیقاً همین کار رو برای تصاویر قالب نیز انجام دهید و به پوشه images قالب خود برید و تصاویر را به کمک همین روش کاهش دهید. این نکته رو هم در نظر داشته باشید که غیر از فرمت‌های JPG، PNG، GIF  از نوع دیگری در سایت خود استفاده نکنید و نوشته‌هایی رو هم که می‌توان به صورت متنی نوشت هیچ وقت آن را گرافیکی نکنید.

۲- فشرده سازی فایلهای JS و CSS:

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

<a style="color:#09C;">Hoorsheed.com</a>

در این خط کوتاه، قسمت مشخص شده برای سرعت بارگذاری سایت تأثیر بدی دارد و شکل درست آن این است که باید یه استایل در فایل style.css نوشته و آن را برای کد خود برگردونیم:

.copyright{
 color:#09C;
}
<a class="copyright">Hoorsheed.com</a>

حالا شما می‌توانید این فایلها را به کمک سایت refresh-sf.com/yui فشرده کنید. استفاده از روش فشرده سازی G-Zip را نیز فراموش نکنید! به تعداد CSSها و JSهای بکار رفته در قالب نیز توجه کنید؛ به طور کلی برای CSS باید کمتر از ۴تا و برای JS کمتر از ۷تا که خیلی ایده‌آل است استفاده کنید. در ضمن کدهای فراخوان جاوا اسکریپت را نیز در فایل footer.php قرار دهید.

۳- ذخیره محتوای سایت روی سیستم کاربر:

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

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

در کد بالا می‌بینید که فایلهای CSS برای یک ماه روی سیستم کاربر ذخیره و پس از این مدت رفرش می‌شود و مجدد برای یک ماه دیگر در کش مرورگر کاربر ذخیره می‌شود. اگر ما این فایلها رو زیاد تغییر می‌دهیم می‌توانیم زمان کوتاه‌تری را برای آن تعیین کنیم و بجای month از week استفاده کنیم. دیدن این لینک نیز خالی از لطف نیست.

۴- کاهش تعداد DNSهای دامنه:

وقتی شما آدرسی را تایپ کنید به ازای هر dnsی که در مشخصات دامنه ثبت شده به آدرس آی‌ پی سرور برمی‌گردد و این فرایند چیزی حدود ۲۰ تا ۱۲۰ میلی ثانیه طول می‌کشد. حالا فرض کنید زمان پاسخگویی هر dns برای دامنه شما ۹۰ میلی ثانیه باشد و شما چهار dns را ثبت کرده باشید تنها برای دامنه ۳۶۰ میلی ثانیه (۰.۳۶ ثانیه) معطل می‌شوید. پس توصیه من این است که تا جایی که ممکن است و مشکلی براتون پیش نمیاد از ۲تا دی‌ان‌اس استفاده کنید.

۵- کاهش درخواست‌های HTTP:

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

<script type=”text/javascript” src=”menu_1.0.17.js”></script>
<?php insertScript(“menu.js”) ?> OK!

برای تصاویر هم از روش CSS Sprite استفاده کنید که آموزشش تو اینترنت هست. در اینجا می‌توانید تعداد درخواست‌هایی که از صفحه سایت شما می‌شود را ببینید.

۶- کامنت‌ها:

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

فعلاً کافیه، خسته نباشید؛ این قسمت هم تموم شد، فقط یه مورد رو که میخواهیم برای روزهای بعد آموزش بدیم نحوه‌ی ترکیب کردن استایل‌ها و جاواسکریپت‌هاست که سعی خواهیم کرد زودتر این آموزش رو آماده کنیم نه مثل این قسمت دوم که ۱۰ ماه طول کشید! 🙂

تاریخ انتشار: ۱۰ اسفند ۱۳۹۲
تاپیک: وردپرس

مهدی بهزادی

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

کد QR برای مطلب راهنمای بهینه سازی وردپرس در چند گام ساده (قسمت دوم)

تاکنون 2 نظر ثبت شده است، شما هم در بحث شرکت کنید.

  1. بازخورد: راهنمای بهینه سازی وردپرس در چند گام ساده

  2. بازخورد: ترکیب و فشرده سازی بی‌دردسر فایلهای CSS و JS وردپرس!

ارسال نظر

  • برای نمایش آواتار خود در فرم نظرات، می‌تونید در سایت گراواتار ثبت‌نام کنید.
  • ایمیل شما منتشر نمی‌شود و نزد ما محفوظ است.
  • شما می‌تونید از این تگ‌ها نیز استفاده کنید:
  • <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>