Jak zoptymalizować dostarczanie CSS – 7 prostych kroków

grafika wektorowa optymalizacji cssDawno minęły czasy, gdy eksperci od projektowania i wiodący blogerzy zalecali tworzenie stron internetowych nie więcej niż 30 kilobajtów…


Wówczas ta „czapka” miała obsługiwać HTML, JavaScript, obrazy, CSS i Flash. Bądźmy szczerzy, całkowite przekroczenie 30 kb nie zajmuje wiele.

Gdy JavaScript i CSS zyskały popularność, powszechne stało się, że sam CSS przekroczył pułap 30 KB. Jest to szczególnie prawdziwe w przypadku większych witryn.

Jednak nie należy nadmiernie koncentrować się na „liczbie kilobajtów” podczas tworzenia i projektowania stron dla swojej witryny. Ważne jest, aby zachować swoje strony zoptymalizowany i ciasno podczas pisania CSS.

Optymalizacja to nie tylko minimalizacja rozmiarów plików. Chodzi o to, aby Twoje strony były wolne od bałaganu i wzdęć, dzięki czemu były tak zorganizowane i wydajne, jak to możliwe. Gdy dowiesz się więcej o najlepszych praktykach optymalizacji CSS, okaże się, że automatycznie tworzysz mniejsze rozmiary plików.

Oto 5 prostych rzeczy, które możesz teraz zrobić, aby zoptymalizować swój CSS.

Jak w pełni zoptymalizować dostarczanie CSS

1. Użyj Stenografii

Pisanie stenograficzne stało się bardzo powszechną praktyką. Jest to zdecydowanie najprostszy sposób na ograniczenie kodu i czas potrzebny na jego kodowanie. Jeśli jeszcze tego nie robisz, nie ma czasu takiego jak obecny.

właściwość czcionki css

Istnieje wiele elementów, których można używać w skrócie, ale najczęstsze to:

  • Margines
  • Wyściółka
  • Czcionka
  • Zarys
  • Granica
  • tło
  • Styl listy

skrócone wartości konfiguracjiMożesz także łączyć wartości za pomocą skrótu. Określając różne wartości, przeglądarka będzie zasadniczo używać określonego sposobu interpretacji reguł.

Za pomocą dowolnej stenografii będzie spraw, aby Twój ogólny kod był o wiele bardziej zwięzły. Zapisujesz zarówno znaki, jak i linie.

Jeśli używasz stenografii w każdym możliwym obszarze, może to radykalnie zmniejszyć ogólny rozmiar pliku.

2. Pozbądź się hacków

tj. reguła cssAby obsługiwać reguły CSS specyficzne dla IE, użycie hacków warunkowych CSS daje korzyść z obsługi mniejszego i czystszego domyślnego pliku CSS.

Pomaga w przeglądarkach, które są bardziej zgodne ze standardami. Dodatkowa waga strony zostanie jednak pobrana tylko przez przeglądarki, które tego wymagają.

Jeśli musisz użyć hacka, konieczne jest, aby używany kod był specyficzny dla wersji programu Internet Explorer, na której się koncentrujesz.

Istnieje wiele gotowych kodów, które służą jako hacki, jeśli nie chcesz pisać własnych. Poświęć trochę czasu, aby naprawdę spojrzeć na wstępnie napisany kod i upewnić się, że jest dokładny w przeciwnym razie może to spowodować jeszcze więcej problemów.

Teraz, jeśli możesz użyć CSS, aby uzyskać pożądane wyniki, zrób to bez żadnych włamań. Oczywiście zależy to od równości wszystkich innych rzeczy. Twój ogólny kod będzie znacznie lżejszy i prostszy, jeśli użyjesz mniej hacków na swojej stronie.

3. Bądź mądry w kwestii używania białych znaków

Dla twojego kodu CSS, spacja jest niezbędna dla czytelności.

Białe znaki obejmują elementy, takie jak tabulatory, spacje i dodatkowe łamanie linii. Każda odrobina białych znaków, którą możesz wyeliminować, jest podobna do eliminacji postaci.

usuń puste linieJednak często nie zaleca się oszczędzania na spacji ze względu na mniejszy plik. Nadal musisz zachować optymalną czytelność na swoich stronach internetowych.

Białe znaki są ważne przy formatowaniu, więc chcesz znaleźć równowagę. Jeśli piszesz duże bloki do tekstu, aby wyeliminować spacje, krótki okres uwagi czytelników w Internecie sprawi, że klikną.

Jednym ze sposobów zapewnienia zarówno mniejszego rozmiaru pliku, jak i czytelności jest porzucenie tabulatorów i umieszczenie tylko jednej linii między akapitami. Zapewnia to wystarczającą ilość spacji z punktu widzenia czytelności, ale eliminuje również część tej spacji, która nie jest konieczna.

Teraz w przypadku wersji produkcyjnej pliku CSS możesz usunąć białe znaki. Będzie nadal obecny w twoim pliku roboczym.

Jest to kolejny sposób na kompromis, dzięki czemu masz zarówno mniejsze pliki, jak i czytelne formatowanie.

4. Przycinanie resetów i ram

Podczas korzystania ze środowiska CSS konieczne jest przejrzenie dokumentacji.

Równie ważne jest spojrzenie na każdą linię w pliku CSS. Są chwile, kiedy odkryjesz, że istnieją pewne zasady w ramach, których nie chcesz w swoim bieżącym projekcie. Można je usunąć.

usunięto nieużywane reguły css

Może się okazać, że szczegóły prezentacji można uzyskać w bardziej zwięzły i elegancki sposób…

To może nie być to, czego zwykle używasz, ale jeśli to działa, może to pozwolić na czystsze środowisko. Gdy o nich wiesz, pomaga to również uniknąć niezamierzonego powielania zestawów reguł.

Te same informacje dotyczą również resetów. Kiedy używasz resetów, pomagają w neutralizacji domyślnego stylu przeglądarki. Teraz, jeśli znasz stronę, którą tworzysz, często zdarza się, że znajdziesz pewne deklaracje, o których wiesz, że nie będziesz potrzebować.

Na przykład na ogólnym blogu prawdopodobnie ich nie użyjesz. Po prostu pozbądź się wszystkiego, czego nie potrzebujesz w konkretnym miejscu, które budujesz. Możesz zapewnić lepszą zoptymalizowaną pracę podczas korzystania z zestawu reguł dotyczące resetu lub frameworka.

Jednak w stanie domyślnym nie należy ich akceptować. Aby pliki CSS były czytelne i oszczędne, spójrz na każdą deklarację indywidualnie i ogranicz te, które są niepotrzebne.

5. Przyszłościowy CSS

Składnia CSS

Kolejna przydatna opcja optymalizacji CSS: oddziel większość reguł od deklaracji dotyczących konkretnego układu.

Przypisz układ do własnego pliku, jeśli jest to możliwe. Jeśli nie, przynajmniej nadanie jej własnej sekcji może być korzystne.

Ostatecznie pozycjonowanie i zmiennoprzecinkowe – które są obecnie stosowanymi metodami przy użyciu CSS – nie miały służyć jako narzędzia układu.

Niektórzy posuwają się nawet do stwierdzenia, że ​​w rzeczywistości są one podobne do włamań układowych. W tej chwili nie ma realnej alternatywy i istnieje nadzieja, że ​​gdy pojawią się uzgodnione standardy układu, zaczynają otrzymywać wsparcie z przeglądarek.

Gdy to wsparcie się pojawi, zamiana właściwości modelu pudełkowego, które są modyfikowane dla tych przeznaczonych dla układów, nie powinna być trudna.

W tej chwili najlepszym wyborem jest obsługa układu przy użyciu odpowiednich właściwości. Zwykle powoduje to bardziej efektywne zagęszczenie strony niż wykorzystanie ograniczonego zestawu dostępnych obecnie właściwości w celu skompensowania dziwactw.

6. Zawsze aktualizuj dokumentację dotyczącą swojej pracy

Niezależnie od tego, czy pracujesz w witrynie jako zespół, czy sam, konieczne jest śledzenie wszystkiego, co zrobiłeś.

Na przykład sam możesz zapomnieć o tym, co zrobiłeś. Jako zespół ktoś może coś zrobić i możesz nie być tego świadomy, dopóki nie wprowadzisz zmian, które mogą powodować problemy z różnymi elementami kodu.

dodawanie komentarza cssPowielanie kodu jest ogromnym obszarem zainteresowania zarówno dla zespołów, jak i indywidualnych projektantów, szczególnie przy korzystaniu z popularnych kreatorów stron internetowych. Wix, Squarespace i inne oprogramowanie do tworzenia stron internetowych są znany z powielania kodu lub jego całkowitego braku z bazy danych.

Korzystanie z prowadnic arkuszy stylów i prowadnic znaczników jest wykonalnym wyborem dokumentacji. Możesz także użyć komentarzy CSS to kolejna opcja, która może być korzystna w przypadku odcinania elementów długich plików CSS. Umieszczenie ich w przewodniku po stylach lub znacznikach zapobiega dodawaniu rozmiaru pliku.

Jednym z najszybszych sposobów na powiększenie kodu jest dwukrotne wykonanie tej samej pracy. Kodowanie jest skomplikowane, dlatego konieczne jest prowadzenie dokładnej dokumentacji wszystkiego, co zrobiłeś.

Jeśli pracujesz sam, najlepiej jest przejrzeć tę dokumentację za każdym razem, gdy usiądziesz i zaczniesz pracować. Pracując jako część zespołu, upewnij się, że wszyscy kodują w tym samym dokumencie przestrzega przewodnika dotyczącego stylu lub znaczników społeczności dzięki czemu zmiany w kodowaniu są łatwo zrozumiałe dla wszystkich w grupie.

7. Kompresuj pliki (Optymalizacja CSS 101)

Kompresja css i optymalizacja gif

Kompresja: jest w tym coś więcej niż…

Jednym ze skutecznych sposobów optymalizacji CSS jest użycie kompresji. Jest to sposób na zapewnienie, że Twoje pliki są przyjazne dla przeglądarki, nawet jeśli są nieczytelne dla ludzi.

W porównaniu z kopiami roboczymi będą to ułamek wielkości. Istnieją różne aplikacje, z których można skorzystać, aby ułatwić proces kompresji.

Będą one wykonywać zadania, takie jak znajdowanie i naprawianie właściwości CSS, które się wzajemnie nadpisują, kompresowanie białych znaków i szukanie szans na użycie skrótu CSS.

Oprócz wygody tych aplikacji mogą one również pomóc Ci dowiedzieć się więcej o zadaniach, które możesz wykonać ręcznie, jeśli wolisz. Możesz także użyć różnych edytorów tekstu, aby pomóc sformatować swoje pliki CSS.

Mogą obsługiwać wersje zip różnych plików CSS. Zazwyczaj odbywa się to za pomocą PHP. Jeśli chcesz korzystać z narzędzi do optymalizacji i kompresji, zapoznaj się z wieloma opcjami, zanim wybierzesz odpowiednią dla siebie.

Teraz te aplikacje są na ogół dobre w minimalizowaniu błędów, ale nie są idealne. Z tego powodu należy zawsze sprawdzać CSS po użyciu aplikacji, aby zapewnić dokładność. Zoptymalizowany i czysty kod ma kluczowe znaczenie dla rozmiaru pliku, ale także dla czytelności i konserwacji.

Twoja kolej

Omówione tutaj zasady są solidnymi rozważaniami dla CSS, ale także dla JavaScript, HTML i innych języków programowania. W porównaniu do renderowania witryny pliki CSS nie są tak widoczne dla użytkownika końcowego.

Jednak zasady omówione tutaj pomagają zarówno w rozwoju doświadczenia, jak i doświadczeniu użytkownika.

Większość dobrych firm hostingowych pomoże ci w optymalizacji CSS. Szybsze strony internetowe sprawiają, że jesteś szczęśliwym klientem, ale mniejsze pliki również mniej obciążają ich serwery.

Przetestowaliśmy każdego z kanadyjskich hostów internetowych i zalecamy SiteGround. Nie tylko pomagają zoptymalizować dostarczanie CSS, ale ich wsparcie techniczne jest niezrównane.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector