Przyspieszenie witryny - Optymalizacja CSS, HTML i JavaScript

1. Wprowadzenie Optymalizacja (minimalizacja) to proces usuwania niepotrzebnych znaków, które nie są...
2. Krok 1 - Wykrywanie niezoptymalizowanych plików CSS, HTML, JavaScript.
3. Krok 2 - Zastąpienie niezoptymalizowanych plików
4. Opcja 1 - wymiana ręczna
5. Opcja 2 - Wtyczki CMS
6. Opcja 3 - CloudFlare
7. Krok 3 - Testowanie zmian
8. Wniosek

Wprowadzenie

Наша команда-партнер Artmisto

Optymalizacja (minimalizacja) to proces usuwania niepotrzebnych znaków, które nie są potrzebne do wykonania kodu. Zmniejszenie kodu zwiększy szybkość ładowania strony, co doprowadzi do zadowolenia odwiedzających i lepszej wydajności wyszukiwarek. Mówiąc najprościej, jest to proces usuwania niepotrzebnych spacji, znaków nowej linii, komentarzy i separatorów bloków z kodu. Tego rodzaju znaki są używane do łatwiejszego czytania i celów wizualnych, jednak nie są konieczne do poprawnego wykonania kodu. W rezultacie optymalizacja CSS, HTML i JavaScript przyspieszy czas pobierania, analizowania i wykonywania kodu.

Czego potrzebujesz

Przed rozpoczęciem tego samouczka potrzebne będą:

Krok 1 - Wykrywanie niezoptymalizowanych plików CSS, HTML, JavaScript.

Na tym etapie zalecamy użycie GTMetrix . Po przeanalizowaniu strony testowej WordPress otrzymaliśmy listę plików, które można zoptymalizować.

Krok 2 - Zastąpienie niezoptymalizowanych plików

WAŻNE! Bezpieczeństwo przede wszystkim. Przed zapisaniem jakichkolwiek zmian upewnij się, że masz kopię zapasową witryny lub poszczególnych plików, które zostaną zastąpione.

Opcja 1 - wymiana ręczna

Jedna z zalet GTMetrix Możliwe jest natychmiastowe wyświetlanie zoptymalizowanych wersji plików CSS, JS i HTML, klikając przycisk Zobacz zoptymalizowaną wersję obok pliku. Następnie zoptymalizowany plik można pobrać lub otworzyć w przeglądarce. Zastąp stare pliki za pomocą klienta FTP lub skopiuj i zamień sam kod.

Opcja 2 - Wtyczki CMS

Użytkownicy WordPress mogą używać wtyczek, aby osiągnąć te same cele. Lepsze WordPress Minify lub Całkowita pamięć podręczna W3 . Możesz się zwrócić do ten przewodnik aby uzyskać bardziej szczegółowe instrukcje dotyczące instalowania wtyczki W3 Total Cache.

Opcja 3 - CloudFlare

CloudFlare to darmowa usługa, która przyspiesza i chroni twoją stronę, działając jako proxy między gościem a serwerem strony. Zapewnia ochronę przed atakami DDoS, a co najważniejsze, jest bezpłatny. Jedną z funkcji obejmujących bezpłatną taryfę jest optymalizacja CSS, HTML i JS. Możesz włączyć optymalizację zasobów w sekcji Szybkość → Automatyczna minimalizacja :

WAŻNE! Korzystanie z optymalizacji CloudFlare nie jest zalecane, jeśli używasz już wtyczek CMS do optymalizacji. Ponadto CloudFlare nie optymalizuje skryptów i linków stron trzecich (Facebook, VK, Twitter)

Krok 3 - Testowanie zmian

Po zastąpieniu plików / kodu ich zoptymalizowaną wersją, ostatnim krokiem będzie sprawdzenie zmian. Możesz to zrobić, przeprowadzając ponowną analizę na stronie. GTMetrix . Dla porównania oto wyniki strony testowej po zamianie plików na zoptymalizowane:

Wniosek

W tym krótkim samouczku nauczyłeś się, jak przyspieszyć witrynę, optymalizując CSS, JavaScript i HTML.

Powiązane przewodniki: