Jak przyśpieszyć ładowanie strony internetowej?

Wbrew pozorom, prędkość ładowania witryn internetowych ma ogromne znaczenie dla każdego właściciela serwisu internetowego. Google jawnie przyznaje, że strony o długim czasie ładowania osiągają niższe pozycje w wynikach wyszukiwania. Według badań, pierwsze kilka sekund decyduje o tym, czy odwiedzający stronę użytkownik zostanie na niej. A co w przypadku jeśli te kilka sekund zajmuje samo ładowanie? W myśl teorii, że nikt nie lubi czekać, niestety zwiększamy szansę na to, że tak się właśnie stanie i nasz odwiedzający opuści stronę w poszukiwaniu innej, szybciej działającej.

Na szczęście mamy wpływ na to jak szybko ładuje się nasza witryna. Jednak minusem tego rozwiązania jest wymóg przynajmniej podstawowej wiedzy na temat tworzenia stron internetowych. Jeżeli takowej nie posiadacie lub po prostu nie macie czasu na wprowadzenie zmian, polecamy nasze usługi, wejdźcie na stronę www.sungroup.pl i skontaktujcie się z nami.

Sprawdzenie „na oko” nie jest dobrym sposobem, tak samo jak zbadanie czasu wczytywania poprzez narzędzie programistów i zakładkę „timeline”. Co prawda pokaże nam ono dokładny wynik co do milisekundy, jednak pamiętajmy, że wynik ten zależy od szybkości łącza internetowego, a przecież nie każdy posiada takie same. Wystarczy słabszy zasięg WiFi i otrzymamy inny wynik. W takim razie czy jest sposób aby zbadać to dokładnie? Tu z pomocą przychodzi nam narzędzie od Google o nazwie PageSpeed Insights. Wystarczy wejść na stronę i wpisać adres www naszej witryny aby zbadać jej prędkość ładowania. Warto zaznaczyć, że wynik podany zostanie osobno dla stron wyświetlanych na urządzeniach mobilnych, jak i tych świetlanych na standardowych komputerach.

Wynik otrzymamy w skali od 1 do 100. Im bliżej setki jesteśmy, tym nasza strona ładuje się szybciej. Optymalny wynik to ponad 80 punktów. Jeżeli nasz wynik to liczba poniżej 80 to znaczy, że powinniśmy poprawić naszą witrynę. No właśnie, tylko co powinniśmy zrobić? Tu również z pomocą przychodzi nam narzędzie PageSpeed, które wyświetla nam listę błędów na naszej stronie i podpowiada nam co oraz w jaki sposób powinniśmy poprawić. Poniżej przedstawiamy kilka rzeczy na których powinniśmy się skupić przy tworzeniu czy optymalizacji naszego serwisu.

Najczęściej popełnianym błędem, który ma wpływ na szybkość ładowania strony jest zbyt duża waga obrazków. Może to być spowodowane nieumiejętnym ich wykorzystaniem np. przez ładowanie większych grafik i ograniczanie ich rozmiaru za pomocą kodu HTML czy CSS. To duży błąd, pamiętajmy aby zmniejszać obrazy do rozmiarów jakie faktycznie są nam potrzebne. Oprócz zmiany rozmiaru zdjęcia, mamy również możliwość wykonania kompresji. Posłużyć do tego może nam program graficzny taki jak Photoshop. Możemy też skorzystać z darmowych programów np. Gimp czy Pingo, który możecie ściągnąć tutaj. Dzięki temu bez straty jakości zdjęcia, osiągniemy mniejszą wagę plików.

W dobie nowoczesnych stron internetowych korzystamy z mnóstwa różnych plików JS i CSS. Warto zadbać o to aby ważyły one jak najmniej. Popularnym rozwiązaniem jest stosowanie plików skompresowanych, nie zawierających zbędnych spacji, komentarzy i odstępów. To samo dotyczy plików HTML. Je również możemy skompresować, aby ważyły mniej. To skróci czas ich ładowania i pozwoli osiągnąć lepszy wynik w naszym teście. W jaki sposób możemy skompresować nasze pliki? W Internecie znajdziemy mnóstwo darmowych stron internetowych gdzie możemy taką kompresję wykonać. Dla plików JS polecamy jscompress, dla plików CSS stronę cssminifier, natomiast jeżeli chodzi o HTML to polecamy willpeavy.

Przechodząc między podstronami za każdym razem pobieramy z serwera niezbędne pliki. W ten sposób generujemy dużo zbędnych działań, które obciążają nasze serwery. Rozwiązaniem na to jest zapamiętanie plików w pamięci podręcznej przeglądarki, czyli tak zwane cachowanie. Pamięć cache przechowuje raz pobrane pliki aby nie trzeba było ładować ich przy każdym wywołaniu strony. To bardzo sprytne i mądre rozwiązanie. Aby wykorzystać pamięć podręczną należy użyć odpowiednich dyrektyw w pliku .htaccess i ustalić termin ważności dla poszczególnych plików. Po upływie tego okresu, pliki zostaną ponownie pobrane. Niżej przedstawiamy przykładowe komendy do wklejania na końcu Twojego pliku .htaccess.

Z tym komunikatem możemy się spotkać wykorzystując narzędzie PageSpeed Insights. O co chodzi? Wczytywanie strony „rysuje” (renderuje) ją w oknie przeglądarki, jeżeli po drodze trafi na plik JS lub CSS którego musi pobrać, proces rysowania zatrzymuje się do momentu załadowania pliku w całości. Aby temu zaradzić należy ładować pliki asynchronicznie, choć w niektórych przypadkach może to prowadzić do błędnego wyświetlania się strony. Innym rozwiązaniem może być przyklejenie plików JS na koniec strony przed zamknięciem znacznika body.

Serwer, na którym znajduje się nasza strona, również ma wpływ na szybkość ładowania. Jeżeli posiadamy duży serwis, który korzysta z mnóstwa plików oraz baz danych, do tego jest regularnie odwiedzany przez internautów, możemy mieć pewność że generuje to spore obciążenie dla serwera. Jeżeli parametry hostingu nie są zbyt wygórowane, takie obciążenie może powodować długi czas odpowiedzi serwera, przez co wszystko będzie działać wolniej. Rozwiązaniem tego problemu jest skorzystanie z bardziej wydajnego hostingu.

Jeżeli wykonaliście poprawnie wszystkie zalecenia, Wasz serwis nie powinien mieć problemu z osiągnięciem wyniku powyżej 80 punktów, zarówno dla urządzeń mobilnych jak i komputerów. Jeśli mimo tego, wynik jest niższy, to znak, że powinniście zwrócić się z tym problemem do specjalistów.