آموزش‌ها

نکاتی برای افزایش سرعت و کارآمدی سایت

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

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

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

1. کاهش تعداد درخواست‌ها برای نمایش یک صفحه (تلفیق css, js ها و همچنین تلفیق تصاویر با css sprite تا حد ممکن و استفاده مناسب از تصاویر inline)
2. کم کردن حجم تصاویر و همچنین minify کردن css, js ها
3. استفاده از فایل css, js به صورت اکسترنال و نه inline
4. فعال کردن کش سمت کاربر و سمت سرور برای محتواهای ثابت و صفحاتی با تغییرات کم.
5. در صورتی که بخشی از css, js های شما مربوط به صفحه/صفحات خاصی است و حجم قابل توجهی هم دارد، آن را به صورت یک فایل جداگانه درآورید و فقط به صفحه/صفحات مربوطه اتچ کنید.
6. فعال کردن gzip و Zopfli بر روی محتوای متنی
   این کار موجب می‌شود که فایلهای متنی (html, js, css) به صورت فشرده و zip شده به سمت کاربر ارسال شوند و حجم آنها گاهی تا یک دهم حجم اولیه تقلیل یابد. این کار علاوه بر بالا بردن سرعت لود، موجب کاهش پهنای باند مصرفی سرور می‌گردد.
7. اگر سرور و هاست شما معمولی و ضعیف است، از هات‌لینک شدن جلوگیری کنید. به عبارت دیگر مانع از بهره‌کشی سایت‌های دیگر از منابع استاتیک سایت‌تان شوید.
8. طراحی بهینه برنامه PHP سایت
   توضیح آنکه، هرچند php زبانی قدرتمند و سریع است، اما یک عملکرد معین را به روش‌های متعددی می‌توان کدنویسی کرد اما برخی از آن روش‌ها مقدار حافظه کمتری استفاده می‌کنند و همچنین در زمان کوتاه‌تری اجرا می‌شوند.
   همچنین برخی تکنیک‌ها (مثل استفاده از autoload) و همچنین استفاده کمتر از define و متغیرهای حجیم نیز موجب افزایش سرعت و کارآیی برنامه می‌شود که در این زمینه می‌توانید به کتبی که به صورت تخصصی در این زمینه نوشته شده، مراجعه بفرمایید. سایت php benchmark نیز در این زمینه مفید است.
9. طراحی بهینه ساختار پایگاه داده MySQL
   ساختار اولیه دیتابیس لازم است anomaly free باشد. همچنین نوع ساختار هر فیلد به درستی و طبق نیاز درنظر گرفته شود. index یگانه و چندگانه لازم بر روی جداول آن ایجاد شود و ...
10. بهینه‌سازی کوئری‌های SQL
    یک کار معین (مثل نمایش لیست رتبه و معدل دانش آموزانی که در یک کلاس خاص در سال گذشته جزو 5 نفر برتر بوده‌اند) را به چند گونه می‌توان از دیتابیس استخراج کرد. طبعا در بین این راه‌ها، یک راه نسبت به بقیه بهتر است. کتب مستقلی هم در زمینه نحوه نوشتن کوئری بهینه، نگاشته شده است که لازم است مطالعه شود.
11. استفاده از دامنه‌‌ی بدون‌کوکی برای محتواهای استاتیک
    این کار معمولا توسط زیردامنه‌ای (مثلا به نام static) از دامنه اصلی انجام می‌شود.
    یا در صورتی که اصلا سایت شما از کوکی استفاده نمی‌کند، می‌توان عبارات Header unset Cookie و Header unset Set-Cookie را به htaccess افزود تا هیچ کوکی رد و بدل نشود.
12. استفاده از ابزارهایی که به شما در زمینه سرعت و بارگزاری سایت، اطلاعاتی ارائه می‌دهند همانند سرویس‌های زیر خصوصا اولی که ظاهرا مرتبط با شرکت گوگل است:
    • GTmetrix
    • Test a website's performance
    • Load test your website online
    • Pingdom Tools
    • Byte Check - Check Your Time To First Byte
13. متوقف (stop) کردن انیمیشن در صورت نبودن در viewport با پلاگین‌هایی مثل jQuery viewport checker که در مطلب «بازی با پیمایش‌گر صفحه» به آن اشاره کردم.
14. متوقف کردن آپدیت‌های متوالی ای‌جکسی برخی عناصر سایت در صورت نبودن کاربر در صفحه سایت شما یا بیکار بودن او در صفحه (عدم حرکت موس و فشرده شدن کی‌بورد یا لمس صفحه برای لحظات طولانی) یا افزایش بازه زمانی بین درخواست‌های متوالی.
    که نوشتن برنامه js تشخیص غیرفعال بودن صفحه شما، کار سختی نیست هرچند یک نمونه آماده آن را قبلا در مطلب «بازی با زمان» معرفی کردم و پلاگین یک کیلوبایتی اما قدرتمند ifvisible نیز این کار را به سادگی انجام می‌دهد.
15. استفاده از سرو کننده nginx
    همانطور که در مطلب مزایای nginx و روش تنظیم و راه‌اندازی آن گفته شد، با نصب و تنظیم صحیح nginx می‌توانید تا حد زیادی مصرف منابع سرور را کاهش دهید.
16. با نصب برخی شتا‌ب‌دهنده‌ها (accelerator) که در اینجا برخی از آنها لیست شده، می‌توانید اجرای برنامه‌ها را شتاب بیشتری ببخشید. نصب ماژول‌های PageSpeed و SPDY (که توسط گوگل معرفی شده) نیز از جمله روش‌های افزایش سرعت بارگذاری صفحات برای کاربران است.
17. با نصب برخی برنامه‌های مانیتور سرور (مثل Munin) می‌توان تا حد زیادی روی منابع مصرفی سرور مدیریت داشته باشید و اگر در بخشی مصرف بالا بود، به راحتی علت آن را بیابید. مثلا می‌توانید ببینید که در بین کوئری‌های SQL کدام کوئری در ماه گذشته بیشترین منابع را مصرف کرده که نسبت به بهینه‌سازی آن اقدام کنید.
18. استفاده از کتابخانه‌های کوچک js, css بجای کتابخانه‌های بزرگ
    مثلا بسیاری از ما بخاطر استفاده از ajax یا animation ممکن است جی‌کوئری را به صفحه ضمیمه کنیم. یا برای زیبا کردن 4 تا دکمه و ورودی، بوتسترپ را در صفحه اینکلود کنیم. در حالی که ما فقط از یکی دو درصد قابلیت آنها می‌خواهیم استفاده کنیم. در این مواقع بهتر است سری هم به کتابخانه‌های سبک‌تری که در این زمینه هست، بزنیم. مثلا در سایت microjs.com می‌توانید صدها نمونه از کتابخانه‌های اختصاصی (برای ای‌جکس و انیمیشن و ...) را ببینید که در حدود 1 کیلوبایت حجم دارند!
    همچنین بسیاری از اوقات نیز ما اصلا به هیچ کتابخانه خاصی نیاز نداریم و کاری که مدنظر داریم، با خود جاوا اسکریپت به سادگی قابل انجام است که سایت You might not need jQuery (یعنی: شما ممکن است جی‌کوئری نیاز نداشته باشید!) دقیقا به همین منظور ایجاد شده است.
19. اگر سایت وردپرسی دارید، استفاده از پلاگین‌های P3 به شما کمک می‌کند که به سادگی متوجه شوید کدام پلاگین‌ها برای سایت شما سنگین است تا آن پلاگین‌ها را تغییر/غیرفعال/حذف کنید.
20. استفاده از CDN ها و سرورهای قدرتمند رایگان برای سرو محتویات استاتیک
    محتویات استاتیک نظیر css, js, font و تصاویر و صدا و فیلم، بخش اعظم صفحات سایت‌ها هستند که فشار و پهنای باند زیادی را بر سرور تحمیل می‌کند. سرو کردن اینگونه محتویات از طریق سرورهای مناسب دیگر، نه فقط بار سرور و سایت شما کاهش می‌دهد بلکه سرعت لود محتویات را به صورت چشمگیری افزایش می‌دهد. مثلا شما می‌توانید ویدئوها را از یوتیوب سرو کنید، تصاویر را از cloudinary سرو کنید، فایل‌های css, js را از cdn هایی نظیر cdnjs, jsDeliver, rawgit و ... استفاده کنید خصوصا jsDeliver که ویژگی‌های منحصربفردی دارد از جمله امکان لود چند js یا css با یک درخواست.

1. سرویس های آنلاین رایگان برای نوشتن، تست و بهینه سازی کدهای برنامه نویسی
2. همه چیز درباره داده ها و تصاویر Inline درون برنامه ای
3. مزایای nginx و روش تنظیم و راه اندازی آن
4. حذف درخواست اضافه تصویر انیمیشن لودینگ
5. همه چیز درباره کش(cache) سمت سرور و کاربر
6. چگونه یک هاست مناسب انتخاب کنیم؟
7. آشنایی با css sprite و نکات پیرامون آن
8. کلید خارجی (Foreign Key) ، محاسن و معایب آن
9. روش کار با mod_rewrite
10. هنر css نویسی (نکاتی برای بهتر نوشتن استایل صفحات وب)
11. برخی دستورات لینوکسی موردنیاز برای مدیریت سرور
12. معرفی چند سایت جهت آپلود رایگان فایل ها
13. نکاتی پیرامون SEO (بهینه سازی سایت جهت موتورهای جستجو)
14. www در ابتدای آدرس سایت، خوب است یا بد؟