Wykryto działanie AdBlocka!

Prawdopodobnie masz właczonego Adblocka. Korzystanie z bloga jest całkowicie darmowe. Jeśli jednak chcesz docenić prace autora, wyłacz blokowanie reklam dla tej witryny, aby jeszcze bardziej zmotywowac autora do dalszej pracy oraz częstszej publikacji artykułów.

Dziękuje :)

Treść główna bloga

Artykuły

8 porad jak przyspieszyć wczytywanie witryny internetowej?


Jak przyspieszyć wczytywanie witrynyTworząc strony internetowe musimy mieć na uwadze wiele kwestii takich jak użyteczność strony(ang. usability) czy też dostępność(ang. accessibility). Równie ważnym elementem w procesie tworzenia witryny internetowej jest pełna optymalizacja kodu jak i inne działa mające na celu jak najszybsze wczytanie się strony internetowej. Przecież użytkownicy nie lubią czekać aż witryna się załaduje. W tym artykule przedstawię sposoby aby przyspieszyć ładowanie się strony.

Sposoby na przyspieszenie wczytywania strony:

1. Kompresja gzip:

Dzięki kompresji gzip, który jest na algorytmie deflate zmniejszamy ilość bajtów, które muszą zostać pobrane przez użytkownika aby nasza strona została załadowana. Tym samym zmniejsza się zużywany transfer.

Aby uruchomić ten typ kompresji wystarczy do naszego pliku .htaccess, który znajduje się na serwerze dodać następujący kod:

Powyższy kod sprawdza czy jest dostępny moduł deflate, jeśli tak kompresuje wszystkie rodzaje plików przedstawionych powyżej, czyli między innymi text/css czy text/html.

Jeśli powyższy kod nie zadziała, możemy to zrobić z poziomu PHP za pomocą kodu:

Sprawdza on czy dostępny jest moduł gzip jeśli tak za pomocą ob_start uruchamia go.

Uwaga!W niektórych hostingach usługa ta może być wyłączona lub w ogóle nie zainstalowana. Taka jest na przykład na hostingu NetMark.

2. Wykorzystanie pamięci podręcznej

Dzięki powyższemu kodu możemy manipulować czasem, po którym grafika zostanie odświeżona.
Działa to następująco: użytkownik za każdym razem pobiera grafikę zamieszczoną na naszej stronie, np. logo, które jest w formacie png. Z racji, że logo się nie zmieni szybko, dzięki ExpiresByType image/png „access 1 year” poinformujemy przeglądarkę, że ma zapisać to logo w pamięci podręcznej, dzięki czemu zmniejsza się czas ładowania strony a użytkownik nie musi za każdym razem pobierać całej grafiki.

3. Zmniejsz liczbę plików CSS i Javascript

Dzięki temu zmniejsza liczbę połączeń HTTP koniecznych do załadowania się strony, a więc strona wczytuje się szybciej. Zmniejsza się wówczas czas potrzebny do wysłania żądań i otrzymania odpowiedzi, gdyż plików do pobrania jest mniej.

4. Pliki javascript

Jeśli to możliwe zamieść pliki z rozszerzeniem *.js, czyli pliki javascript pod koniec znacznika body. Spowoduje to, że użytkownik najpierw ujrzy treść strony a następnie wczytają się wszystkie skrypty.

5. Zbędne znaczniki

Tworząc szkielet witryny internetowej staraj się używać jak najmniejszej liczby elementów, potrzebnych do zbudowania strony. Chodzi tu głównie o zbędne div’y. Warto też nauczyć się odpowiednio używać klas i identyfikatorów. Dzięki umiejętnych ich użyciu kod HTML nieco skurczy się. Wówczas przydaje się znajomość selektorów w CSS.

Przykład:
Zamiast kodu:

A następnie w pliku CSS odwoływać się do klasy w sposób: .class, lepiej zrobić tak:

Natomiast w pliku css dodać regułkę .lista li – oznacza to to samo co w pierwszym przykładzie a jest wydajniejsze i bardziej zoptymalizowane.

6. Zmniejsz rozmiar grafiki

Tworząc stronę internetową używamy obrazów o przykładowych wymiarach 200×200. Jednak chcemy zmniejszyć jej wymiary załóżmy do 100×100.

Co to oznacza?

1. Użytkownik pobiera obrazek w wersji 200×200
2. Przeglądarka zmniejsza jego wymiary. (np. kierując się wartościami height=”” i width=””)
3. Obrazek jest wyświetlany.

Chodzi o to, że użytkownik pobiera więcej ważącą(chodzi tu oczywiście i kb 🙂 ) wersję obrazka a i tak nie zobaczy go w pełnym wymiarze.

Co robić?

Wysyłając grafikę na serwer zmniejszajmy jego wymiary do wymiarów, których będziemy używać.

7. Używaj CSS Sprites

Cały fenomen CSS Sprites polega na tym, że grafika, która jest używana na stronie internetowej, przykładowo logo czy inne części strony połączyć w jeden obrazek a następnie za pomocą CSS i za pomocą background-position: oraz width oraz height znaleźć poszczególny element i go wówczas wykorzystać.

Zamiast pisać background-position i background-image: url(…) lepiej połączyć to w jedno: background:. W końcu im mniej zbędnego kodu tym lepiej.

Co to da:
Zamiast pobierać wszystkie obrazki osobno a przy tym generować zdędne żądania HTTP, zostanie pobrany tylko jeden obrazek.

CSS Sprites zastosowano przykładowo w frameworku Twitter Bootstrap dla ikon.

8. Kolejność wczytywania plików CSS oraz Javascript

Jeżeli musimy dodać pliki z kodem JS w sekcji head załączmy najpierw pliki ze stylami ( im mniej tym lepiej!) a dopiero następnie pliki JS.

Dlaczego?

Ponieważ kod JavaScript może zmienić treść i układ strony internetowej. Po znaczniku script przeglądarka wstrzymuje wyświetlanie strony, w tym czasie skrypt zostaje pobrany oraz wykonany. Jeśli najpierw załączymy pliki z CSS strona najpierw wyświetli się a następnie zostaną uruchomione ewentualne skrypty.

Przydatne linki:
http://developers.google.com/speed/pagespeed/insights/
http://tools.pingdom.com/fpt/
Wtyczka PageSpeed dla FireFox’a
Wtyczka PageSpeed dla Chrome
Pozdrawiam,
Dominik

  • Comandeer

    Coś jest nie tak z numeracją 😉
    Zapomniałeś o jednej, bardzo ważnej rzeczy: ograniczeniu żądań HTTP – im mniej tym lepiej. W tym kontekście od razu warto wspomnieć o nowości ze SPDY/HTTP 2.0, czyli o server push.

    • Numeracja poprawiona 🙂 Co do ograniczenia żądań HTTP wspominałem o tym chociażby w punkcie 3.

  • Przydatne zestawienie. Ze zmniejszaniem ilości kodu np. w CSSie jest tak, że jeśli ma się 30 000 linii to może to robi różnicę, natomiast jeśli strona nie jest zaawansowana i bazuje na max 500-1000 linii kodu to wielkiej różnicy nie odczujemy. Kiedyś robiłem test czy wyczuje się różnice w czasie ładowania przy stronie mającej 300 linii kodu. Ja nie odczułem, ale to może subiektywne. Zdecydowanie bardziej istotne jest ilość ładowania bibliotek np. jQuery – to ma kolosalny wpływ.

  • Druga rada najlepsza! Super wpis, pozdrawiam!

  • Myślę, że warto wspomnieć też o tym, że ma znaczenie czy kod CSS jest zapisany w wielu liniach czy też cały kod jest zapisany w jednej linii. Kod zapisany w sposób czytelny dla nas czyli każda właściwość i wartość zapisana w nowej linii ma większy rozmiar niż w przypadku gdy cały kod jest zapisany w jednej linii. Na przykład gdy używamy WinLess warto skompilowany kod zapisać w postaci „min”.

    • Dokładnie to samo należy wykonać też z całym kodem HTML – usunięcie komentarzy i wszelkich innych niepotrzebnych znaków (spacje etc.) – można dzięki temu zmniejszyć o 10-20% wagę pliku.

      Jeśli chodzi o sprite`y to znacznie lepiej jest przestawić się na CSS i budować w nim elementy graficzne, a w jpg/png wrzucać tylko fotki. Polecam zapoznać się także z SVG i tak na początek http://css-tricks.com/using-svg/

      Artykuł jak najbardziej przydatny +1.

  • To wszystko zależy również od danego skryptu, ponieważ wiele systemów takich jak WordPress czy Joomla mają swoje własne wtyczki usprawniające stronę.

  • Xyz

    Zgrabnie napisane, chociaż co do punktu 5 się nie zgadzam. Czasem faktycznie wystarczy „nad” listą deklarować klasę css, ale w większości jest to nie nieuniknione