یکی از مهمترین جنبه های سایت شما سرعت بارگذاری آن است. کاربران می خواهند فوراً یک عکس بدون هیچ ترمزی دریافت کنند و اگر نتوانید این را به آنها بدهید، برای مدت طولانی در جستجوی اطلاعات در جای دیگر تردید نخواهند کرد. در این مقاله به 5 روش می پردازیم که به شما امکان می دهد زمان بارگذاری سایت خود را سرعت بخشید.
1. از YSlow برای پیگیری زمان بارگذاری صفحه استفاده کنید
با دانستن مدت زمان بارگذاری صفحات، می توانید مناطق مشکل را شناسایی کنید. همچنین به شما انگیزه دیگری می دهد تا وارد عملکرد شوید و سعی کنید وضعیت را اصلاح کنید.
قبل از شروع، شما باید YSlow را نصب کنید، اگر قبلاً نصب نکرده اید. YSlow یک پسوند برای است موزیلا فایرفاکسکه می توانید در این صفحه پیدا کنید:
حالا بیایید یک سایت باز کنیم. فرض کنید Six Revisions، به طوری که تقریباً همان داده ها را داشته باشیم (فقط این سایت را در یک برگه جدید مرورگر خود باز کنید).
در سمت راست پایین مرورگر خود، یک پانل ویژه با یک نماد دارید (شکل 1 را ببینید). کمی دورتر از این پنل، پس از بارگیری صفحه، در کنار «YSlow» یک عدد خواهید دید. این عدد زمان بارگیری این صفحه در مرورگر شما بر حسب ثانیه است. ما می خواهیم این تعداد تا حد امکان کوچک باشد.
رایج ترین "ترمزها" اشیاء یا عملیات زیر هستند:
- درخواست های HTTP بسیار زیاد است
- فایل های جاوا اسکریپت فشرده نشده
- بدون زمان انقضای هدر برای فایل های گرافیکی
تا چند دقیقه دیگر به این موضوع نگاه دقیق تری خواهیم داشت.
برای اینکه با این سیستم راحت شوید، چندین سایت را مرور کنید و زمان بارگذاری آنها را بررسی کنید. می‌توانید گوگل، فیس‌بوک و چند وبلاگ/وب‌سایت مورد علاقه خود را که بیشتر بازدید می‌کنید، آزمایش کنید. توجه داشته باشید که فایل ها و تصاویر جاوا اسکریپت بیشترین تاثیر را روی سرعت دارند.
ما از YSlow به طور کامل استفاده می کنیم
علاوه بر محاسبه YSlow زمان بارگذاری صفحه، پسوند داده شدههمچنین اطلاعات گسترده ای را در مورد مواردی که برای بهینه سازی بارگذاری سایت خود باید اصلاح کنید در اختیار شما قرار می دهد تا بتوانید حفره ها را اصلاح کنید.
برای چنین اطلاعاتی، روی تب Performance کلیک کنید. پس از خزیدن در سایت، YSlow یک امتیاز کلی به شما می دهد که عملکرد صفحه شما را مشخص می کند.
دسترسی به اطلاعات را می توان با استفاده از CDN (شبکه تحویل محتوا) تسریع کرد. CDN بهتر است برای سایت های بزرگ استفاده شود. آنها برای توزیع اطلاعات در چندین سرور در داخل استفاده می شوند بخش های مختلفصلح به این ترتیب اطلاعات از سرور مربوطه (که نزدیک ترین به کاربر است) دانلود می شود تا از طریق روترهای شخصی عبور نکند. YSlow همچنین درخواست های CDN را ردیابی می کند.
اما مردم معمولاً از CDN ها استفاده نمی کنند (که بسیار گران است).
طبقه بندی انواع خطا
حال اجازه دهید هر موردی را که در پسوند ذکر شده در بالا وجود دارد مرور کنیم. در زیر خلاصه ای از نحوه قضاوت صفحات شما و نحوه برخورد با مشکلات برای دستیابی به حداکثر کارایی را مشاهده خواهید کرد.
تا حد امکان درخواست HTTP را کمتر کنید: درخواست HTTP زمانی رخ می دهد که مرورگر درخواستی را به سرور ارسال کند. همین امر می تواند هنگام اتصال اسکریپت ها، فایل های CSS، تصاویر، و همچنین با درخواست های ناهمزمان، هم از سمت مشتری و هم از سمت سرور (Ajax و سایر فناوری های مشابه) اتفاق بیفتد. با این حال، هنگامی که صحبت از عملکرد سیستم می شود، ارزش آن را دارد که چقدر آن را در نظر بگیرید درخواست های مشابهدر صفحه شما اتفاق می افتد یکی از راه حل ها استفاده از کش برای کمک به ماشین های سرویس گیرنده برای بارگذاری سریعتر اسکریپت ها، CSS و تصاویر است.
افزودن سرصفحه های منقضی: 80 درصد بارگذاری صفحه بر دانلود اسکریپت ها، عکس ها و فایل های CSS متمرکز است. در بیشتر موارد، این موارد در ماشین های کاربر تغییر نمی کنند. با افزودن مقداری کد به فایل htaccess خود، می‌توانید فایل‌های تکراری را در دستگاه محلی کاربر ذخیره کنید (در ادامه در مورد نحوه انجام این کار صحبت خواهیم کرد).
اجزای Gzip: Gzip را اعمال کنید یا فایل‌های JS، تصاویر را فشرده کنید. اسناد HTML، فایل های CSS و غیره به کاربران این امکان را می دهد تا اطلاعات را با حجم کم دانلود کنند که سرعت بارگذاری صفحه را به میزان قابل توجهی افزایش می دهد. علاوه بر این، این کار باعث صرفه جویی در فضا در سرور می شود، با این حال، باز کردن داده ها می تواند پاسخ را کاهش دهد و مستقیماً به مرورگر کاربر بستگی دارد.
قرار دادن CSS در بالای صفحه: اگر اتصال CSS خود را در بالای صفحه قرار دهید، به این معنی است که ابتدا آنها بارگذاری می شوند و تصاویر و اسکریپت ها بعدا.
JS خود را در پایین صفحه قرار دهید: اکنون که فایل های CSS شما در بالای صفحه بارگذاری می شوند، زمان آن رسیده است که اسکریپت های JS خود را درست قبل از تگ بسته شدن قرار دهید. این به صفحه شما اجازه می دهد تا رندر شود و سپس اسکریپت های لازم را شامل شود.
اجتناب از عبارات CSS: من شخصاً هرگز از عبارات CSS (که به آن ویژگی های پویا نیز گفته می شود) استفاده نکرده ام. این عبارات مفاهیم برنامه نویسی بومی اینترنت اکسپلورر (مانند عبارات شرطی) در CSS هستند. فناوری ای که در IE8 و در تمامی نسخه های دیگر استفاده می شود، دیگر پشتیبانی نخواهد شد، بنابراین در هر صورت باید با این نوشتن عبارات CSS گره بخورید. PHP برای چنین مقاصدی مناسب تر است، به عنوان مثال، برای بارگیری سبک های مختلف CSS بسته به شرایطی مانند یک عدد تصادفی، زمان روز یا مرورگر کاربر.
JS و CSS را در فایل های جداگانه بنویسید: اگر اسکریپت های خود را در JS و قرار دهید سبک های cssدر فایل‌های جداگانه، مرورگر به راحتی می‌تواند آنها را در حافظه پنهان ذخیره کند، در نتیجه به صفحه شما اجازه می‌دهد در آینده سریعتر بارگذاری شود.
کاهش زمان جستجوی DNS: زمانی که کاربر نام سایت شما را در نوار مرورگر تایپ می کند، جستجوی DNS آدرس IP که سایت شما در آن قرار دارد بلافاصله شروع می شود. هر چه سایت شما دارای منابع خارجی بیشتری باشد، جستجوی DNS زمان بیشتری می برد. به عنوان یک قاعده، یک چنین جستجو 60-100 میلی ثانیه طول می کشد.
Minify JS: علاوه بر فشرده سازی با gzip، کوچک کردن فایل های جاوا اسکریپت به شما این امکان را می دهد که اسکریپت های خود را با خلاص شدن از شر فضاهای غیر ضروری، برگه ها و سایر کاراکترهای خاص که به اندازه فایل های بزرگ می شوند، سبک کنید. واضح است - هر چه فایل ها کوچکتر باشند، صفحات سریعتر بارگذاری می شوند. می توانید از ابزار JSMIN برای کوچک کردن فایل های جاوا اسکریپت استفاده کنید.
اجتناب از تغییر مسیر: فرقی نمی‌کند که تغییر مسیر را کجا انجام دهید، در JS، HTML یا PHP. در هر صورت، مرورگر شما یک هدر صفحه خالی دریافت می کند که بارگذاری آن زمان می برد. بنابراین فقط سعی کنید از تغییر مسیر در جایی که بتوان از آن اجتناب کرد استفاده نکنید.
اجتناب از بارگیری اسکریپت تکراری: اگر مرورگر شما یک اسکریپت را بیش از یک بار بارگذاری کند، به طور قابل توجهی بر بارگذاری صفحه تأثیر می گذارد. ریاضی اینجا سخت نیست. هر چه تعداد دانلود فایل های مشابه بیشتر باشد، بیشتر می شود بارگذاری طولانی ترصفحات اسکریپت های خود را مرور کنید و مطمئن شوید که 2 یا 3 بار با jQuery تماس نگیرید. همین امر در مورد اسکریپت های JS نیز صدق می کند.
خوب... فکر می کنم همین کافی است. حالا اجازه دهید قبل از بررسی تکنیک های دیگری که سرعت بارگذاری صفحه شما را افزایش می دهند، به تب بعدی YSlow برویم.
تب Components به شما این امکان را می دهد که تعیین کنید برای بهبود سرعت دانلود خود چقدر باید تلاش کنید. در اینجا اطلاعاتی در مورد وزن هر فایل و همچنین مدت زمان لازم برای دانلود پیدا خواهید کرد. همچنین می‌توانید ببینید کدام فایل‌ها در حال زیپ کردن هستند، از زمان پاسخ‌دهی، و اینکه آیا فایل‌ها در دستگاه کاربر ذخیره شده‌اند یا خیر، و زمانی که حافظه پنهان به پایان می‌رسد، پی ببرید. این اطلاعات می تواند برای شما در هنگام ارزیابی مشکلات سایتتان مفید باشد، متوجه خواهید شد که چه مشکلی دارید و چه چیزی باید بهینه شود.
و در نهایت به ادامه مطلب می پردازیم آخرین برگهبرگه آمار. در اینجا اطلاعاتی در مورد تمام درخواست‌های HTTP، هم برای فایل‌های معمولی و هم برای فایل‌های حافظه پنهان پیدا می‌کنید. مقدار Empty cache نشان می دهد که این فایل ها باید برای رندر صفحه بارگذاری شوند. به نوبه خود، Primed Cache فایل هایی هستند که قبلاً توسط مرورگر کاربر ذخیره شده اند. این بدان معنی است که آنها نیازی به دانلود ندارند.
2. از CSS Sprites برای کاهش درخواست های HTTP استفاده کنید
CSS sprites احتمالاً مهمترین چیزی است که بشر از زمان اختراع الکتریسیته تسلا به آن دست یافته است... من در واقع گفتم که... اوه، منظورم ادیسون بود.
خوب، شاید خیلی جالب ترین نباشد، اما هنوز.
CSS sprites می تواند با کاهش تعداد درخواست های HTTP که برای دانلود تصاویر ارسال می شود، به بهبود سرعت بارگذاری صفحه کمک زیادی کند.
شما می‌توانید آموزش‌های زیادی را پیدا کنید که در مورد چگونگی پیمایش آسان CSS sprites - به طور کلی، استفاده از آنها در یک رابط کاربری صحبت می‌کنند.
حالا بیایید نگاهی گذرا به نحوه استفاده یوتیوب از CSS sprites بیندازیم. این چیزی است که sprite استفاده می کنند:
YouTube از این فایل به روشی نسبتاً اصلی استفاده می کند. آنها آن را به عنوان پس زمینه برای کلاس sprite بارگذاری می کنند. هنگامی که انتخاب یک عنصر ضروری می شود، موقعیت اولیه زمانی انتخاب می شود که کمک CSSویژگی های پس زمینه موقعیت و سپس اعمال ارتفاع و عرض.
بیایید چیزی مشابه را امتحان کنیم. بیایید روی همان تصویر از YouTube آزمایش کنیم.
در مثال زیر لوگوی یوتیوب را روی صفحه نمایش می دهیم. با استفاده از همان کلاس sprite، و همان تصویر، می‌توانیم تصویری ایجاد کنیم که با ماوس تغییر می‌کند.
بنابراین، با استفاده از این تصویر، می توانیم تمام اتصالات را به یک درخواست HTTP کاهش دهیم. خوب، چه تاثیری دارد؟
مزیت دیگر جن CSSاین است که هنگام اعمال کلاس :hover pseudo، تصویر برای چند لحظه (که برای بارگذاری یک تصویر جدید طول می کشد) ناپدید نمی شود، همانطور که بدون این اتفاق می افتد. استفاده از CSSجن
3. فایل های CSS را در ابتدا، جاوا اسکریپت را در پایان بارگذاری کنید
برای برخی از سایت ها، کاهش تعداد درخواست های HTTP می تواند عملکرد را از بین ببرد. راه دیگر برای افزایش سرعت بارگذاری صفحه، قرار دادن تمام اتصالات فایل جاوا اسکریپت در انتهای سند است.
همچنین شایان ذکر است:
- فایل های CSS را درست قبل از شروع تگ بدنه در قسمت بارگذاری کنید.
- جاوا اسکریپت را درست قبل از بسته شدن تگ بدنه اضافه کنید.
اگر توصیه‌های ما را دنبال کنید، به کاربران خود اجازه می‌دهید تا سایت‌های شما را در حالی که جاوا اسکریپت شما در پس‌زمینه بارگذاری می‌شود، تحسین کنند.
توجه: اگر نمی خواهید حرکت کنید تگ های جاوا اسکریپت، چون می ترسید که عملکرد افت کند، توصیه می کنم از ویژگی defer استفاده کنید. به این صورت اعمال کنید: