100ها نکته آموزشی رایگان در اینستاگرام نیوسئو
نخستین کاری که در طراحی سایت‌ها صورت می‌گیرد استفاده از کدهای CSS است. برای بهبود سرعت و رشد سایت، باید به بهینه سازی فایل های CSS توجه بیشتری کرد. روش‌های گوناگونی برای بهینه سازی وجود دارد که در این مطلب به 9 روش بسیار عالی خواهیم پرداخت.
بهینه سازی فایل CSS چیست؟
کدهای CSS در سایت نقش بسیار مهمی دارند، به این دلیل که تمام ظاهر سایت با استفاده از این کدها طراحی شده است. حجم این فایل‌ها در سرعت بارگزاری سایت تأثیرگذار است. حجم برخی از فایل‌ها کمتر از 100KB است، اما بسیار خوب است که حجم فایل‌ها را به کمترین حالت ممکن کاهش دهید تا سرعت سایت افزایش یابد.
کدهای css در سراسر وب به 3 روش زیر قابل‌استفاده است:
- درون‌خطی (Inline): قرارگیری در اتربیوت (Attribute) style، مربوط به کدهای HTML
- داخلی (internal): قرارگیری در میان کدهای HTML در تگ style
- خارجی (external): قرارگیری در فایلی با فرمت .css و فراخوانی در سند HTML با تگ link
برای بهینه سازی فایل های CSS، برخی از روش‌ها مناسب نیست! زیرا در سرعت سایت سایت تأثیر می‌گذارند. بهترین روش برای بارگزاری فایل‌ها، استفاده از روش External است. بهتر است تعداد فایل‌هایی که فراخوانی می‌شود را کاهش دهید، زیرا درخواست‌های کمتری برای فراخوانی ارسال می‌شود.
9 روش بهینه سازی فایل های CSS
در هنگام طراحی یا بهینه‌سازی سورس سایت با استفاده از 9 روش زیر می‌توانید سرعت سایت خود را بهبود ببخشید و سورس سایت خود را در تمیزترین حالت ممکن قرار دهید.
1- خارج کردن کدهای Internal و Inline
در سایت‌های وردپرسی تعداد زیادی از کدهای CSS به‌صورت داخلی (Internal) در سایت قرار می‌گیرند. این امر باعث می‌شود در هنگام بارگزاری سایت، سرعت سایت را کاهش دهد. بهتر است تمامی کدهای CSS که در تگ style قرار دارد را خارج کنید و در فایل‌هایی با فرمت .css قرار دهید.
کدهایی که به‌صورت (inline) قرار می‌گیرند را تا حد ممکن خارج کنید. این نوع از کدها می‌توانند توسط جاوا اسکریپت ایجاد شوند که در حالات مختلف دستورات مختلفی دارند. بهتر است حجم این کدها را کم کنید.
2- از نوشتن کدهای طولانی پرهیز کنید
برخی از ویژگی مانند margin، می‌توانند به سه روش نوشته شوند و بهتر است در نوشتن آن‌ها دقت شود. به مثال های زیر دقت کنید.
p { margin-top: 4px;
margin-right: 2px;
margin-bottom: 4px;
margin-left: 2px; }
کد بالا برای به هر سمت از المان موردنظر فاصله ای را اختصاص داده است، برای این کار می‌توان بسیار ساده‌تر از این ویژگی استفاده کرد. دستور زیر حالت فشرده شده، دستور بالا است.
p { margin: 4px 2px 4px 2px; }
شکل نوشتاری کد بالا همچنان می‌تواند بسیار گسترده باشد و می‌توان از دستور زیر استفاده کرد، مگر اینکه طول کد به کوتاه‌ترین حالت ممکن کاهش یابد.
p { margin: 4px 2px; }
این ویژگی بسیار در سایت‌ها استفاده می‌شود بنابراین بهتر است از نحوه نوشتاری کوتاه شده آن‌ها استفاده کنید، تا اینکه حجم کدهای CSS کاهش یابند.
3- کامنت ها را حذف کنید
طراحان سایت در هنگام کد نویسی، برای درک بهتر، در میان کدها نوشته‌هایی قرار می‌دهند که به آن‌ها کامنت گفته می‌شود؛ بهتر است این کامنت ها از داخل فایل ها حذف شوند؛ تا باعث می‌شود حجم کدها به کمترین حالت خود برسند.
4- فشرده سازی کدهای CSS
کدهای CSS امکان فشرده‌سازی دارند، به این صورت که می‌توانید تمامی کدهای خود را در یک خط قرار دهید و فاصله‌هایی که کاربرد ندارند، را حذف کنید. به فشرده سازی Minify گفته می‌شود. ابزارهای متعددی در سطح وب وجود دارند که فایل‌ها را فشرده می‌کنند. یکی از بهترین ابزارها CSS Compressor است.
فشرده سازی فایل های CSS را در آخرین مراحل بهینه سازی فایل های CSS قرار دهید، بلکه با فشرده سازی، خوانایی کدها کاهش می‌یابد.
5- کاهش سلکتورها (Selector)
برخی از المان‌ها در سایت وجود دارند که ویژگی‌های کاملاً مساوی دارند، به مثال زیر دقت کنید.
p{background:#fcfcfc}
.back-body .article {background:#fcfcfc}
.menu-mobile .side #woocommerce-plugin {background:#fcfcfc}
body .wp-content-last-tag table{background:#fcfcfc}
در تمام کدهای درج‌شده، ویژگی background:#fcfcfc; کاملاً ثابت است، بنابراین می‌توان خیلی کوتاه‌تر تمامی سلکتور ها را کنار هم قرار داده و با « , » (کاما) جدا کرد.
p, .back-body .article, .menu-mobile .side #woocommerce-plugin, body .wp-content-last-tag table {background:#fcfcfc}
6- از @import خودداری کنید
با استفاده از دستور @import می‌توان فایل‌های CSS را به‌صورت تودرتو معرفی کرد و مرورگرها برای بارگذاری (Load) این فایل‌ها به‌صورت سری عمل می‌کنند؛ به‌طور مثال در فایل main.css می‌توان فایل‌های دیگر را به‌صورت زیر فراخوانی کرد.
/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");
همان‌طور که گفته شد مرورگر به‌صورت سری، این فایل‌ها را بارگزاری می‌کند، همچنین می‌تواند در سرعت سایت تأثیر گذار باشد. برای بارگذاری فونت‌ها، استفاده از @import می‌تواند بهینه‌تر باشد. اما بهتر است برای فایل‌های دیگر به روش زیر عمل کنید.
می‌توان برای بارگزاری فایل‌ها از چندین تگ link در سند HTML استفاده کرد، زیرا فایل های CSS، به‌صورت موازی بارگیری می‌شوند که به‌ویژه هنگام استفاده از پروتکل HTTPS2 بسیار کارآمدتر است.
7- از ویژگی‌های سخت، کمتر استفاده کنید.
برخی از ویژگی ها توسط مرورگر مدت‌زمان بیشتری نیاز دارد تا تجزیه‌وتحلیل شود، بنابراین سعی کنید از روش 5 (کاهش سلکتور ها) برای موارد زیر استفاده کنید، تا تعداد کمتری از ویژگی‌ها ساخته شود. لیست ویژگی‌های سخت:
- border-radius
- box-shadow
- opacity
- transform
- filter
- position: fixed
8- استفاده از فریمورک‌های css به‌صورت صحیح
یکی از سبک‌ترین فریمورک‌های CSS بوت استرپ (BootStrap) است. از این فریمورک‌ها استفاده کنید. اما، اگر فایل‌های این فریمورک را در سایت خود بارگزاری می‌کنید، بهتر است که حتماً کدهایی که استفاده نمی‌شوند، را کامل حذف کنید، تا حجم فایل‌ها کمتر شده و از ایجاد Block style خودداری می‌شود.
9- کدهایی که در سایت استفاده نمی‌شوند، را بهینه کنید
گوگل ابزار بسیار مناسبی را برای این کار قرار داده است. برای پیدا کردن کدهایی که در سایت استفاده نمی‌شوند، ابتدا روی صفحه سایت کلیک راست کنید و روی Inspect کلیک کنید. روی منوی Source بروید و از کلیدهای ترکیبی Shift + Ctrl + P استفاده کنید. حالا عبارت Coverage را تایپ و تائید کنید.
همان‌طور که مشاهده می‌کنید می‌توانید روی فایل‌ها کلیک کنید، بلکه گوگل خط به خط کدها را برسی کرده و کدهایی که کاربرد ندارند را شناسایی می‌کند. پیشنهاد شده است که کدهایی که با رنگ قرمز نشانه گذاری شده است را در حالت Preload قرار دهید.
کلام آخر
برای بهینه سازی فایل های CSS از روش‌هایی معرفی‌شده استفاده کنید. زیرا بسیار به بهبود سایت کمک می‌کند و همچنین سرعت سایت افزایش یابد. مدیریت فایل های CSS بسیار مهم هستند و علاوه بر روش های بهینه سازی فایل CSS بهتر است، هرکدام از فایل‌ها را در صفحه‌ای که کاربرد دارند بارگذاری شود.
- سئو سورس و کسب رتبه 1 گوگل
3 نکته اساسی در ترتیب کدهای سایت
طراحی سایت در سئو و تاثیر آن در رنک سایت
بررسی رتبه الکسا سایت و تکنیک های بهبود آن
متا تگ چیست و چه تاثیری بر سئو دارد
نکات سئو سایت 2018 – قسمت اول
از بین بردن خاطرات بد گذشته
آیا گوگل تیمی برای بازدید از سایت ها دارد