بهینه سازی فایل های css سایت
در این مقاله روش های فشرده سازی و بهینه سازی فایل های css را برای عملکرد بهتر وب سایت ها معرفی می کنیم. یکی از فاکتورهایی که در هنگام آنالیز و بررسی سایت نظر بسیاری از کاربران را جلب می کند ، فایل های css و هشدارهایی که در رابطه با آنها داده می شود است ، که تاثیر بسیار زیادی نیز در سئو سایت دارد.
ابزارهایی مثل gtmetrix یا google lighthouse که برای تست سرعت سایت به کار می روند ، به بررسی ساختار کدنویسی و برنامه نویسی Html ، css و js می پردازند. در مقاله نحوه بهینه سازی فایل های جاوااسکریپت ، روش فشرده سازی و کاهش حجم فایل js سایت را توضیح دادیم. اگر این مقاله را مطالعه نکرده اید پیشنهاد می کنیم از طریق لینک زیر اقدام نمایید:
روش های بهینه سازی فایل های javascript
اکنون قصد داریم بهینه سازی فایل های css یا استایل قالب را تشریح کنیم.
فایل css چیست؟
زبان برنامه نویسی css که در سال 1996 در دنیا ارائه شد ، به منظور ایجاد و طراحی ظاهر وب سایت برای هرچه زیباتر بودن آن ، مورد استفاده قرار می گیرد. فایل های css همراه با html ها می توانند ساختار پایه وب سایت را ایجاد کنند. از css به عنوان فایل استایل دهی قالب نام برده می شود که قابلیت نشانه گذاری محتوا ، تصاویر و عناصر تشکیل دهنده یک سایت اینترنتی را ارائه می دهد. رنگ بندی ، نوع فونت ها ، ساختار منوها ، شکل و شمایل صفحات ، ظاهر هدر و فوتر سایت و بسیاری دیگر از اجزا گرافیکی وب سایت با css ها قابل اجرا هستند.
روش های بهینه سازی فایل css
آیا تا به حال به اهمیت برای بهینه سازی کد CSS در سئو و سرعت سایت توجه کرده اید؟
اگر وب سایت سریعتر بارگزاری شود ، مشتریان بیشتری وارد سایت شما خواهند شد ، در موتورهای جستجو در رتبه بهتری قرار می گیرد ، بازگشت مشتریان به سایت افزایش می یابد و تجربه کاربری بهتری را ارائه خواهید داد.
چه روش هایی برای افزایش سرعت سایت خود دارید؟ احتمالا روش های زیادی را شنیده یا تجربه کرده اید. مانند به روزرسانی سرور ، کاهش حجم تصاویر ، افزایش حافظه ، بهینه سازی js و …
اما نباید یکی از مهم ترین عامل های افزایش سرعت وب سایت که بهینه سازی فایل های CSS است را فراموش کنید. کاهش حجم یک فایل CSS حتی تا چند کیلوبایت می تواند تأثیر قابل توجهی در زمان بارگذاری سایت شما داشته باشد.
مهم ترین روش های بهینه سازی کدهای css عبارتند از:
بهینه سازی فایل های css با image sprites
استفاده از image sprites یک تکنیک قدیمی است که می تواند حجم فایل CSS را کاهش داده و سرعت لود سایت را افزایش دهد. این تکنیک به شما این امکان را می دهد تصاویر خود را در یک فایل کلی با فرمت png قرار دهید و با استفاده از چند دستور ساده ، هر بخشی از آن تصویر را که نیاز دارید در صفحه فراخوانی کنید. ان کار باعث کاهش درخواست های HTTP شده و زمان بارگذاری سایت را بهبود می بخشد. اگر از آیکون ها و تصاویر گرافیکی زیادی در سایت خود استفاده می کنید ، این روش یک ایده عالی برای شماست.
فشرده سازی فایل های CSS
هرگز نباید فشرده سازی فایل های css را فراموش کنید. فشرده سازی یعنی کاهش حجم هر یک از کدها که توسط افزونه ها یا نرم افزارهای آنلاین قابل انجام است. برای این منظور فضای سفید میان کدها از بین خواهد رفت و حجم فایل تا چند برابر کاهش خواهد یافت. فشرده سازی gzip یکی از روش های ، کاهش حجم کلی تمام کدهای سایت می باشد.
این مطلب مهم را حتما مطالعه نمایید: تاثیر فشرده سازی Gzip بر سئو سایت
حذف کدهای css غیر ضروری
راهکار دیگر بهینه سازی فایل css ، شناسایی و حذف کدهای غیرضروری می باشد. برای این کار می توانید از وب سایت http://unused-css.com کمک بگیرید. بسیاری از سایت ها از قالب های آماده استفاده می کنند و اکثرا از تمام قابلیت ها و امکانات گرافیکی قالب استفاده نمی کنند ، پس نیازی به کدهای ساختاری برخی از عناصر گرافیکی ندارند و می توانند با حذف css های مربوطه اقدام به کاهش حجم کل سایت نمایند.
CSS را در بالا و JS را در پایین قرار دهید
در بهینه سازی باید فایل های CSS سایت را در بالا (بین برچسب <head> </head>) و جاوا اسکریپت را در پایین ( فوتر سایت ) قرار دهید. حتما باید مطمئن شوید که کد CSS شما قبل از بقیه عناصر صفحه بارگزاری شده است. در مقاله بهینه سازی کدهای جاوااسکریپت علت قراردادن js در فوتر را توضیح داده ایم.
تکنیک KISS برای بهینه سازی فایل css
پیروی از تکنیک KISS می تواند تاثیر زیادی در بهینه سازی فایل های css داشته باشد. KISS مخفف Keep it Simple Stupid است. به این معنی که همواره کدهای css را ساده ، با دسته بندی و سازماندهی مناسب و کم حجم مورد استفاده قرار دهید. تقسیم بندی css ها براساس مرورگرهای مختلف ، درج نام و توضیحات مناسب برای بخش های مختلف css ، به شما کمک خواهند کرد.
رفع خطای remove unused css
یکی از خطاهایی که بسیاری از سایت ها در زمان بررسی با ابزار pagespeed insight گوگل دارند ، خطای remove unused css یا حذف css های بدون استفاده است که در این مقاله نحوه رفع این خطا را توضیح می دهیم. یک وب سایت ترکیبی از کدهای html ، js و css می می باشد که تاثیر زیادی در حجم و سرعت سایت دارند. شکی نیست که سایتهای بهینه و سبک ، عملکرد بهتری نسبت به وبسایت های کند و سنگین دارند. یکی از معیارهای مهم گوگل برای رتبه بندی ، همین ویژگی است.
CSS چگونگی نمایش محتوا ، صفحه یا سایت را برعهده دارد و به فایل های استایل سایت معروف هستند. مرورگر کاربر باید قبل از نمایش محتوا ، کلیه فایلهای CSS لازم برای نمایش صفحه را بارگزاری کند. پس هرچه تعداد css ها بیشتر باشد و یا حجم بیشتری داشته باشند، کاربر باید زمان بیشتری را برای بارگزاری کامل سایت ، صرف کند. در مقاله بهینه سازی فایل های css ، توضیحاتی در مورد کاهش کلی حجم و تعداد این فایل ها ارائه داده ایم که پیشنهاد می کنیم مطالعه کنید. اما مسئله اینجاست، که درصد زیادی از کدهای css پس از بارگزاری ، عملا کاربردی در صفحه ندارند و نبود آنها تاثیری در نمایش و استایل صفحه نمی گذارد. پس گوگل با اعلام خطای remove unused css از شما می خواهد که حتما آنها را حذف کنید تا سرعت نمایش سایت به کاربر افزایش یابد.
نحوه بهینه سازی css بدون استفاده
اگر سایت خود را با pagespeed یا gtmetrix آنالیز کرده اید و با خطای حذف css مواجه شده اید ، باید دست به کار شوید و سریعا این ابراد را برطرف نمایید. این خطا برای سایت های وردپرس زیاد اتفاق می افتد ، زیرا معمولا قالب های آماده وردپرس به دلیل وجود امکانات زیاد که معمولا نیز بدون استفاده هستند ، دارای فایل های css با حجم بالا هستند.
اگر از وردپرس استفاده می کنید می توانید با نصب افزونه autoptimize ، خطای remove unused css را رفع کنید. برای تشخیص اینکه چه بخشی از css های سایت شما ، بدون استفاده هستند به وب سایت https://unused-css.com/ مراجعه کنید و کدهای بدون استفاده را شناسایی کنید و سپس می توانید با حذف کد بدون استفاده ، فایل نهایی را از طریق هاست ، جایگزین فایل قبلی کنید.
در پایان مقاله جامع روشهای بهینه سازی کد های سایت را جهت مطالعه پیشنهاد می دهیم.
دیدگاه خود را ثبت کنید
تمایل دارید در گفتگوها شرکت کنید؟در گفتگو ها شرکت کنید.