Rozważ optymalizację szablonu na przykładzie strony casaeleganza.com - zoptymalizuj stronę główną.
Dlaczego potrzebna jest optymalizacja:
Podczas wyświetlania wyników wyszukiwania Google bierze pod uwagę ranking i optymalizację sklepu. Sklepy z wyższymi stawkami częściej pojawiają się na pierwszych pozycjach wyników wyszukiwania.
Narzędzia, które pomogą Ci zrozumieć kierunki optymalizacji:
W momencie rozpoczęcia optymalizacji Google PageSpeed Tool zgłosiło ocenę 72 dla wersji desktopowej (minimalny poziom to 80). Liczba przesłanych plików - 162. Rozmiar strony - 3,2 Mb.
Cechy optymalizacji, które należy wziąć pod uwagę:
- Shopify działa na protokole HTTP 1.1 - istnieje więc ograniczenie liczby plików, które można przesłać jednocześnie - zmniejsza to szybkość wyświetlania sklepu.
- Nie wszystkie rekomendacje Google PageSpeed można zastosować ze względu na ograniczenia platformy Shopify
- Przed rozpoczęciem optymalizacji sprawdź listę zainstalowanych aplikacji i usuń wszystkie niepotrzebne aplikacje
Propozycje optymalizacji:
1. Użyj pamięci podręcznej przeglądarki
Tego parametru nie można kontrolować – ograniczenie Shopify.
2. Usuń JavaScript i CSS blokujące wyświetlanie górnej części strony
2.1. Optymalizacja JS
Aby zapobiec blokowaniu ładowania treści przez skrypty, musisz sprawdzić wywołanie wszystkich skryptów i dodać polecenie „odroczenia”. Polecenia async należy używać ze zrozumieniem działania skryptów.
2.2. Optymalizacja CSS
2.2.1. Wymagane jest jak największe zgrupowanie różnych plików css w jeden wspólny plik (ograniczenie HTTP 1.1). Po optymalizacji pozostały 2 pliki: jeden do wstępnego ładowania i drugi do postloadu strony.
2.2.2. Aby postload CSS, użyj polecenia preload w tagu łącza i skrypt, który implementuje wstępne ładowanie dla niekompatybilnych przeglądarek .
2.2.3. Perfekcyjne przygotowanie CSS dla każdego typu strony (home, collection, product, page, blog). Dzięki temu okaże się, że zmniejszy się szybkość wyświetlania strony.
2.2.4. Przy wyświetlaniu strony głównej wykorzystano opcję Critical CSS - gdy wszystkie polecenia CSS niezbędne do wyświetlenia strony głównej są alokowane w osobnym pliku, a pozostałe polecenia CSS są ładowane przez ładowanie CSS. Usługa Critical Pass CSS Generator służy do generowania skróconego pliku CSS. Aby podnieść ocenę, zawartość pliku CriticalCSS jest osadzona w kodzie HTML strony.
3. Zoptymalizuj ładowanie widocznych treści
W moim przypadku suwak zajmował większość widocznej części. Ale z powodu leniwego mechanizmu ładowania na ekranie było puste miejsce. Aby rozwiązać ten problem, włączyłem wyświetlanie pierwszego obrazu slidera.
4. Zoptymalizuj swoje obrazy
Google PageSpeed zauważył, że niektóre obrazy można zmniejszyć nawet o 30%. Zwróć uwagę na typy plików (zwykle jpeg), ich rozmiary (do 2000 pikseli) i rozdzielczość (do 100 ppi). Do tego zalecenia należy podchodzić z ostrożnością, ponieważ nie zawsze zoptymalizowane obrazy wyglądają dobrze.
5. Zminimalizuj JavaScript
5.1. Wymagane jest jak największe zgrupowanie różnych plików js w jeden wspólny plik (ograniczenie HTTP 1.1).
5.2. Podczas dodawania sprawdź, czy tekst źródłowy skryptów jest zminimalizowany iw razie potrzeby zminimalizuj go za pomocą usługi minimalizator . Jeżeli skrypty zawierają kod źródłowy Liquid, wówczas należy zrezygnować z minimalizacji (lub przeprowadzić częściową minimalizację).
6. Zminimalizuj CSS
Podczas dodawania sprawdź, czy tekst źródłowy plików css jest zminifikowany iw razie potrzeby zminimalizuj go za pomocą usługi minimalizator . Jeśli css zawiera kod źródłowy na Liquid, to należy zrezygnować z minimalizacji (lub przeprowadzić częściową minimalizację).
7. Włącz kompresję
Nie można kontrolować tego parametru — ograniczenie Shopify
8. Minifikuj HTML
8.1. Minifikuj style css i tekst js za pomocą usługi minimalizator .
8.2. Usuń dodatkowe spacje w tekście HTML. Problem jest związany z działaniem poleceń płynnego języka. Polecenia, które nie wyświetlają tekstu, tworzą pusty ciąg w tekście HTML. Aby tego uniknąć, musisz dodać myślnik na początku i na końcu polecenia.
Na przykład {% comment %} wyglądałby tak {%- comment -%} .
PS Aby zoptymalizować szybkość ładowania mobilnej wersji serwisu, Google stworzyło technologię AMP, która przyspiesza Czas ładowania sklepu Shopify .