Optymalizacja strony
Postanowiłem napisać ten krótki artykuł z myślą o webmasterach którzy narzekają na problemy ze zbyt długim ładowaniem ich strony. Opiszę jak zoptymalizować stronę internetową prostymi sztuczkami. Po przeczytaniu tego krótkiego tutka będziecie wiedzieli co zrobić by strona internetowa szybciej chodziła.
Głównymi problemami związanymi z długim ładowaniem strony są przede wszystkim obrazki. Możemy je oczywiście zmniejszyć, ale kompresja niekiedy nie jest wskazana bo obniża tylko jakość efektu.
Co w takim razie zrobić by nasza strona ładowała się o wiele szybciej? To proste. Użyć jednego obrazka, na którym znajdować 
będą się wszystkie elementy. Podobne rozwiązanie zostało zastosowane przez google (rysunek widoczny obok) Dzięki temu za pomocą tylko jednego obrazka zapisanego nawet w najlepszym formacie możemy przyśpieszyć działanie naszej strony nawet do 60%.
No dobra, ale co z tego, i jak mam tego użyć? To proste, tam gdzie to możliwe zamiast znacznika img postaw znacznik div, a następnie przypisz mu takie wartości jak podano niżej, zakładając że obrazek znajduje się w tym samym katalogu, oraz że obrazek nazywa się backgrounds.png i wygląda identycznie jak obrazek używany przez google.
Kod html tworzący napis goooooogle za pomocą jednego obrazka:
<div class="g bgonefile"></div> <div class="o bgonefile"></div> <div class="o bgonefile"></div> <div class="o bgonefile"></div> <div class="o bgonefile"></div> <div class="o bgonefile"></div> <div class="ogle bgonefile"></div>
Definiujemy każdego diva i nadajemy mu klasę bgonefile oraz drugą, która odpowiada za wyświetlenie odpowiedniego tekstu w obrazkach
Kod css tworzący napis goooooogle za pomocą jednego obrazka:
.bgonefile {
background-image: url('backgrounds.png');
background-repeat: no-repeat;
float:left;
margin-left:3px;
}
.g {
background-position:-25px 0;
width:20px;
height:21px;
margin-top:1px;
}
.o {
background-position:-46px -5px;
width:13px;
height:15px;
margin-top:5px;
}
.ogle {
background-position:-61px 0;
width:56px;
height:26px;
}
Opisujemy teraz każdą klasę. Każdy element posiadał będzie ten sam plik tła, który nie będzie się powtarzał i będzie opływał w lewo. Następnie każdej klasie przypisana jest pozycja, oraz wysokość i szerokość. Aby napis był wyrównany zastosowano marginesy górne. Po zapisie kodu powinniśmy otrzymać taki wynik. Proste i szybkie, nie musimy dzięki temu wczytywać aż 3 obrazków, w zupełności wystarczy nam 1, na którym dodatkowo mamy jeszcze przecież kilka ikonek :-).
Drugą tak samo ważną rzeczą jest kod. Pisząc nasz kod css starajmy się nie powtarzać, jeśli jesteśmy pewni że nic nie będziemy zmieniać powinniśmy usunąć spacje, znaki powrotu karetki i nowe linie, dzięki temu także można zaoszczędzić trochę miejsca. Wykorzystujmy najoptymalniejsze sposoby odwołań. To znaczy, dobrze jest definiować dane o standardowej czcionkę, jej kolorach już w odwołaniu do ciała (body). Jest wiele zasad pisania kodu, musimy pamiętać że każdy sposób może przyczynić się do mniejszej lub większej długości wczytywania strony, a przecież kiedy user czeka minutę na samą stronę i nie załaduje mu się ona do końca obrazu z niej zrezygnuje i odradzi przyjaciołom, chyba że będzie to nasza-klasa ;-).