در دنیای دیجیتالی امروزی، میلیون‌ها وب سایت هر روز به دلایل مختلف طراحی می شوند. متاسفانه بسیاری از این وب سایت‌ها سنگین و آزار دهنده هستند، وب سایت‌های بهینه سازی شده ضعیف، با انواعی از مسایل از جمله زمان‌های بارگذاری آهسته، غیر متحرک بودن ، ناسازگاری مرورگر ، و سایر موارد به ستوه آمده‌اند.
در این مقاله تکنیک‌های مفیدی معرفی خواهد کرد، که می‌توانید برای کمک به بهبود طراحی سایت و بهبود بهینه‌سازی نهایی خود از آن استفاده کنید. با تمرکز بر روی کد های تمیز ، فشرده‌سازی تصاویر ، به حداقل رساندن درخواست‌های خارجی ، اجرای یک Content Delivery Network) CDN) و چند روش دیگر ، شما می‌توانید با به کار گیری این روش ها، به طور چشمگیری سرعت و عملکرد کلی وب سایت خود را افزایش دهید.
آنچه در این مقاله خواهید آموخت
مرتب نوشتن کد های سمت کاربر
- تمیز نوشتن کدهای html :html یا زبان نشانه‌گذاری فرامتن، پایه های تقریبا هر وب سایتی است؛ html به شما این امکان را می‌دهد که صفحات وب را با عناوین، زیر شاخه ها , لیست‌ها و دیگر ویژگی‌های متنی مفید فرمت کنید. با تازه‌ترین ویژگی ها در html5، شما همچنین می‌توانید گرافیک جذاب ایجاد کنید. html می‌تواند به راحتی توسط خزنده های موتور های جست و جو، خوانده شود. بنابراین موتورهای جستجو را می‌توان با محتوای وب سایت شما، و در زمان مناسب به روز کرد. هنگام مواجهه با html باید سعی کنید طوری این کد ها را بنویسید، که هم مختصر و هم موثر باشد، در واقع هنگام نوشتن کد های html باید دقت کنید که بهینه سازی کدها رعایت شود. علاوه بر این، زمانی که به منابع دیگر در سند html مراجعه می کنید، بهترین تجارب برای شما وجود داشته باشد.
- قرار دادن مکان مناسب برای CSS: پس از ایجاد اسکلت اصلی HTML برای یک صفحه وب ، طراحان وب تمایل به ایجاد استایل های سایت دارند. به این ترتیب، گاهی اوقات اجزای CSS در حوالی پایین سند قرار داده می‌شوند. با این حال توصیه می‌شود که CSS را در بالای عنوان سند HTML تان قرار دهید، تا از تفسیر های متوالی اطمینان حاصل شود.
<head> <'link href='https://yourwebsite.com/css/style.css' rel='stylesheet' type='text/css> </head>این استراتژی باعث افزایش سرعت بارگذاری وب سایت شما نخواهد شد، اما بازدیدکنندگان شما را از انتظار در یک صفحه خالی، و یا دیدن انبوهی از متن های بدون استایل، حفظ خواهد کرد . اگر بیشتر عناصر بصری شما در حال بارگذاری هستند، بازدیدکنندگان بیشتر منتظر می‌مانند تا کل صفحه آپلود شود؛ و در نتیجه منجر به بهینه‌سازی کد های سمت کاربر می شود.
- تعیین مکان مناسب برای جاوا اسکریپت: احتمالا می دانید که، اگر JavaScript را درون برچسب عنوان یا حدود بالای سند HTML قرار دهید ، فرآیند بارگذاری عناصر HTML و CSS را مسدود خواهد کرد. این اشتباه می‌تواند باعث شود که بازدیدکنندگان در صفحه سفید منتظر بمانند، و بنابراین ممکن است با بی‌صبری وب سایت شما را ترک کنند. شما می‌توانید با قرار دادن صفات جاوا اسکریپت در پایین سند HTML خود از این مساله اجتناب کنید. علاوه بر این، هنگام استفاده از جاوا اسکریپت، شما باید همیشه بارگذاری متن متقارن را ترجیح دهید. این کار از هر گونه تگ اسکریپت <script> که باعث مسدود شدن فرآیند HTML در میانه سند شما می شود، جلوگیری می‌کند.
با وجود این که HTML یکی از ابزارهای بسیار با ارزش برای طراحان وب است، اغلب با CSS و ویژگی‌های جاوا اسکریپت به کار می‌رود، که این امر می‌تواند باعث کاهش سرعت بارگذاری صفحه وب سایت شما کند. CSS و ویژگی‌های جاوا اسکریپت می‌توانند طراحی سایت شما را بهبود ببخشد، و همچنین آن را به صفحه بهتری تبدیل کند، اما شما باید دقت خاصی داشته باشید، و از آن‌ها به طور مناسب استفاده کنید. تمرین خوبی با CSS و جاوا اسکریپت این است که از قرار دادن همه کدها در یک مکان، اجتناب کنید. اگر زمانی که کدها را در متن html قرار می دهید، CSS را در یک برچسب استایل <style> قرار دهید، و از جاوا اسکریپت در برچسب اسکریپت<script> استفاده کنید، این امر مقدار کد HTML را افزایش می‌دهد، در نتیجه بارگذاری صفحه سایت شما افزایش می یابد.
ترکیب فایل های سمت کاربر
ممکن است شما در گذشته، به طور مکرر اسکریپ ها و استایل ها را در یک فایل واحد با هم ترکیب کرده باشید؛ تا بتوانید به سادگی یک فایل را در کد HTML خود ارجاع دهید. این یک تمرین صحیح، هنگام استفاده از پروتکل HTTP1 بود، با این حال دیگر نیازی به انجام این کار نیست. با توجه به مزایای HTTP2 شما هم اکنون می‌توانید از HTTP2 استفاده کنید، تا درخواست HTTP را ارسال و دریافت کرده، و پاسخ‌های نامتقارن HTTP را از طریق یک اتصال TCP دریافت کنید. این موضوع به این معنی است که، شما دیگر نیازی به ترکیب اسکریپت ها در یک فایل واحد ندارید.
بهینه سازی عملکرد CSS
css یا صفحات سبک آبشاری، می‌تواند برای تبدیل محتوای html شما به یک سند تخصصی و حرفه‌ای استفاده شود. بسیاری از گزینه‌های css به درخواست http نیاز دارند ( مگر استفاده از css های داخلی )، بنابراین باید سعی کنید فایل‌های css را بدون حذف ویژگی‌های ضروری آن ها، به حداقل برسانید. اگر بنر شما ، پلاگین ها و استایل چیدمان لینک های شما، همگی در فایل‌های CSS جداگانه قرار دارند، این کار به مرورگرهای وب شما نیاز دارد تا فایل‌های متعددی را بلافاصله بارگذاری کنند. اگر چه در حال حاضر مشکلات کمتری به خاطر HTTP۲ است، اما اگر فایل‌ها از منابع خارجی بارگذاری شوند، این مساله قطعا می‌تواند به بارگذاری طولانی‌تر نسبت داده شود. علاوه بر این، هر وب مستر به اشتباه از دستورالعمل import@ برای گنجاندن استایل های خارجی در صفحه وب استفاده می‌کند. این یک روش قدیمی است، و مانع از دانلود های موازی در مرورگر ها می شود. برچسب لینک بهترین گزینه شما است، که می تواند باعث بهبود طراحی سایت شما خواهد شد. علاوه بر این، استایل های خارجی درخواست‌شده با برچسب لینک دانلود موازی را مسدود نخواهد کرد.
کاهش درخواست HTTP خارجی
در بسیاری از موارد، بخش بزرگی از زمان بارگذاری وب سایت از درخواست‌های HTTP خارجی ناشی می‌شود. سرعتی که در آن یک منبع خارجی می‌تواند بسته به زیرساخت سرور میزبان، مکان و سایر موارد متفاوت باشد. اولین هدف شما در هنگام کاهش درخواست HTTP خارجی باید برای بررسی وب سایت شما با دیدگاه مینیمالیستی باشد. هر بخش از صفحات وب سایت خود را مطالعه کرده، و ویژگی‌هایی را حذف کنید، که باعث افزایش تجربه کاربری در سایت شما نخواهد شد. این ویژگی‌ها ممکن است شامل موارد زیر باشد:
- تصاویر غیر ضروری
- جاوا اسکریپت غیر ضروری
- CSS بیش از حد
- پلاگین های غیر ضروری
بعد از این که دسته ها را حذف کردید، راه‌هایی برای اصلاح حجم باقی مانده محتوای خود پیدا کنید. ابزارهای فشرده‌سازی، خدمات CDN و پیش فرض ها، بهترین گزینه‌های شما برای مدیریت درخواست‌های HTTP هستند. همان طور که در پاراگراف های زیر توضیح داده شده است، این موارد بهترین گزینه‌های شما برای مدیریت درخواست‌های HTTP هستند.
HTML ,CSS ,JAVASCRIPTحداقل کردن کد های
تکنیک‌های حداقل کردن، می‌توانند به شما کمک کنند تا نوشته های غیر ضروری درون یک فایل را حذف کنید. زمانی که در حال نوشتن کد در یک ویرایشگر هستید، به احتمال زیاد یادداشت‌هایی را مورد استفاده قرار خواهید داد، این روش‌ها قطعا کدهای شما را تمیز و قابل خواندن نگه می‌دارد، اما باید در نظر داشته باشید، این روش همچنین بایت اضافی را به سند شما اضافه می‌کنند.
برای مثال ، قطعه کد زیر قبل از به حداقل رساندن می باشد:
