TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak poprawić szybkość ładowania stron w statycznych witrynach HTML?

31

HTML jest podstawą Internetu, a serwery WWW wysyłają strony HTML do interfejsu przeglądarki. Przeglądarki, takie jak Chrome, interpretują znaczniki HTML i wyświetlają zawartość strony w czytelny sposób. Ta koncepcja jest taka sama dla witryn korzystających z PHP z systemami zarządzania treścią, takimi jak WordPress. Jednak stworzenie strony internetowej w dzisiejszych czasach nie wystarcza. Musisz zoptymalizować swoją witrynę pod kątem szybkiego ładowania, aby uzyskać dobry ranking w wyszukiwarkach i wygodę użytkownika. W tym artykule dowiemy się, jak przyspieszyć statyczną witrynę HTML i zwiększyć możliwości jej wypychania na szczyt wyników wyszukiwania Google.

Zanim zaczniemy – statyczne strony HTML

Pamiętaj, w tym artykule mówimy o statycznych stronach HTML, które sam tworzysz. Możesz tworzyć strony HTML według własnego projektu lub korzystać z gotowych frameworków, takich jak Bootstrap. Ogólnie rzecz biorąc, możesz przesłać strony HTML i inne zasoby (obrazy / CSS / JS) na swój serwer i uzyskać dostęp do witryny z przeglądarki. Poza nazwą domeny i kontem hostingowym nie potrzebujesz do tego żadnych narzędzi innych firm. Alternatywnie możesz użyć narzędzi innych firm, takich jak Mobirise, do tworzenia statycznych stron HTML i przesyłania ich przez FTP.

Nie rozmawiamy o następujących przypadkach:

  • Systemy zarządzania treścią, takie jak WordPress – WordPress oferuje kompletny pakiet optymalizacyjny, który poprawia szybkość ładowania Twojej witryny. Sprawdź nasz artykuł na temat optymalizacji czasu ładowania strony w witrynach WordPress.
  • Narzędzia do tworzenia stron internetowych, takie jak Weebly, Wix itp. – te platformy nie są rozwiązaniami typu open source, co zasadniczo oznacza, że ​​masz ograniczone możliwości optymalizacji w ramach platformy. Możesz skorzystać z niektórych opcji sugerowanych w tym artykule. Jednak nie możesz optymalizować rzeczy, takich jak łączenie CSS/JS, usuwanie zasobów blokujących renderowanie itp., ponieważ nie masz dostępu do serwera.

Sprawdź szybkość strony w narzędziu Google PageSpeed ​​Insights

Teraz, gdy kontekst jest jasny, przejdziemy dalej. Najlepszym sposobem na rozpoczęcie optymalizacji jest zrozumienie podstawowych problemów występujących w Twojej witrynie. Aby znaleźć problemy związane z szybkością, przejdź do narzędzi Google PageSpeed ​​Insight i sprawdź wynik swojej witryny. Na początku nie przejmuj się zbytnio wynikiem, przewiń w dół i sprawdź sekcję możliwości poprawy wyniku.

Jak poprawić szybkość ładowania stron w statycznych witrynach HTML?

Sugestie Google PageSpeed ​​Insights

Pamiętaj, że możliwości pokazane w narzędziu PageSpeed ​​Insights NIE będą miały bezpośredniego wpływu na wynik. Zasadniczo wynik będzie niski, jeśli wystąpią problemy w części strony widocznej na ekranie (sekcja nagłówka) witryny. Obejmuje to zasoby blokujące renderowanie, wstępne ładowanie czcionek i obrazów, skumulowaną zmianę układu z kodem innej firmy itp. Dlatego można połączyć możliwości i ogólne zasady, aby poprawić szybkość ładowania stron w statycznych witrynach HTML.

Jak poprawić szybkość ładowania stron w statycznych witrynach HTML?

Możesz użyć następujących funkcji, aby poprawić szybkość swojej witryny.

1 Łączenie i minimalizowanie plików CSS i JS

Statyczna witryna HTML będzie zawierała arkusz stylów CSS jako minimalny zasób do definiowania stylu elementów na Twojej stronie HTML. Ponadto możesz użyć dodatkowych plików JavaScript, aby dodać inne funkcje, takie jak suwaki na swojej stronie.

  • Pierwszą rzeczą, której potrzebujesz, jest usunięcie niepotrzebnych spacji i komentarzy w plikach CSS / JS / HTML. Nazywa się to minifikacją, która zmniejsza rozmiar pliku i poprawia szybkość ładowania strony. Użyj tych narzędzi minifikacji CSS, JS i HTML, aby usunąć niepotrzebny bałagan z plików. Pamiętaj, że zminimalizowane pliki CSS i JS będą miały rozszerzenia takie jak .min.css i .min.js.
  • Skontaktuj się z firmą hostingową i włącz kompresję GZIP, aby skompresować zawartość HTML. Spowoduje to zmniejszenie rozmiaru pliku wyświetlanego przeglądarce i radykalnie zwiększy szybkość strony. Za pomocą tego narzędzia możesz sprawdzić, czy Twoja witryna korzysta z kompresji GZIP , i znaleźć oszczędności w rozmiarze.
  • Połączenie plików CSS i JS pomoże Ci zmniejszyć liczbę żądań HTTP do Twojego serwera. Dlatego możesz łączyć pliki CSS zamiast używać stylów w różnych arkuszach stylów. Nie jest to jednak wymagane, jeśli serwer hostingowy obsługuje protokół HTTP/2 obsługujący równoległe żądania HTTP. Ponadto łączenie plików JS może zepsuć układ, chyba że wiesz, jak prawidłowo połączyć kod w pliku.

2 Usuwanie zasobów blokujących renderowanie

Następnym krokiem jest usunięcie zasobów blokujących renderowanie z górnej części (nagłówka) witryny. Zasadniczo upewnij się, że łączysz wszystkie pliki JS za sekcją treści strony HTML. Pomoże to opóźnić ładowanie skryptów i uniknąć problemów z blokowaniem renderowania.

  • Przejdź do narzędzia Google PageSpeed ​​Insights i przetestuj swoją witrynę pod kątem pomiaru szybkości ładowania strony.
  • Jeśli masz jakiekolwiek ostrzeżenia dotyczące zasobów blokujących renderowanie, zanotuj nazwę pliku.
  • Przenieś plik z sekcji nagłówka do obszaru stopki.

Pamiętaj, że nie we wszystkich sytuacjach można przenieść plik do obszaru stopki. Sprawdź, czy układ i funkcje witryny działają prawidłowo, gdy zmieniasz kolejność plików. Ponadto może być konieczne wyłączenie łączenia plików, aby znaleźć plik zasobów, który powoduje problem.

3 Korzystaj z sieci dostarczania treści (CDN)

Powyższe dwie opcje mają bardziej techniczny charakter, co może być dla Ciebie trudne. Aby uniknąć marnowania czasu i łamania układu witryny, najlepszym możliwym rozwiązaniem jest użycie sieci dostarczania treści (CDN), takiej jak Cloudflare StackPath.

  • Możesz łączyć i minimalizować pliki za pomocą sieci CDN zamiast robić to na swoim serwerze.
  • Zwiększ prędkość, zwłaszcza jeśli udostępniasz treści użytkownikom międzynarodowym.
  • Popraw bezpieczeństwo, blokując zautomatyzowane boty oraz stosując ochronę przed atakami brute force i DDoS.

Podstawowy CDN Cloudflare jest bezpłatny, co jest wystarczające dla większości statycznych witryn HTML. Możesz łączyć i minimalizować pliki jednym kliknięciem i testować, jak wpływa to na szybkość ładowania strony w narzędziu Google PageSpeed ​​Insights. Jeśli używasz struktur, takich jak Bootstrap, pamiętaj o dołączeniu zasobu CDN zamiast obsługi pliku źródłowego z serwera.

4 Unikaj kodów firm trzecich

Jednym z najważniejszych czynników wpływających na skrócenie czasu ładowania strony jest ograniczenie używania w witrynie kodów firm trzecich. Problem polega na tym, że nie można kontrolować sposobu ładowania kodów firm trzecich. Dynamiczne zachowanie wczytywania wpłynie na parametry prędkości, takie jak skumulowane przesunięcie układu i największe malowanie treści.

  • Umieść reklamy, takie jak Google AdSense, poniżej widocznego obszaru, gdy strona się ładuje. Niestety wpłynie to bezpośrednio na Twoje zarobki, zmniejszając CTR i odsłony.
  • Wstaw Google Analytics lub dowolny inny kod śledzenia po sekcji treści.
  • Unikaj wstawiania kodów w nagłówku do udostępniania społecznościowego.
  • Jeśli używasz czcionek Google, upewnij się, że używasz ich w uproszczony sposób, z mniejszą grubością czcionek i rodzinami czcionek. Pomoże to zmniejszyć liczbę plików i szybciej pobrać je z serwera Google.

5 Wstępne ładowanie czcionek i obrazów

Innym popularnym problemem z szybkością strony jest wstępne ładowanie czcionek i obrazów, które ładujesz w sekcji nagłówka. Jeśli widzisz komunikaty ostrzegawcze w Google PageSpeed, dodaj następujące kody w sekcji nagłówka. Pamiętaj, aby zastąpić nazwy plików tymi, które widzisz w Google PageSpeed ​​Insights.

<link rel="preload" href="font-file " as="font" crossorigin="anonymous"> <link rel="preload" as="image" href="image-file">

Jest to bardzo przydatne, zwłaszcza gdy używasz wspaniałych ikon czcionek na swojej stronie.

6 obrazów – skompresuj i użyj formatu nowej generacji

Ostatnią opcją, którą tutaj wyjaśnimy, jest skompresowanie obrazów, których używasz w swojej witrynie. Ponieważ statyczne witryny HTML nie mają wbudowanej opcji zmniejszania rozmiaru obrazów, musisz je ręcznie skompresować przed przesłaniem na serwer.

  • Niektóre serwery internetowe mają opcję kompresji obrazów podczas przesyłania. Sprawdź w swojej firmie hostingowej, czy oferuje jakieś narzędzie do tego celu.
  • W przeciwnym razie użyj narzędzi do kompresji obrazu, aby zmniejszyć rozmiar obrazów bez utraty jakości.
  • Dodatkowo możesz przekonwertować format obrazu na JPEG-2000 lub JPEG XR. Ogólnie rzecz biorąc, serwery VPS mają opcję serwera obrazów w formacie WebP, co możesz potwierdzić w swojej firmie hostingowej. W takim przypadku nie potrzebujesz żadnej konwersji, ponieważ nastąpi to automatycznie po stronie serwera dla każdego obrazu. Używanie obrazów w WebP, JPEG-2000 lub JPEG XR pomoże naprawić problem z wyświetlaniem obrazów w formacie nowej generacji w narzędziu Google PageSpeed ​​Insights

7 Użyj krytycznego CSS

Gdy masz tę samą sekcję nagłówka w całej witrynie, istnieje prosty sposób na zwiększenie szybkości ładowania. Zamiast ładować cały plik CSS w nagłówku, możesz użyć CSS tylko dla widocznej sekcji nagłówka, gdy strona ładuje się w oknie przeglądarki. Nazywa się to krytycznym CSS, który można wygenerować za pomocą narzędzi innych firm.

  • Przejdź do krytycznego generatora CSS i podaj adres URL swojej witryny.
  • Wygeneruj krytyczne CSS i skopiuj treść.
  • Stronicuj skopiowane style między … tagami w sekcji nagłówka witryny HTML.
  • Możesz odroczyć główny arkusz stylów do sekcji stopki, aby uniknąć problemu CSS blokującego renderowanie.

Jak poprawić szybkość ładowania stron w statycznych witrynach HTML?

Krytyczny generator CSS

Ostatnie słowa

Jak wspomniano, szybkość ładowania strony Twojej statycznej witryny HTML zależy od renderowania obszaru powyżej obszaru przewinięcia w przeglądarce. Możesz zmniejszyć CSS i skrypty w sekcji nagłówka, aby rozwiązać większość problemów i możliwości wyświetlanych w narzędziu Google PageSpeed ​​Insights. Najlepszą opcją jest użycie CDN i unikanie treści stron trzecich w sekcji nagłówka.

Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów