بهینه سازی کدها برای بهبود طراحی سایت

۴ اسفند , ۱۳۹۷ توسط زهرا کاظمی

در دنیای دیجیتالی امروزی، میلیون‌ها وب سایت هر روز به دلایل مختلف طراحی می شوند. متاسفانه بسیاری از این وب سایت‌ها سنگین و آزار دهنده هستند، وب سایت‌های بهینه سازی شده ضعیف، با انواعی از مسایل از جمله زمان‌های بارگذاری آهسته، غیر متحرک بودن ، ناسازگاری مرورگر ، و سایر موارد به ستوه آمده‌اند.
در این مقاله تکنیک‌های مفیدی معرفی خواهد کرد، که می‌توانید برای کمک به بهبود طراحی سایت و بهبود بهینه‌سازی نهایی خود از آن استفاده کنید. با تمرکز بر روی کد های تمیز ، فشرده‌سازی تصاویر ، به حداقل رساندن درخواست‌های خارجی ، اجرای یک 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 دریافت کنید. این موضوع به این معنی است که، شما دیگر نیازی به ترکیب اسکریپت ها در یک فایل واحد ندارید.

tct connection

بهینه سازی عملکرد CSS

css یا صفحات سبک آبشاری، می‌تواند برای تبدیل محتوای html شما به یک سند تخصصی و حرفه‌ای استفاده شود. بسیاری از گزینه‌های css به درخواست http نیاز دارند ( مگر استفاده از css های داخلی )، بنابراین باید سعی کنید فایل‌های css را بدون حذف ویژگی‌های ضروری آن ها، به حداقل برسانید. اگر بنر شما ، پلاگین ها و استایل چیدمان لینک های شما، همگی در فایل‌های CSS جداگانه قرار دارند، این کار به مرورگرهای وب شما نیاز دارد تا فایل‌های متعددی را بلافاصله بارگذاری کنند. اگر چه در حال حاضر مشکلات کمتری به خاطر HTTP۲ است، اما اگر فایل‌ها از منابع خارجی بارگذاری شوند، این مساله قطعا می‌تواند به بارگذاری طولانی‌تر نسبت داده شود. علاوه بر این، هر وب مستر به اشتباه از دستورالعمل import@ برای گنجاندن استایل های خارجی در صفحه وب استفاده می‌کند. این یک روش قدیمی است، و مانع از دانلود های موازی در مرورگر ها می شود. برچسب لینک بهترین گزینه شما است، که می تواند باعث بهبود طراحی سایت شما خواهد شد. علاوه بر این، استایل های خارجی درخواست‌شده با برچسب لینک دانلود موازی را مسدود نخواهد کرد.

کاهش درخواست HTTP خارجی

در بسیاری از موارد، بخش بزرگی از زمان بارگذاری وب سایت از درخواست‌های HTTP خارجی ناشی می‌شود. سرعتی که در آن یک منبع خارجی می‌تواند بسته به زیرساخت سرور میزبان، مکان و سایر موارد متفاوت باشد. اولین هدف شما در هنگام کاهش درخواست HTTP خارجی باید برای بررسی وب سایت شما با دیدگاه مینیمالیستی باشد. هر بخش از صفحات وب سایت خود را مطالعه کرده، و ویژگی‌هایی را حذف کنید، که باعث افزایش تجربه کاربری در سایت شما نخواهد شد. این ویژگی‌ها ممکن است شامل موارد زیر باشد:

تصاویر غیر ضروری
جاوا اسکریپت غیر ضروری
CSS بیش از حد
پلاگین های غیر ضروری

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

HTML ,CSS ,JAVASCRIPTحداقل کردن کد های

تکنیک‌های حداقل کردن، می‌توانند به شما کمک کنند تا نوشته های غیر ضروری درون یک فایل را حذف کنید. زمانی که در حال نوشتن کد در یک ویرایشگر هستید، به احتمال زیاد یادداشت‌هایی را مورد استفاده قرار خواهید داد، این روش‌ها قطعا کدهای شما را تمیز و قابل خواندن نگه می‌دارد، اما باید در نظر داشته باشید، این روش همچنین بایت اضافی را به سند شما اضافه می‌کنند.
برای مثال ، قطعه کد زیر قبل از به حداقل رساندن می باشد:

}entry – content p.

;font – size : 14 px ! important

{

} entry – content ul li.

;font – size : 14 px ! important

{

} product _ item p a .

;color : # 000

;padding : 10 px 0 px 0 px 0

;margin – bottom : 5 px

;border – bottom : none

{

و مثال زیر همان قطعه کد می باشد که به حداقل رسیده است:

{entry-content p,.entry-content ul li{font-size:14px!important}.product_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border-bottom:none.

شما می‌توانید به راحتی بایت ها را در فایل های javascript , html, css با استفاده از یک ابزار تنظیم کنید.

محیا کردن پیش فرض ها

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

پیوند پیش فرض
DNS پیش فرض
پیشروی

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

افزایش سرعت به کمک CDN و ذخیره سازی

شما می‌توانید به طور قابل‌توجهی سرعت و عملکرد وب سایت خود را، با استفاده از یک شبکه تحویل محتوا بهبود بخشید. زمانی که از یک CDN استفاده می‌کنید، صفحه وب سایت خود را به یک شبکه گسترده از سرورها در سرتاسر جهان متصل می‌کنید. استفاده از CDN به خصوص در صورتی مهم است که، وب سایت شما مخاطب جهانی داشته باشد. Content Delivery Network)CDN) به بازدیدکنندگان سایت شما اجازه می‌دهد تا اطلاعات را از نزدیک‌ترین سرور خود بارگذاری کنند. اگر از CDNاستفاده می‌کنید، فایل‌های سایت شما به طور خودکار برای تحویل سریع در سرتاسر جهان فشرده خواهند شد.

CDN in web design

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

فشرده سازی فایل ها برای بهبود طراحی سایت

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

بهینه سازی تصاویر

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

مطلب مرتبط: افزایش سرعت سایت به وسیله تصاویر

Brotli نیز یک الگوریتم فشرده‌سازی دیگر است، با وجود این که این ابزار نسبتا جدید است، محبوبیت زیادی پیدا کرده است. این الگوریتم متن باز،به طور منظم توسط مهندسان نرم‌افزار گوگل و سایر سازمان‌ها به روز می‌شود. ثابت شده‌است که فشرده‌سازی فایل‌ها با این روش، نسبت به روش‌های موجود قدیمی بسیار بهتر شده‌است. اگر چه پشتیبانی از این الگوریتم هنوز بسیار کم است، اما موقعیت مناسبی برای الگوریتم فشرده‌سازی فایل پیش‌فرض بعدی است.

gzip compress tool

استفاده از یک چهارچوب مینیمالیستی

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

نتیجه گیری

بهینه‌سازی کدهای سمت کاربر (Front end) می‌تواند یک تلاش ترسناک به نظر برسد، اما شما می‌توانید با استفاده از اصول و راهنماهایی که در این مقاله ارائه شده است، سرعت بارگذاری وب سایت خود را بهبود بخشید. به یاد داشته باشید، هرچه عملکرد وب سایت تان سریع‌تر باشد، می‌توانید تجربه کاربری بهتری داشته باشید. و در نهایت شما و بازدید کنندگان به طور یک‌سان از آن بهره‌مند خواهید شد.