Optymalizacja CSS – kompresja to nie wszystko

 

Kompresja i optymalizacja kodu cssZ punktu widzenia programisty krytycznym zasobem jest czas procesora. Dlatego badamy złożoność stosowanych algorytmów i wybieramy najlepszy. Czyli ten, który przy jak najmniejszej liczbie operacji realizuje określone zadanie. Na pewno? A inne kryteria?

Tworząc aplikacje internetowe, w tym także strony, konieczne jest także optymalizowanie kodu pod względem wykorzystania łącza. To oznacza jak najmniejszą ilość wywołań HTTP, szczególnie POST i GET. To oznacza jak najmniejsze pakiety danych. Zużycie czasu procesora w tym kontekście ma niewielkie znaczenie.

Jak najprościej, bez refaktoryzacji kodu, zoptymalizować utworzoną przez nas stronę? Kompresja plików źródłowych! Kompresory usuwają niepotrzebne znaki takie jak spacje, komentarze itp. Kod staje się nieczytelny, ale dzięki temu zmniejszamy rozmiar pliku. Dla szablonu bloga kissdesign.pl, kompresja pliku styles.css przyniosła 10-procentowy zysk.

Spróbuj sam! Użyj darmowego kompresora i optymalizatora css on-line.

Dlaczego piszę o optymalizacji? W przypadku plików CSS nierzadko powielamy reguły, które mogą zostać zapisane jedną. Podobnie ze stosowaniem skrótów.

Przed kompresją i optymalizacją:


body{
   text-align: left;
}

p{
   text-align: left;
   margin-bottom: 2em;
   margin-top: 1em;
}

Po kompresji i optymalizacji (pozostawiłem przejście do następnej linii dla czytelności):


body,p{text-align:left}
p{margin-bottom:2em;margin-top:1em}

Podobnie można kompresować kod html, javascript. Nie mówiąc o kompresji obrazów! Ale to już temat na inny wpis…

Skorzystałeś z optymalizacji kodu? Podziel się wynikiem, czy zysk był wart tych dwóch kliknięć? ;-)

 
 

Uwaga – nowe okno! Ikona przy linku _blank

 

Ikona przy linku otwierającym nowe okno przeglądarki

Linki otwierające się w nowych oknach z przyczyny znanej jedynie autorowi strony irytują szarego internetowego szperacza. Niekiedy jednak warto, czasami wręcz trzeba użyć feralnego atrybutu <a target=”_blank„>link</a>.

Szczególnie gdy mamy do czynienia z listą zewnętrznych źródeł w artykule czy wskazujemy adres do strony, która będzie prawdopodobnie równolegle wykorzystywana z docelową. Do tej drugiej kategorii można zaliczyć wszystkie strony z materiałami do pobrania, strony aplikacji internetowych itp.

Co jednak zrobić, by pasek irytacji czytelnika nie przekroczył maksimum po kilku linkach otwierających nowe okno? Wystarczy go poinformować o takich linkach za pomocą dodatkowej ikony przy odnośniku.

Zobacz eleganckie i za razem funkcjonalne rozwiązanie oznaczenia linków _blank.

Gotowy kod poniżej. Ikona open.png do pobrania.

a[target="_blank"],
a[target="new"]{
   padding-right:14px;  /* szerokość ikony z marginesem */
   background: url(open.png) right top no-repeat;
} 

Przydał Ci się ten post? Wykorzystałeś przykład na swojej stronie? Napisz o tym w komentarzu! :-)

 
 

Uwolnić czcionki – dowolny font na stronie

 

Najnowsze przeglądarki już wspierają właściwość @font-face, która pozwala na podlinkowanie dowolnej czcionki. Następnie można jej użyć pod wybraną przez siebie nazwą. Zobacz jakie to proste:

@font-face {

font-family:"Times New Polkowski";

src: url(../resources/fonts/tnpolkowski.otf);

}

p{ font-family: "Times New Polkowski", Georgia, Times; }

Ok, to nie jest takie proste. Jeszcze. Nie został rozwiązany problem formatów czcionek – każda platforma i system operacyjny preferuje inny format. Do tego trzeba uważnie czytać umowy licencyjne fontów – najczęściej nie pozwalają one na wykorzystywanie w taki sposób (co sprytniejszy użytkownik może pobrać udostępnioną przez nas czcionkę).

Mimo to @font-face jest kuszącą perspektywą, która pozwoliłaby odesłać w niepamięć techniki podmiany tekstu obrazem. A to znaczy ogromną oszczędność czasu!

Podziel się ze mną opinią – czy ten wpis był przydatny?

 
 

Stylowanie wydruku

 

Jak zaimplementować stronę print-friendly? Wykorzystamy przeznaczony do tego oddzielny arkusz stylu. O wszystkim decyduje atrybut media:

<style type="text/css" media="screen">@import url("domyslny-arkusz.css");
</style>
<style type="text/css" media="print">@import url(“arkusz-do-wydruku.css");
</style>

To jednak nie wszystko.  O czym szczególnie należy pamiętać formatując stronę do wydruku? Oto garść porad:

  • Dla dużych fragmentów tekstu używaj czcionki szeryfowej – tę czyta się na papierze lepiej niż bezszeryfową.
  • Usuń formatowanie linków – i tak nikt z nich nie skorzysta.
  • Schowaj bloki odpowiedzialne za nawigację – użytkownika interesuje przecież zawartość TEJ strony.
  • Tło nie jest drukowane, dlatego pamiętaj o odpowiednim kontraście dla koloru tekstu (szczególnie jeżeli Twoja strona jest w kontrze)
  • Usuń marginesy strony.
  • Dostosuj szerokość layoutu, by zmieściła się na jednej szerokości kartki A4.
  • Stosuj wymiary odpowiednie dla wydruków – np. dla czcionek – pt.
  • Testuj korzystając z drukarek PDF – oszczędzaj drzewa ;-)
 
 
« poprzednie wpisynastępne wpisy »