این روزا خیلیا برای فروشگاه و شرکت یا معرفی خودشون، سایت راه اندازی میکنن. بیشتر سایتا هم با یه نرم افزار مدیریت سایت معروف به اسم وردپرس ساخته میشه. وردپرس رابط کاربری خوب و ساده ای داره و این قابلیت رو داره که روش پلاگین یا به عبارت دیگه افزونه اضافه کنید و امکاناتش رو بیشتر کنید. مثلاً برای فروشگاه افزونه قدرتمندی داره.
سئو یا بهینه کردن سایت برای موتورهای جستجو مثل گوگل، موضوع مهمیه و تو بهینه سازی سئو، افزایش سرعت سایت اهمیت زیادی داره. هر چی سرعت سایت بیشتر باشه، هم گوگل استقبال بیشتری میکنه و شاید سایت شما رو در نتایج بالاتر نشون بده و هم کاربرای سایت رضایت بیشتری دارن و شاید مدت زمان بیشتری تو صفحات سایت شما گردش کنن. به جای استفاده از دوره افزایش سرعت سایت وردپرسی میخوایم ۴ روش ساده که سرعت سایت رو افزایش میده، با هم بررسی کنیم. با ساده‌گو همراه باشید.
سرعت سایت رو با اینترنت کم سرعت تست کنید!
یه اشتباه متداول در تست سرعت سایت اینه که از اینترنت سریع 4G و 5G در جایی که آنتن و سرعت اینترنت خوبه، استفاده میکنن ولی همه افرادی که سایت شما رو باز میکنن، همچین اینترنتی ندارن! اگه سرعت سایت وردپرس رو خودتون بهینه میکنید یا پروژه افزایش سرعت سایت رو به یه متخصص واگذار میکنید، موقع بررسی سرعت دقت کنید که میتونید توی مرورگر گوگل کروم، در صفحه نمودار آبشاری سرعت و زمان باز شدن فایلای سایت، حالت کانکشن کم سرعت مثل اینترنت نسل ۲ رو فعال کنید. به این ترتیب متوجه میشید که اگه سرعت اینترنت کم باشه، سایت شما چند ثانیه ای باز میشه.
از فریم ورک و قالب سنگین استفاده نکنید!
منظور از فریم ورک یه سری امکاناته که برای ساده شدن ساخت یه برنامه استفاده میشه. قالب های وردپرس خیلی متنوع هست اما همه قالب ها سبک و بهینه نیست. بعضی از قالب ها با استفاده از فریم ورک ساخته شده و فریم ورکی که استفاده شده، سنگینه و این یعنی وقتی یه بازدیدکننده میخواد صفحه ای از سایت رو باز کنه، سرور سایت شما باید محاسبات بیشتری انجام بده که خب بیشتر طول میکشه.
بعضی از فریم ورک ها حجم دیتابیس سایت رو بیهوده بالا میبرن و اطلاعات زیاد و غیرضروری زیادی تو دیتابیس ذخیره میکنن. ممکنه فریم ورکی که استفاده میکنید، حجم عکسا رو پایین نیاره و عکسای بزرگ رو کوچک نکنه. اینا همه جزو مواردیه که سایت رو در درازمدت سنگین میکنه.
بعضی از کاربرای وردپرس که خودشون وردپرس و قالب نصب کردن، میگن خب مشکلی نیست، یه هاست اشتراکی یا اصلاً یه سرور مجازی قوی میخریم که پردازنده و رم خوبی داشته باشه و محاسبات رو سریع انجام بده. اما مسأله اینه که شاید کسی که از سایت شما بازدید میکنه، کامپیوتر یا گوشی ضعیفی داشته باشه و باز شدن یه صفحه سنگین سخت باشه یا ممکنه سرعت اینترنت شخصی که بازدید میکنه، کم باشه و حسابی معطل بشه.
قالب سایت باید سبک و بهینه باشه و همون ابتدای کار خوب در موردش بررسی و فکر کنید چون بعد از چند سال، تغییر دادن قالب سخت میشه و مجبور میشید با متخصص مشورت کنید و هزینه افزایش سرعت سایت بالا میره.
از کتابخانه های حجیم جاوااسکریپت و سی اس اس استفاده نکنید!
مورد مهم بعدی در چک لیست افزایش سرعت سایت وردپرسی و هر سایت دیگه ای اینه که حجم فایل های CSS که استایل و ظاهر صفحه رو تنظیم میکنه زیاد نباشه. حجم فایل های JS یا جاوااسکریپت که عناصر رو پویا یا متحرک میکنه، مثل گالری تصویر و نوع و کارکرد کدها هم مهمه. بعضی از کاربرا که از قالب آماده استفاده میکنن و بعضی از برنامه نویسا که خودشون قالب مینویسن، برای راحت شدن کار سراغ کتابخانه های آماده میرن. تو این کتابخانه ها یه سری استایل یا تابع و کلاس موجوده ولی ممکنه حجمشون زیاد باشه. مشکل دیگه به بازدیدکننده مربوط میشه، اگه سیستم بازدیدکننده خوب نباشه، اجرا شدن کلی تابع و کد جاوااسکریپت و رندر کردن استایل های پیچیده، سخت میشه و موقع گشت و گذار تو صفحات سایت، کاربر حس میکنه که صفحه تیک میزنه یا لگ داره.
بنابراین در انتخاب قالب یا نوشتن قالب اختصاصی، نباید سراغ کتابخانه های حجیم و اضافی رفت و حتی اگه حجم کتابخانه جاوااسکریپت کم باشه، باید توابع رو بررسی کرد و از توابعی که محاسبات زیاد و سنگین داره، استفاده نکرد.
خب در مورد حجم فایلای جاوااسکریپت و سی اس اس ۲ راهکار ساده داریم:
راه اول: فشرده سازی به کمک GZIP هست که با اضافه کردن یک یا چند خط کد تو یه فایل خاص از سرور یا هاست سایت، به راحتی فعال میشه. فعال شدن GZIP یعنی فایلای متنی مثل JS و CSS اول فشرده و زیپ میشه و بعد برای بازدیدکننده سایت ارسال میشه. زیپ شدن فایل عکس و ویدیو خیلی حجم رو کاهش نمیده اما فایل متنی رو خیلی فشرده تر میکنه.
راه دوم: میتونید فایلای مربوط به کتابخانه های معروف جاوااسکریپت رو از بعضی از سرویس های CDN یا شبکه تحویل محتوا بارگذاری کنید و نه از سرور سایت خودتون. میشه از روش ایمپورت کردن ماژول ها هم استفاده کرد که نیاز به تغییراتی در کدهای قالب و به خصوص هدر داره. مثلاً میتونید فایلای جاوااسکریپت کتابخانه های مختلفی رو از سایت jsdelivr.net بارگذاری کنید.
<script type="module">
import capitalize from 'https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/capitalize.js';
alert(capitalize("hello world!"))
</script>
البته اگه این نوع سرویس ها مشکل پیدا کنه، دیگه سایت شما به شکل عادی و سالم توسط بازدیدکننده دیده نمیشه چون بعضی از فایلای قالب براش لود نشده.
فرق defer و async در بارگذاری جاوااسکریپت
آیتمای جاوااسکریپت و CSS یا استایل رو میشه هر جایی از صفحه سایت قرار داد و معمولاً برای اینکه ظاهر سایت درست باشه، اینا رو توی هدر سایت میذارن که همون ابتدای کار بارگذاری بشه. در مورد کدها یا در واقع فایلای جاوااسکریپت، میتونید از دو مشخصه به اسم defer و async استفاده کنید که خیلی فرق دارن.
اولاً اگه از defer یا async استفاده نکنید، همه چی به موازات هم دانلود میشه و بعد مرورگر اینترنت فایل اصلی صفحه سایت که HTML هست رو پردازش میکنه و المان ها رو به تصویر میکشه.
خب پس بدون defer و async اگه حجم فایلای جاوااسکریپت شما زیاد باشه و سرعت اینترنت بازدیدکننده کم باشه، صفحه دیر باز میشه.
اگه از defer استفاده کنید، در واقع به مرورگر اینترنت بازدیدکننده میگید که این فایل جاوااسکریپت رو بعد از به تصویر کشیدن صفحه دانلود کن و اجراش کن. در نتیجه فرضاً اگه یه فایل حجیم JS داشته باشید که خیلی ضروری نیست، جلوی سریع باز شدن صفحه سایت رو نمیگیره.
برای استفاده از این مشخصه باید خطوط مربوط به تگ <script> رو در هد صفحه سایت ویرایش کنید و کلمه defer رو اضافه کنید. مثل نمونه زیر:
<html>
<head>
<script src="/js/foo.js" defer></script>
</head>
<p>I render before the script.</p>
</html>
اما بریم سراغ مشخصه async که روش اضافه کردنش توی هد سایت مثل defer هست و کارش اینه که به مرورگر اینترنت میگه همزمان با اینکه داری فایل HTML صفحه سایت رو پردازش میکنی و صفحه رو به تصویر میکشی، این فایل جاوااسکریپت رو هم دانلود کن و هر وقت دانلود تموم شد، اجراش کن.
<head>
<script src="/js/foo.js" async></script>
</head>
پس defer میشه لود شدن در آخرین اولویت، async میشه لود شدن حین نمایش صفحه و هر دو حالت سریع تر از اینه که فایل دانلود بشه و بعد صفحه نمایش داده بشه.
تقسیم فایل استایل به چند بخش و استفاده از Inline Critical CSS
برای اینکه بالای صفحه سایت زودتر به تصویر کشیده بشه، میتونید یه فایل CSS حجیم و بزرگ رو ۲ قسمت کنید و یه قسمت مهم رو بزارید جزو فایل HTML صفحه باشه و مابقی فایل رو به شکل عادی و با تگ link در هد سایت قرار بدید. این کار باعث میشه که اگه اینترنت کاربر کند هست، کاربر اول بخش بالای صفحه رو با استایل عادی ببنیه و بخش پایین تر به شکل ساده و متنی و بدون استایل دیده بشه و به محض دانلود شدن فایل CSS اصلی، بخش پایین هم به شکل صحیح نمایش داده بشه.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="below-the-fold.js" defer></script>
<style>
/* Critical CSS. */
</style>
</head>
<body>
<aside>Above the fold.</aside>
<main>
<p>Below the fold.</p>
</main>
<link rel="stylesheet" type="text/css" href="below-the-fold.css">
</body>
</html>
به مثال زیر توجه کنید:
حتی میشه از یه فایل جاوااسکریپت که به صورت defer و بعد از نمایش صفحه دانلود شده استفاده کرد و در اون فایل، اضافه شدن کدهای css در صفحه رو کدنویسی کرد. البته این راهکارها برای حالتی هست که حجم فایلای استایل قالب شما واقعاً زیاده. راهکار اساسی و اصولی تر اینه که شما در قدم اول قالب سبک و بهینه انتخاب کنید که گرفتار مشکلات بعدی نشید.
فشرده سازی عکس و ویدیو
تو سایت شرکتی و فروشگاه یا سایت شخصی، ممکنه که از عکسایی که با دوربین خودتون گرفتید استفاده کنید و خب گوشیای امروزی دوربین رزولوشن بالایی دارن و این یعنی عکسا خیلی بزرگه. مثلاً ۸۰۰۰ در ۶۰۰۰ پیکسل که میشه ۴۸ مگاپیکسل، خب این یه سایز خیلی زیاده چون مانیتور یا تلویزیون یا گوشی و تبلت معمولاً صفحه نمایشی داره که تعداد پیکسل در عرض و ارتفاع کمتر از ۲ ۳ هزار پیکسل هست. بنابراین باید عکسا رو از نظر اندازه، کوچک کنید. از نظر کیفیت هم باید عکسا رو فشرده کرد و از فرمتهای فشرده مثل WEBP یا jpg که بهینه شده، استفاده کرد.
برای فشرده سازی عکس تو وردپرس میشه یه افزونه رایگان افزایش سرعت سایت و فشرده سازی عکس نصب کرد. خوشبختانه افزونه های رایگان زیادی برای این کار نوشته شده. در عین حال بهتره که قبل از آپلود کردن عکس و همین طور ویدیو تو سایت وردپرس، اون رو با برنامه های ویندوزی فشرده کنید. این طور حجم هاست یا سرور شما هم زود پر نمیشه چون فایل اضافه و اورجینال عکس یا ویدیو رو به صورت حجیم آپلود نکردید.
استفاده از افزونه کش
توی دوره رایگان افزایش سرعت سایت همیشه توصیه میکنن که افزونه برای کش کردن صفحه نصب کنید. اما این یعنی چی؟ افزونه کش زمانی که یه بازدیدکننده صفحه ای از سایت رو باز میکنه، اول بررسی میکنه که این صفحه از قبل محاسبه و آماده شده و فایل مربوط به اون صفحه ساخته شده یا خیر. اگه ساخته شده باشه، فایل آماده رو برای مرورگر کاربر ارسال میکنه و اگه نشده باشه، محاسبات رو انجام میده، صفحه رو میسازه و فایل HTML صفحه رو ذخیره میکنه و بعد برای کاربر میفرسته. خب اون فایل ذخیره شده برای نفر بعدی که همون صفحه رو باز کنه، ارسال میشه و این یعنی پردازش هاست و سرور شما سبک تر میشه و صفحات سایت هم زودتر در اختیار کاربر سایت قرار میگیره.
بنابراین یه کار مهم که به عنوان خدمات افزایش سرعت سایت وردپرسی انجام میدن و برای سایتی که روی هاست و سرور ضعیف میزبانی شده، خیلی موثره، نصب کردن افزونه کش هست. چندین افزونه کش رایگان داریم و نیازی به استفاده از افزونه های پولی یا اشتراک پریمیوم نیست.
howtogeekساده‌گو
