Оптимизация работы шаблонов Shopify

Optymalizacja szablonów Shopify

Rozważmy optymalizację szablonu na przykładzie strony casaeleganza .com — zoptymalizuj stronę główną.

Dlaczego optymalizować:

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 narzędzie Google PageSpeed ​​Tool zgłosiło wynik 72 dla wersji na komputery stacjonarne (poziom minimalny to 80). Liczba przesłanych plików - 162. Rozmiar strony - 3,2 MB.

Specyfika optymalizacji, którą należy wziąć pod uwagę:

  1. Shopify działa na HTTP 1.1 - więc istnieje ograniczenie liczby plików, które można przesłać w tym samym czasie - zmniejsza to szybkość wyświetlania sklepu.
  2. Nie wszystkie zalecenia Google PageSpeed ​​mogą być przestrzegane ze względu na ograniczenia platformy Shopify
  3. Przed optymalizacją sprawdź listę zainstalowanych aplikacji i usuń wszelkie niepotrzebne aplikacje

Sugestie dotyczące optymalizacji:

1. Użyj pamięci podręcznej przeglądarki

Tego ustawienia 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 skrypty nie blokowały ładowania treści, musisz sprawdzić wywołanie wszystkich skryptów i dodać polecenie „odroczyć”. Polecenie asynchroniczne powinno być używane ze zrozumieniem, jak działają skrypty.

Optymalizacja JS dla Shopify

2.2. Optymalizacja CSS

2.2.1. Wymagane jest grupowanie różnych plików css w jeden wspólny plik tak bardzo, jak to możliwe (ograniczenie HTTP 1.1). Po optymalizacji pozostały 2 pliki: jeden do wstępnego wczytywania, a drugi do wczytywania strony.

2.2.2. W przypadku postloadingu CSS polecenie wstępnego ładowania jest używane w tagu link i skrypt, który implementuje wstępne ładowanie dla niekompatybilnych przeglądarek.

Optymalizacja CSS dla Shopify

2.2.3. Doskonałe przygotowanie CSS dla każdego typu strony (home, kolekcja, produkt, strona, blog). Dzięki temu możliwe będzie zmniejszenie szybkości wyświetlania strony.

2.2.4. Podczas wyświetlania strony głównej użyto opcji 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 load CSS. Critical Pass CSS Generator służy do tworzenia skróconego plik CSS . Aby zwiększyć ocenę, zawartość pliku CriticalCSS jest osadzona w html strony.

Optymalizacja CSS dla Shopify

3. Zoptymalizuj ładowanie widocznych treści

W moim przypadku suwak zajmował większość widocznej części. Ale ze względu na leniwy mechanizm ładowania na ekranie pojawiła się pusta przestrzeń. Aby rozwiązać ten problem, włączyłem wyświetlanie pierwszego obrazu suwaka.

Optymalizacja szybkości sklepu Shopify

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

Minifikacja JS dla Shopify

5.1. Wymagane jest grupowanie różnych plików js w jeden wspólny plik tak bardzo, jak to możliwe (ograniczenie HTTP 1.1).

5.2. Podczas dodawania sprawdź, czy tekst źródłowy skryptów jest zminimalizowany i jeśli to konieczne, zminifikuj go za pomocą usługi Minifier. Jeśli skrypty zawierają kod źródłowy w Liquid, 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 zminimalizowany i w razie potrzeby zminifikuj go za pomocą usługiMinyfikator. Jeśli css zawiera kod źródłowy w Liquid, należy zrezygnować z minimalizacji (lub przeprowadzić częściową minimalizację).

7. Włącz kompresję

Tego ustawienia nie można kontrolować — ograniczenie Shopify

8. Zminimalizuj HTML

8.1. Zminimalizuj style CSS i tekst js za pomocą Minifier.< /p>

8.2. Usuń dodatkowe spacje w tekście HTML. Problem związany jest z działaniem poleceń języka płynnego. 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 {% komentarz %} wyglądałby tak {%- komentarz -%}.

PS Aby zoptymalizować szybkość ładowania mobilnej wersji witryny, Google stworzył technologię AMP, która przyspiesza Czas ładowania sklepu Shopify.