Critical CSS w Shopify

Arjen Karel
linkedin

Critical CSS w Shopify - w skrócie

Critical CSS to zbiór reguł CSS potrzebnych do pierwszego renderowania. Te reguły CSS są umieszczane w sekcji head strony. Dzięki temu przeglądarka rozpocznie renderowanie bez konieczności pobierania wszystkich blokujących renderowanie plików CSS

Shopify to szeroko stosowane kompleksowe rozwiązanie e-commerce, w którym każdy może łatwo zbudować własny sklep internetowy. Niestety, Shopify nie jest zbudowany z myślą o idealnym wyniku PageSpeed i nie obsługuje automatycznego Critical CSS. Critical CSS w Shopify można dodać jedynie ręcznie.

W tym artykule pokażę Ci, jak szybko dodać Critical CSS do Twojego sklepu Shopify.

Czym jest Critical CSS?

Ze względu na sposób działania wszystkich nowoczesnych przeglądarek, renderowanie strony jest blokowane przez zewnętrzne pliki CSS. Gdy przeglądarka musi pobrać 1 lub więcej plików CSS, renderowanie strony może łatwo zostać zablokowane na 100 ms lub nawet dłużej.
Jednym ze sposobów na uniknięcie tego jest użycie Critical CSS. Critical CSS to zbiór reguł CSS wymaganych do renderowania tylko widocznej części strony. Ten Critical CSS jest często umieszczany inline, w sekcji head strony. Dzięki temu przeglądarka nie musi pobierać 1 lub więcej plików CSS, zanim rozpocznie renderowanie. W międzyczasie, podczas wyświetlania strony, przeglądarka pobiera docelowe pliki CSS w tle.

Zacznij szybko: Critical CSS w Shopify!

Shopify to popularne kompleksowe rozwiązanie e-commerce. Działa bardzo łatwo, ale szybkość strony nie jest najmocniejszą stroną Shopify. Na przykład domyślnie nie ma dobrej i zautomatyzowanej obsługi Critical CSS. Dlatego musimy dodać Critical CSS ręcznie. Na szczęście to niewiele pracy. Postępuj zgodnie z poniższym przewodnikiem krok po kroku, aby użyć Critical CSS w Shopify.

1. Utwórz nowy motyw

Podczas edytowania podstawowego zachowania szablonu w Shopify najlepiej jest utworzyć nowy motyw. Przejdź do swojego obecnego motywu przez 'Online Store'> 'Themes' i skopiuj obecny motyw do nowego, klikając 'Actions'> 'Duplicate'

duplicate shopify theme for critical CSS

2 Wygeneruj Critical CSS

Istnieje wiele sposobów na wygenerowanie Critical CSS. Sam używam modułu NodeJs Critical w połączeniu z ręcznymi dostosowaniami. To trochę łamigłówka, ale często najlepsze rozwiązanie.
Jeśli to dla Ciebie zbyt techniczne, możesz wypróbować jeden z wielu generatorów Critical CSS online. Wpisz adres URL swojej strony, a narzędzie automatycznie wygeneruje Critical CSS. Skopiuj ten Critical CSS i przejdź do następnego kroku.

generate critical CSS for shopify

3. Prześlij Critical CSS

W nowym motywie przejdź do folderu snippets i utwórz nowy plik o nazwie critcal.css.liquid. Wklej zawartość wygenerowanego Critical CSS z kroku 2 do nowego pliku.

upload critical CSS in shopify

4. Edytuj pliki szablonu

Otwórz swój szablon w folderze Layout. Musimy tutaj wprowadzić 2 zmiany. Najpierw dodajemy Critical CSS w sekcji head strony:

<head>

Następnie edytuj istniejące odwołania CSS, aby pobierać oryginalne pliki CSS w tle. W tym celu użyjemy tagu preload. Tag preload informuje przeglądarkę, że plik będzie później używany na stronie. Przeglądarka pobierze ten plik równolegle. Po pobraniu tych plików aktywuj pliki CSS za pomocą JavaScript:

<link

4. Przetestuj nowy motyw

Jesteś teraz gotowy do przetestowania Critical CSS w Shopify. Na stronie motywu kliknij 'Actions' > 'Preview' skopiowanego motywu. Dokładnie przetestuj nowy motyw, zwracając szczególną uwagę na wartość Layout Shift (CLS) w Lighthouse. Niekompletny lub nieprawidłowy Critical CSS może powodować znaczące przesunięcie układu.

critical CSS in shopify testing

5. Opublikuj nowy motyw

Przejdź do Themes w lewym menu pod 'Online Store' i w sekcji 'Actions' wybierz 'Publish' dla nowego motywu.

publish critical CSS in shopify

Critical CSS jest aktywny!

Gratulacje, Twój sklep Shopify używa teraz Critical CSS. Dzięki temu Twój sklep ładuje się znacznie szybciej! Potrzebujesz pomocy w przyspieszeniu swojego sklepu? Chętnie Ci pomogę!

Ograniczenia Shopify

Normalnie chcesz dostarczać Critical CSS tylko odwiedzającym, którzy nie mają docelowych plików CSS w pamięci podręcznej przeglądarki. Serwowanie oryginalnych plików CSS z pamięci podręcznej przeglądarki jest zwykle szybsze niż używanie Critical CSS.
Robi się to przez wysłanie ciasteczka przy pierwszym żądaniu i pewne renderowanie po stronie serwera. Niestety Shopify nie pozwala na odczytywanie i wysyłanie ciasteczek w edytorze Shopify Liquid. To szkoda, ale co zrobisz?
Mimo to warto dodać Critical CSS do swojego sklepu Shopify. Przyrost prędkości sprawi, że będzie to zdecydowanie opłacalne!

Your dev team is busy.

Delegate the performance architecture to a specialist. I handle the optimization track while your team ships the product.

Discuss Resource Allocation >>

Parallel Workflows
Specialized Expertise
Faster Delivery