Jak przyspieszyć stronę Tilda

Ładowanie stron internetowych jest przedmiotem szczególnej uwagi w Internecie. Dlatego praca nad szybkością ładowania stron internetowych stała się dla nas rutyną. Wdrażamy nowe technologie i optymalizujemy procesy techniczne. Niektóre aktualizacje są widoczne dla użytkowników, inne nie. Jest to proces ciągły i już teraz jesteśmy dumni z postępów, jakie poczyniliśmy.

W tym artykule przedstawimy krótką listę kontrolną dotyczącą tego, jak zwiększyć szybkość ładowania witryny przy użyciu istniejących narzędzi Tilda i modyfikując ustawienia. Szczegółowo omówimy każdy punkt, abyś mógł samodzielnie dostosować ustawienia swojej witryny i sprawić, by ładowała się jeszcze szybciej.

Zanim omówimy każdy punkt, zobaczmy, jak można ocenić szybkość ładowania strony.

Wielu użytkowników Tilda sprawdza szybkość ładowania stron w swoich witrynach za pomocą usługi Google PageSpeed Insights. Usługa ta symuluje ładowanie strony na urządzeniach mobilnych i komputerach stacjonarnych, przypisując im ocenę wydajności.

Jest to konwencjonalne narzędzie techniczne, które nie zawsze odzwierciedla rzeczywistą prędkość ładowania. Z naszego doświadczenia wynika, że dane zbierane przez Chrome i wyświetlane w panelu dewelopera są znacznie lepsze niż te uzyskane za pomocą symulacji PageSpeed Insights. Dlatego też nie zalecamy polegania wyłącznie na PSI - traktujmy go jako dodatkowe lub pośrednie narzędzie analityczne.

Lepszą opcją jest monitorowanie rzeczywistej szybkości ładowania strony. Możesz to zrobić w Narzędziach dla programistów w Chrome: otwórz konsolę (Option + Ctrl + I / Alt + Cmd + I) i przejdź do paska narzędzi Przełącz urządzenie → karta Sieć → przeładuj stronę, którą chcesz ocenić. Najważniejszymi parametrami są DOMContentLoaded, który pokazuje czas potrzebny na załadowanie struktury strony oraz Load, który pokazuje czas potrzebny na załadowanie strony ze wszystkimi tabelami i stylami.

Ta metoda również nie jest idealna - szybka symulacja 3G na pasku narzędzi nie symuluje wyraźnie i poprawnie ładowania strony na urządzeniach mobilnych, więc będziesz musiał sprawdzić szybkość ładowania na rzeczywistych urządzeniach i wyciągnąć wnioski na podstawie danych.

Tilda ma zaimplementowaną dużą liczbę optymalizacji przyspieszających ładowanie stron. Podstawowe strony internetowe bez kodu lub skryptów innych firm ładują się szybko. Możesz przekonać się o tym sam: wybierz szablonTilda i sprawdź szybkość ładowania strony za pomocą PageSpeed Insights.

Sprawdźmy to na prawdziwej stronie internetowej: Wybraliśmy jeden z szablonów z biblioteki szablonówTilda i utworzyliśmy z niego stronę internetową dla osobistej stylistki Annie. Oszacujmy szybkość jej ładowania za pomocą PageSpeed Insights.

Oczywiście szybkość ładowania zależy od złożoności witryny, obecności określonych bloków oraz od tego, czy podłączyliśmy widżety, liczniki, statystyki i inne dodatki innych firm, które mogą spowolnić ładowanie witryny.

Napisaliśmy ten artykuł, abyś mógł zrozumieć tę kwestię i nauczyć się identyfikować ustawienia, które pomogą Ci stworzyć szybko ładującą się witrynę. Musisz jednak podjąć ważną decyzję - zastosowanie wszystkich wskazówek z listy kontrolnej wpłynie nie tylko na szybkość ładowania witryny, ale także na jej wygląd.

Funkcja Lazy Load umożliwia stopniowe ładowanie obrazów w miarę przewijania strony przez użytkownika, a nie wszystkich naraz. To ustawienie jest domyślnie włączone, co bezpośrednio wpływa na wydajność witryny.

Często widzimy projektantów tworzących niestandardowe strony internetowe, którzy z jakiegoś powodu wyłączają Lazy Load - nie zalecamy tego, ponieważ spowalnia to działanie witryny.

Upewnij się, że funkcja Lazy Load jest włączona dla Twojej witryny. Aby to zrobić, przejdź do Ustawienia witryny → Więcej, a następnie upewnij się, że pole "Wyłącz Lazy Load dla obrazów" jest odznaczone. Sprawdź również, czy funkcja nie jest wyłączona w ustawieniach obrazów i kształtów w Zero Block.

Lazy Load i ręczna optymalizacja obrazów to dwie najważniejsze rzeczy, które można zoptymalizować. Obrazy są najcięższym elementem na stronie internetowej, więc 70% szybkości ładowania strony zależy od nich.

Tilda ma wyjątkową funkcję - AdaptiveImage Loading. Jest to specjalna technologia przetwarzania obrazu, która skaluje obrazy do rozmiaru kontenera na stronie internetowej w zależności od urządzenia użytkownika. Konwertuje również obrazy do WebP, formatu nowej generacji, który kompresuje obraz bez utraty jakości, dzięki czemu strona ładuje się szybciej. Konwersja odbywa się automatycznie, bez konieczności wykonywania dodatkowych czynności.

W niektórych przypadkach automatyczna optymalizacja "w locie" nie może się równać z ręczną kompresją obrazu. Jeśli szybkość ładowania strony ma dla ciebie kluczowe znaczenie, zalecamy optymalizację obrazów za pomocą TinyPNG, bezpłatnej usługi online, która wykorzystuje technologię bezstratnej kompresji danych do kompresji obrazów bez widocznej utraty jakości.

Innym rozwiązaniem jest dodanie różnych bloków dla wersji desktopowej i mobilnej witryny oraz przesłanie obrazów o różnych rozmiarach i wadze. Można to zrobić na przykład dla strony tytułowej witryny.

Algorytm na stronie Tilda będzie następujący: gdy strona się załaduje, zoptymalizuje obraz "w locie", a jeśli zoptymalizowany obraz zajmie mniej miejsca niż oryginalny obraz, automatycznie go wyświetli. Może się to zdarzyć, gdy pamięć podręczna się rozgrzewa, a system nadal gromadzi statystyki ruchu, aby z wyprzedzeniem przygotować obrazy o wymaganej rozdzielczości. Ręczna optymalizacja nie zaszkodzi, a w niektórych przypadkach może nawet pomóc zoptymalizować obrazy i zwiększyć szybkość ładowania strony.

Ta kategoria optymalizacji zajmuje drugie miejsce pod względem wagi i znaczenia. Czcionki systemowe, takie jak Arial lub Georgia, są dostępne na każdym komputerze. Istnieją również czcionki wtykowe, takie jak Ubuntu i Roboto.

Jeśli chcesz maksymalnie przyspieszyć swoją witrynę, nie zalecamy używania niestandardowych czcionek, ale wybranie jednej z czcionek systemowych. W ten sposób możesz zaoszczędzić 100-400 KB, co jest znaczące, jeśli chodzi o ładowanie strony.

Jeśli potrzebujesz użyć brandingu lub identyfikacji wizualnej, możesz skorzystać z naszej nowej funkcji - natychmiastowego renderowania treści. Ustawienie to umożliwia wyświetlanie treści na stronie internetowej niezależnie od tego, czy czcionka marki została załadowana. Witryna najpierw wyświetli czcionkę systemową, a po kilku sekundach, po załadowaniu czcionki, tekst zostanie ponownie wyrenderowany, tym razem czcionką marki.

Ta funkcja nie jest domyślnie włączona. Jeśli cenisz szybkość ładowania bardziej niż płynność ładowania lub aspekt wizualny, możesz włączyć tę funkcję w Ustawieniach witryny → Czcionki i kolory → Zaawansowane.

Sprawdź, czy masz podłączone skrypty lub kod innych firm, takie jak czaty lub licznik. Na stronie Tilda można je podłączyć za pomocą bloku T123. Dlatego sprawdź, czy masz ten blok na stronie lub w nagłówku swojej witryny.

Zgodnie z naszymi obserwacjami, w 95% przypadków kod dodany do strony nie jest zoptymalizowany pod kątem strategii ładowania i może poważnie spowolnić renderowanie strony. Dlatego zalecamy unikanie korzystania ze skryptów innych firm lub używanie ich z odpowiednim połączeniem.

Jeśli nie możesz obejść się bez kodu innych firm, opóźnij ładowanie i inicjalizację skryptu. Pierwsze kilka sekund renderowania strony jest bardzo ważne, więc najlepiej byłoby, gdyby nie ładowało się nic niepotrzebnego. Załóżmy na przykład, że dodajesz widżet Intercom. W takim przypadku warto podłączyć i zainicjować skrypt 3 sekundy po wyrenderowaniu głównej treści (zdarzenia "DOMContentLoaded" lub "document ready"). Ten krok pomoże zapobiec blokowaniu głównego strumienia ładowania, dzięki czemu strona będzie renderować się szybciej.

Na przykład na stronie Tilda liczniki ładują się domyślnie z 2-sekundowym opóźnieniem. Więcej informacji na ten temat znajduje się w następnym akapicie.

Opóźniona inicjalizacja licznika to nowa funkcja, która została niedawno udostępniona wszystkim użytkownikom Tilda . Aby licznik na stronie mógł się połączyć, przeglądarka musi załadować skrypt, przeanalizować kod i wykonać go. Pliki Google Analytics są dość ciężkie, więc spowolnią szybkość wyświetlania strony, jeśli wszystkie załadują się jednocześnie. Dlatego domyślnie łączymy te liczniki 2 sekundy po załadowaniu strony.

Możesz upewnić się, że to ustawienie nie jest wyłączone w Ustawieniach witryny → Analytics.

Punkt wydaje się oczywisty, ale działa: im mniej informacji na stronie, tym szybciej się ona załaduje. Spójrz na swoją witrynę krytycznym okiem: czy jest tak konieczne, aby wszystkie informacje i obrazy znajdowały się na stronie, czy też można je skrócić? Na przykład, jeśli masz bardzo długą stronę (ponad 20 ekranów), przenieś część treści na inną stronę, aby zwiększyć szybkość jej ładowania. Jest to coś, na co możesz wpływać i dostosowywać bezpośrednio.

Użytkownicy czasami umieszczają duże zdjęcie okładki na pierwszym ekranie wraz z czterema mniejszymi zdjęciami w następnym bloku. W takim przypadku przeglądarka musi pobrać pięć obrazów zamiast jednego. Powoduje to zatykanie ruchu, zwłaszcza w przypadku Internetu mobilnego, dlatego nie zalecamy umieszczania zbyt wielu zdjęć na górze strony.

Upewnij się, że Twoja witryna nie jest eksportowana ani synchronizowana za pośrednictwem interfejsu API - innymi słowy, upewnij się, że Twoja witryna znajduje się na serwerach Tilda. W przypadku eksportu upewnij się, że Twój serwer internetowy jest optymalnie skonfigurowany.

Tilda zbudował wysokiej jakości infrastrukturę wewnętrzną, którą wciąż ulepszamy i rozwijamy. Zadbaliśmy o wiele rzeczy: niezawodne i szybkie serwery, CDN, aby przyspieszyć dostarczanie obrazów, ochronę przed atakami DDoS i kilka innych technicznych poprawek, które mają na celu maksymalizację szybkości ładowania stron Tilda .

Jeśli chodzi o hosting stron trzecich, nie możemy kontrolować ilości ani jakości pracy administratorów systemu. Niemniej jednak możemy podać kilka wskazówek, co możesz zrobić, aby Twoja witryna ładowała się szybciej, jeśli je wyeksportowałeś:
- Podłącz CDN i wyświetlaj obrazy za pośrednictwem rozproszonej sieci dostarczania treści.
- Włącz nagłówki buforowania CSS/JS/HTML w ustawieniach serwera WWW, aby przeglądarka nie pobierała ich za każdym razem, ale pobierała je z pamięci podręcznej.
- Włącz kompresję Gzip lub Brotli dla plików CSS, JS i HTML.
- W ustawieniach włącz kompresję plików tekstowych: CSS, JS, HTML.
- Dodaj atrybut "async" do skryptów JS innych firm, aby ich ładowanie nie spowalniało ładowania strony.
- Dodawaj widżety innych firm tylko wtedy, gdy jest to konieczne, ustaw opóźnienie inicjalizacji na 2-3 sekundy, aby zawartość strony miała wystarczająco dużo czasu na renderowanie.

Tilda Strony internetowe ładują się domyślnie dość szybko. Jeśli chcesz jeszcze bardziej przyspieszyć swoją witrynę, skorzystaj z naszych zaleceń z listy kontrolnej. Pomogą ci one stworzyć ultraszybką stronę internetową, ale będziesz musiał pójść na kilka kompromisów w zakresie projektowania i wizualizacji. Zawsze pozostawiamy te decyzje i priorytety użytkownikowi.

Z naszej strony stale pracujemy nad optymalizacją platformy i wdrażaniem nowych rozwiązań, które sprawią, że Twoja witryna będzie jeszcze szybsza.