Magiczna siódemka w skutecznej nawigacji

 

Optymalizacja nawigacji z regułą siedmuMagiczny i szczęśliwy numer? Pierwsza myśl – siódemka! Coś w niej musi być skoro mamy 7 grzechów głównych, 7 dni w tygodniu, 7 powodów by się obijać… ;]

Siedem. Plus/minus dwa. Tyle obiektów możemy przechować w naszej pamięci krótkotrwałej. Tyle czynności wykonywać naraz, na tyle rzeczy zwracać uwagę. Siedem. To jedna z naczelnych zasad kognitywistyki, wyniesiona z artykułu opublikowanego w 1956 roku przez psychologa George’a A. Millera.

Dlatego strony z masą animowanych gifów nie są najlepszym rozwiązaniem. Dlatego warto się zastanowić nad strukturą nawigacji na naszej stronie. Ta może być głęboka (użytkownik potrzebuje więcej kliknięć, by dostać się do żądanego zasobu), lub płytka.

Tradycyjnie potrzebujemy złotego środka – i tu przychodzi magic rule of seven. Na każdym poziomie nawigacji powinniśmy mieć 7 odnośników (plus/minus 2). Wtedy przeszukiwanie jest wydajne (niewiele przejść), a jednocześnie nie powoduje uczucia przytłoczenia informacją.

Nawigacja na stronie według magic rule of seven

Kolejną magiczną liczbą jest 3. Trzy kliknięcia to wystarczająco dużo, by zniechęcić czytelnika, poszukującego odpowiedniego zasobu. Sprawdźmy ile stron jesteśmy w stanie wygenerować przy pomocy trzech poziomów nawigacji.

73 = 343 strony

To chyba wystarczająca ilość dla większości stron. A jak Ty budujesz nawigację? Jaką logikę czy podziały stosujesz? Napisz poniżej!

 
 

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ęć? ;-)

 
 
« poprzednie wpisy