بهینه سازی کدها برای بهبود طراحی سایت
طراحی وب سایت ها امروزه به دلایل مختلفی انجام می شود ، در عصر دیجیتالی قرار داریم که وب سایت های زیادی برای کسب و کارهای مختلف ایجاد می شوند و گاهی کدنویسی و تمپلیت و قالب ها طوری پیاده سازی می شوند که باعث کندی و سنگین شدن صفحه اصلی سایت می گردند. ما یکی از اقداماتی که در این زمینه می توانید انجام دهیم بهینه سازی کدها می باشد. معمولا بهینه سازی باعث افزایش سرعت سایت ، سازگاری با مرورگرها و … می گردد.
در این بخش ما روش هایی را به شما گوشزد خواهیم کرد که به شما در بهبود طراحی سایت و بهینه سازی مناسب آن کمک می نماید. شما باید بتوانید یک تمرکز عالی بر روی کدنویسی تمیز ، فشرده سازی تصاویر و عکس ها ، اجرای سی دی ان Content Delivery Network) CDN) و روش های متنوع دیگر داشته باشید و با بکارگیری اصولی این روش ها می توانید سرعت و عملکرد وب سایت تان را بالا ببرید ، پس در ادامه با گروه نیکداد همراه باشید.
نوشتار مرتب کدهای سمت کاربر
نوشتار تمیز کدهای HTML : زبان اپ تی ام ال که پایه گذاری هر وب سایتی می باشد و به شما این قابلیت را می دهد تا صفحات را کاملا شاخه وار و لیستی با ویژگی های متنی مناسب ایجاد نمایید. با پیدایش html5 می توانید گرافیک زیباتری را به سایت ها اضافه کنید. معمولا خزنده های موتور جستجوگرها راحت تر سایت های طراحی شده با اچ تی ام ال را می خوانند. امکان به روز رسانی محتواهای وب سایت در زمان ورود این خزنده ها نیز وجود دارد. در زمان برنامه نویسی اچ تی ام ال باید کدها را مرتب و تمیز بنویسید ، کدها باید کاملا مختصر و موثر واقع شود و باید دقت نمایید که بهینه سازی کدها کاملا رعایت شود.
ایجاد موقعیت مناسب css : پس از اینکه اچ تی ام ال را برای یک صفحه وب طراحی و پیاده سازی کرده اید ، باید برای زیبا سازی و ارائه خصوصیات و ویژگی ها ، به سمت سی اس اس بروید. حتما دقت نمایید که css را در ابتدا و بالای سند اچ تی ام ال قرار دهید تا از تفسیرهای متوالی اطمینان حاصل نمایید. همانند کد زیر که نمایانگر یک فایل css در زبان اچ تی ام ال می باشد که در تگ head قرار میگیرد.
<head>
<'link href='https://yourwebsite.com/css/style.css' rel='stylesheet' type='text/css>
</head>
البته اگرچه استفاده از این روش باعث افزایش سرعت بارگذاری سایتتان نخواهد شد ، ولی بازدیدکنندگان با یک کدنویسی تمیز مواجه می شوند و به خوبی استایل ها را از کدها شناسایی می کنند. اگر بیشتر عناصر بصری شما در حال بارگذاری هستند، بازدیدکنندگان بیشتر منتظر می‌مانند تا کل صفحه آپلود شود؛ و در نتیجه منجر به بهینه‌سازی کد های سمت کاربر می شود.
بهترین مکان قرار گیری جاوا اسکریپت : احتمالا می دانید که، اگر JavaScript را درون برچسب عنوان یا حدود بالای سند HTML قرار دهید ، فرآیند بارگذاری عناصر HTML و CSS را مسدود خواهد کرد. این اشتباه می‌تواند باعث شود که بازدیدکنندگان در صفحه سفید منتظر بمانند، و بنابراین ممکن است با بی‌صبری وب سایت شما را ترک کنند. شما می‌توانید با قرار دادن صفات جاوا اسکریپت در پایین سند HTML خود از این مساله اجتناب کنید. علاوه بر این، هنگام استفاده از جاوا اسکریپت، شما باید همیشه بارگذاری متن متقارن را ترجیح دهید. این کار از هر گونه تگ اسکریپت <script> که باعث مسدود شدن فرآیند HTML در میانه سند شما می شود، جلوگیری می‌کند.
همانطور که می دانید html یک ابزار فوق العاده با ارزش برای طراحان و کدنویسان وب سایتها می باشد ، این زبان در کنار css و جاوا اسکریپت بکار گرفته می شود ، این کارها باعث کاهش سرعت بارگذاری و لود صفحه سایت می شود. استفاده از سی اس اس و جاوا می تواند باعث بهبود طراحی سایت شما گردد و صفحات شما را بسیار بهتر کند ، شما باید در اینگونه موارد دقت زیادی کنید و به طور مناسب از آنها بهره ببردی. از قرار دادن تمامی کدها در یک مکان به طور جد خودداری نمایید. اگر تمامی کدهای اچ تی ام ال و سی اس اس و جاوا اسکریپت را در یک فایل بارگذاری نمایید ، اینکار باعث افزایش مقدار کد html خواهد شد و در نتیجه لود صفحه سایت تان را بالا خواهد برد.
ترکیب نمودن فایل های سمت کاربر
در زمان های گذشته معمولا اسکریپت ها و استایل ها را در یک فایل واحد باهم ترکیب می کردند تا بتوانند کاملا ساده یک فایل را در کد اچ تی ام ال ارجاع دهند. با توجه به مزایای HTTP2 شما هم اکنون می‌توانید از HTTP2 استفاده کنید، تا درخواست HTTP را ارسال و دریافت کرده، و پاسخ‌های نامتقارن HTTP را از طریق یک اتصال TCP دریافت کنید. این موضوع به این معنی است که، شما دیگر نیازی به ترکیب اسکریپت ها در یک فایل واحد ندارید.
بهینه سازی عملکردهای CSS :
معمولا از سی اس اس برای تبدیل محتوهای اچ تی ام ال به یک سند تخصصی و حرفه ای مورد استفاده قرار می گیرد. شما باید بتوانید فایل های سی اس اس را کم حجم تر و بدون حذف ویژگی های ضروری آنها به حداقل برسانید. اگر عکس ها ، پلاگین ها و استایل چیدمان لینک ها در فایل های سی اس اس شما به صورت جدا قرار دارند ، با توجه به کار مرورگرهای وب شما نیاز است تا فایل های متعددی بلافاصله بارگذاری شوند. اگر چه در حال حاضر مشکلات کمتری به خاطر HTTP۲ است، اما اگر فایل‌ها از منابع خارجی بارگذاری شوند، این مساله قطعا می‌تواند به بارگذاری طولانی‌تر نسبت داده شود. معمولا مدیران وب سایت ها از دستور @ برای گنجاندن استایل های خارجی در صفحه وب بهره می برند که این روش توصیه نمی شود و قدیمی شده است و همچنین مانع از دانلودهای موازی در مرورگرها می گردد. برچسب لینک بهترین گزینه شما است، که می تواند باعث بهبود طراحی سایت شما خواهد شد. علاوه بر این، استایل های خارجی درخواست‌شده با برچسب لینک دانلود موازی را مسدود نخواهد کرد.
تکنیک های بهینه سازی CSS شامل :
به حداقل رساندن درخواست های HTML
استفاده از Media Type و Media Query
کاهش کاراکترها
خلاص شدن از شر CSS درون خطی
به حداکثر رساندن موازی سازی
استفاده از @import خودداری کنید
استفاده از ویژگی تغییر اراده
کوچک سازی
ذخیره سازی
بهره مندی از Gzip
کمتر کردن درخواست اچ تی تی پی HTTP خارجی
در موارد بسیاری مشاهده شده که بخش بزرگی از زمان بارگذاری سایت از درخواست های HTTP می باشد. سرعت در منابع خارجی که با توجه به زیرساخت های سرور میزبان و مکان ها و موارد مختلف دیگر متفاوت هستند. در اولین گام شما برای کاهش درخواست HTTP خارجی باید به بررسی سایت با دیدگاه های مختلف بپردازید. شما باید تمامی بخش های سایت تان را مشاهده و مطالعه نموده و ویژگی ها را حذف نمایید که اینکار باعث افزایش تجربه کاربر در سایتتان نیز نخواهد شد. ویژگی هایی که شامل تصاویر غیر ضروری ، جاوا اسکریپت های غیر ضروری ، پلاگین های غیر ضروری ، CSS های بیش از حد استفاده شده می باشد. زمانی که شما این دسته ها را حذف نموده اید ، باید روش هایی را برای اصلاح حجم باقی مانده محتوای تان پیدا نمایید. ابزارهای فشرده‌سازی، خدمات CDN و پیش فرض ها، بهترین گزینه‌های شما برای مدیریت درخواست‌های HTTP هستند.
کم کردن کدهای جاوا ، سی اس اس و اچ تی ام ال
روش های کم کردن کدها می تواند به شما کمک نماید تا نوشته های غیر ضروری در یک فایل را حذف نمایید. وقتی که شما در حال کدنویسی در یک ویرایشگر هستید ، به احتمال زیاد یادداشت هایی را مورد استفاده قرار خواهید داد که این راه حل ها قطعات باعث تمیز و قابل خواندنی تر شدن کدهای شما می شود و باعث افزودن بایت اضافی به سند شما می گردد.
همانند کد زیر :
.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 با استفاده از یک ابزار تنظیم کنید.
آماده سازی پیش فرض ها :
معمولا سه نوع پیشفرض داریم که شامل پیوند پیشفرض ، دی ان اس پیشفرض ، پیشوری می باشد که شما با تعیین پیش فرض ها ، نشانی اینترنتی و کدهای CSS ، تصاویر و کدهای Java script قبل از این که شما صفحه فعلی خود را ترک کنید، برای هر لینک جمع‌آوری می‌شوند. این امر تضمین می‌کند که بازدیدکنندگان می‌توانند از لینک‌ها برای جهت یابی بین صفحات با حداقل بارگذاری استفاده کنند. خوشبختانه تعیین مقدار پیش فرض آسان است. بسته به نوع پیش فرضی که می‌خواهید آن را فعال کنید، می‌توانید به سادگی یک رابطه به ویژگی‌های لینک خود در HTML وب سایت اضافه کنید.
افزایش سرعت به کمک CDN و ذخیره سازی
شما می‌توانید به طور قابل‌توجهی سرعت و عملکرد وب سایت خود را، با استفاده از یک شبکه تحویل محتوا بهبود بخشید. زمانی که از یک CDN استفاده می‌کنید، صفحه وب سایت خود را به یک شبکه گسترده از سرورها در سرتاسر جهان متصل می‌کنید. استفاده از CDN به خصوص در صورتی مهم است که، وب سایت شما مخاطب جهانی داشته باشد. Content Delivery Network)CDN) به بازدیدکنندگان سایت شما اجازه می‌دهد تا اطلاعات را از نزدیک‌ترین سرور خود بارگذاری کنند. اگر از CDN استفاده می‌کنید، فایل‌های سایت شما به طور خودکار برای تحویل سریع در سرتاسر جهان فشرده خواهند شد.
در واقع، CDN یک روش بارگذاری است که می‌تواند تا حد زیادی به بهبود زمان تحویل دارایی‌های شما کمک کند، با این حال، تکنیک‌های بارگذاری دیگری نیز وجود دارند که می‌توانید آنها را به خوبی اجرا کنید، یکی از آنها می تواند استفاده از حافظه نهان باشد. تنظیم صحیح مرورگر وب، شما اجازه می‌دهد تا فایل‌های خاصی را در حافظه نهان خود ذخیره کنید، تا بارگذاری داده های سریع تر انجام شود.
فشرده سازی فایل ها برای بهبود طراحی سایت
در حالی که بسیاری از خدمات CDN فایل‌های شما را فشرده خواهند کرد، اگر از CDN خاصی استفاده نمیکنید، از روش های فشرده سازی فابل ها، بر روی سرور اصلی خود استفاده کنید، تا بهینه‌سازی نهایی خود را بهبود بخشد. فشرده‌سازی پرونده باعث می‌شود که محتوای سایت شما سبک و واضح شود، همچنین مدیریت آن را آسان می کند. یکی از متداول‌ترین روش‌های فشرده‌سازی فایل ها Gzip است. این روشی عالی برای کاهش حجم اسناد، فایل های صوتی، تصاویر PNG، و دیگر پرونده‌های حجیم است که قبلا فشرده نشده اند.
بهینه سازی تصاویر
برای افرادی که به روش‌های بهینه‌سازی نهایی عادت ندارند، تصاویر می‌توانند قاتل یک وب سایت باشند. آلبوم‌های عکس عظیم و تصاویر با رزولوشن بالا در سایت شما می‌تواند فرآیند ارائه را مختل کند. تصاویر تعریف شده که بهینه سازی نشده اند می توانند چند مگابایت حجم بگیرند. بنابراین، بهینه‌سازی درست این کار به شما این امکان را می‌دهد که عملکرد نهایی سایت خود را بهبود بخشید، همچنین تاثیر زیادی در بهبود طراحی سایت شما خواهد داشت. هر فایل تصویر حاوی گنجینه‌ای از اطلاعات است، که با عکس یا تصویر واقعی مرتبط نیست. برای عکس‌های با پسوند JPEG ، این فایل حاوی تاریخ‌ها، مکان عکس ، مشخصات دوربین و دیگر اطلاعات بی‌ربط می باشد. شما می‌توانید فرآیند بارگذاری طولانی تصویر را با حذف این داده‌های تصویر اضافی با ابزارهای بهینه‌سازی مانند Optimus ساده کنید.
Brotli نیز یک الگوریتم فشرده‌سازی دیگر است، با وجود این که این ابزار نسبتا جدید است، محبوبیت زیادی پیدا کرده است. این الگوریتم متن باز،به طور منظم توسط مهندسان نرم‌افزار گوگل و سایر سازمان‌ها به روز می‌شود. ثابت شده‌است که فشرده‌سازی فایل‌ها با این روش، نسبت به روش‌های موجود قدیمی بسیار بهتر شده‌است. اگر چه پشتیبانی از این الگوریتم هنوز بسیار کم است، اما موقعیت مناسبی برای الگوریتم فشرده‌سازی فایل پیشفرض بعدی است.
بهینه سازی کد های سایت با w3c validator
اولا این کد ها باید قابل شناسایی و خواندن برای گوگل باشند و اعتبار آنها در نزد گوگل تایید شده باشد م
عمولا برای تست کدهای سایت از سایت w3c validator که یک وبسایت جامع و مرجع و مورد قبول گوگل می باشد استفاده می شود
استفاده از تگ های اشتباه و توضیحات نامناسب در کد ها توسط این سایت برای هر صفحه ای از سایت که بخواهید مشخص می شوند و می توانید آن را برطرف کنید
برای بهینه سازی کد سایت در وردپرس معمولا برخی از افراد از افزونه های آماده استفاده می کنند
هرچند این کار به سایت شما کمک می کند اما از نظر ما که چندین سال در این زمینه کار کرده ایم خیلی هم مناسب نیست
خود افزونه های کدهای اضافی تولید می کنند که موجب کاهش سرعت سایت می شود
بهتر است برای بهینه سازی کد های استایل و جاوا اسکریپت خودتان دست به کار شوید و به صورت دستی فایل ها را فشرده سازی کنید
با توجه به اینکه تعداد فایل هایی که باید بهینه و فشرده شوند بسیار زیاد است اما ارزشش را دارد که با صرف کمی وقت این کار را دستی انجام دهید
ابزار سئو کد های css و javascripts
در صورتی که در گوگل جستجو کنید ” ابزار آنلاین کاهش حجم css , js ” می توانید برخی از سایت هایی که به فشرده سازی کد ها کمک می کنند را بیابید
این نکته را نیز فراموش نکنید که سئو سایت و ابزار بهینه سازی کد های css با javascripts متفاوت است
همیشه یک بک آپ از سایت خود داشته باشید تا در صورتی که اشتباهی در هر یک از اجزا سایت مرتکب شدید راه برگشتی داشته باشید
بعضا در برخی از سایت ها به علت قدیمی بودن قالب ، فشرده سازی منجر به بهم ریختگی سایت می شود
در نسخه جدید html5 خیلی از قوانین کدنویسی تغییر کرده و باید مراقب باشید که از روش های قدیمی استفاده نکنید
همچنین باید سعی کنید که به غیر از حجم تصاویر ، حجم فایل های استایل و جاوای سایتتان بیشتر از 100 کیلوبایت نشود
مزایای بهینه سازی کد های سایت
بهینه نمودن کد سایت مزایای زیر را به همراه دارد
افزایش سرعت سایت در بارگزاری اولیه و انتقال به صفحات دیگر
افزایش رضایت کاربران و صرف مدت زمان بیشتر روی سایت شما
منظم شدن کدهای سایت و افزایش خوانایی آنها برای گوگل
از بین بردن خطاهای سایت w3c validator
کاهش خطاها در سایت GTMETRIX (یکی از مهم ترین ابزار تست سایت )
رفع ایرادات و خطاهای موجود در قالب سایت
در صورتی که بتوانید به درستی این کار را انجام دهید و زمان کمی به صفحه اول گوگل خواهید رسید
نتیجه گیری
بهینه‌سازی کدهای سمت کاربر (Front end) می‌تواند یک تلاش ترسناک به نظر برسد، اما شما می‌توانید با استفاده از اصول و راهنماهایی که در این مقاله ارائه شده است، سرعت بارگذاری وب سایت خود را بهبود بخشید. به یاد داشته باشید، هرچه عملکرد وب سایت تان سریع‌تر باشد، می‌توانید تجربه کاربری بهتری داشته باشید. و در نهایت شما و بازدید کنندگان به طور یک‌سان از آن بهره‌مند خواهید شد.
