Uwaga: Poniższy artykuł pomoże Ci w: Jaka jest najlepsza aplikacja Shopify, aby zwiększyć swój wynik PageSpeed?
Shopify to jedna z tych platform, z którymi żywię miłość i nienawiść.
Z jednej strony jest to jedna z najpotężniejszych opcji do założenia sklepu eCommerce i jest dość łatwa do uruchomienia.
Możesz mieć funkcjonalny, wspaniale wyglądający sklep internetowy wypełniony produktami w ciągu jednego dnia lub mniej, jeśli wiesz, co robisz, a dużo tego czasu zajmuje dodawanie produktów i publikowanie treści.
Z drugiej strony ich system blogów mógłby wymagać ulepszeń.
Jesteś o wiele bardziej ograniczony w tym, co możesz zrobić z aplikacjami, niż gdybyś korzystał z systemu takiego jak WordPress, a domyślna platforma Shopify, choć stosunkowo szybka, nadal nie zapewni Ci upragnionego wyniku 90+ na PageSpeed.
Ponieważ szybkość witryny jest niezbędnym nowoczesnym wskaźnikiem i czynnikiem wpływającym na wrażenia użytkownika, który Google nagrodzi, warto przyspieszyć witrynę Shopify.
Wiele aplikacji obiecuje światu przyspieszenie Twojej witryny, ale czy któraś z nich działa? Która jest najlepsza?
Cóż, wypróbowałem jak najwięcej z tych aplikacji Shopify i mam ostateczną odpowiedź na pytanie, która jest najlepsza do optymalizacji PageSpeed.
Zwycięzca: Hyperspeed
Spośród wszystkich aplikacji zwiększających szybkość strony dostępnych w sklepach Shopify zdecydowanie najlepsza, którą wypróbowałem, była Hyperspeed: Extreme Page Speed autorstwa Rvere.
Ta opcja jest dość wszechstronną aplikacją do przyspieszania strony dla Shopify i zapewnia szereg korzystnych funkcji, w tym tablicę, która zwykle wymagałaby 3-4 wtyczek do WordPress.
Nie jest – mam kilka wad do zalet – ale jest najskuteczniejszy ze wszystkich, które testowałem.
Możesz go używać bez umiejętności kodowania, a za jednym kliknięciem będziesz mieć szybszą witrynę Shopify.
Jakie funkcje posiada Hyperspeed?
Po pierwsze, mają pełny zestaw narzędzi do optymalizacji i przyspieszania.
Mogą wykonywać wiele operacji minimalizowania i optymalizacji skryptów oraz odraczania skryptów, więc nie muszą uruchamiać się przy ładowaniu strony (co jest zabójcze dla podstawowych wskaźników internetowych).
Mogą zoptymalizować kod motywu Shopify, na którym znajduje się wiele aplikacji przyspieszających ładowanie strony Shopify nie dotykaj.
Mają wbudowane narzędzie do kompresji/rozcierania obrazu, które zapewnia, że obrazy zajmują jak najmniej miejsca, ładują się bardzo szybko i zachowują większość oryginalnej jakości obrazu.
Jedną z najbardziej niezwykłych funkcji jest kontrola aplikacji na poziomie strony, dzięki czemu aplikacje, które nie muszą pojawiać się na określonych stronach (takich jak strony docelowe lub strony produktów), nie ładują się na tych stronach.
Jedna funkcja, której nie chcę wymieniać jako profesjonalista, to przewidywane wstępne ładowanie strony.
Wstępne ładowanie ma miejsce, gdy ładujesz stronę, witryna przechodzi, aw tle wybiera linki na stronie i ładuje strony po drugiej stronie tych linków na wypadek, gdybyś zdecydował się je kliknąć.
Wstępne ładowanie linków wymaga trochę zasobów, ale znacznie przyspiesza przeglądanie reszty witryny dla użytkownika.
Wstępne ładowanie predykcyjne wybiera najbardziej prawdopodobne łącza do załadowania i ładuje tylko niektóre z możliwości.
Stawia na to, że klikniesz odpowiednie linki, aby uzyskać szybsze ładowanie przy następnym kliknięciu.
Problem ze wstępnym ładowaniem polega na tym, że działa tylko wtedy, gdy odpowiednie strony są wstępnie załadowane i działa tylko wtedy, gdy jesteś już na stronie. Nie może wstępnie załadować pierwszej strony odwiedzanej przez użytkownika, bez względu na to, jaka to jest strona.
Przyspiesza więc wizyty osób, które spędzają czas w Twojej witrynie, ale nie przyspiesza pierwszych wizyt.
Co Google mierzy szybkość witryny? Pierwsze wizyty.
Wstępne ładowanie linków nie wpływa na wyniki Google PageSpeed Insights.
Niektórym użytkownikom daje tylko odrobinę postrzeganej prędkości.
Zalety Hyperspeed dla Shopify
Niektóre z podstawowych funkcji Hyperspeed są w mojej kolumnie profesjonalistów, ponieważ są tak potężne.
1.
Po pierwsze umożliwia leniwe ładowanie zdjęć i filmów używasz na swojej stronie.
Leniwe ładowanie jest niezbędnym narzędziem do optymalizacji PageSpeed i Core Web Vitals, ponieważ chcesz, aby strona i układ ładowały się tak szybko, jak to możliwe.
Oczekiwanie na pełne załadowanie dużych obrazów lub, nie daj Boże, filmów przed zakończeniem wyświetlania strony jest wręcz katastrofalne.
Oczywiście leniwe ładowanie nie jest unikalne dla Hyperspeed, nie przez długie ujęcie.
Ponieważ jest to jeden z najczęstszych sposobów przyspieszania witryny, wiele aplikacji obsługuje leniwe ładowanie.
Jest to po prostu na tyle istotne, że nazywam to korzyścią.
2.
Jedną z bardziej zaawansowanych opcji oferowanych przez Hyperspeed jest możliwość używaj responsywnych obrazów zamiast pełnowymiarowych obrazów na urządzeniach mobilnych.
Wyniki Mobile PageSpeed są najtrudniejsze i najtrudniejsze do optymalizacji, a biorąc pod uwagę indeksowanie z myślą o urządzeniach mobilnych aktualizacja, jest to ogromna funkcja.
Responsywny projekt jest wbudowany w Shopify.
Podczas skalowania okna elementy przesuwają się i zmieniają rozmiar, dzięki czemu witryna wygląda dobrze i zachowuje funkcjonalność na każdym poziomie.
Największym problemem są tutaj obrazy.
Gdy zwiększysz lub zmniejszysz rozmiar ekranu – zwykle w dół – witryna załaduje obraz w pełnym rozmiarze, a następnie przeskaluje go w dół.
Nie ma sensu ładowanie zdjęcia o szerokości 3000 pikseli na ekran o szerokości zaledwie 1290 pikseli.
Nawet zgnieciony obraz jest większy niż powinien być w tym scenariuszu.
Responsywny optymalizator obrazu pozwala Twojej witrynie ładować różne rozmiary zdjęć i ładować tylko zoptymalizowane obrazy na ekranie, na którym są wyświetlane.
To bardzo skuteczny sposób na przyspieszenie prędkości witryny mobilnej.
Domyślnie nie jest włączona, ale polecam ją włączyć.
Shopify jest świadomy responsywnych obrazów i był dodając wsparcie dla niego od 2017 roku, ale jest dostępny tylko w określonych motywach.
Hyperspeed umożliwia to – i automatycznie wykorzystuje – dla dowolnego motywu.
Super fajne, prawda?
3.
Innym doskonałym sposobem na zwiększenie szybkości witryny jest użycie zoptymalizowane czcionki.
Czcionki są na ogół dość małe, ale muszą istnieć lub być wywoływane z serwera innej firmy, co może powodować opóźnienia w Twojej witrynie.
Optymalizacja czcionek za pomocą Hyperspeed przyspiesza ładowanie stron, a kto może temu odmówić?
Jest też mnóstwo naprawdę fajnych poprawek i optymalizacji skryptów, które Hyperspeed wprowadza na stół.
4.
Masz zminimalizowanie skryptu.
Minifikacja usuwa zbędne spacje, komentarze i niepotrzebne błędy wynikające z pisania skryptów, które ludzie mogą przeczytać.
Wszystkie te rzeczy pomagają nam, programistom, w śledzeniu tego, co robimy, ale przeglądarki to nie obchodzi.
Więcej o minifikacji można przeczytać tutaj.
CSS, JavaScript i inne skrypty mogą być automatycznie minimalizowane przez Hyperspeed, aby kupić Ci większą prędkość poprzez zmniejszenie rozmiaru plików, które trzeba załadować.
To nie jest tona, ale kilka kb tu i tam się sumuje.
Istnieją jednak dwie korzystne funkcje skryptu, które w szczególności przywołuję.
5.
Pierwszym z nich jest ekstrakcja Critical CSS. Jedną z metryk używanych przez Google dla PageSpeed, jednego z podstawowych wskaźników internetowych, jest First Contentful Paint lub FCP.
FCP to czas, jaki upływa od wysłania żądania do serwera do rozpoczęcia renderowania pierwszych fragmentów treści w przeglądarce.
Jeśli kiedykolwiek załadowałeś witrynę Shopify i widziałeś, jak przez sekundę wyświetlała się ona na pustym, białym ekranie, zanim wszystko wskoczyło na swoje miejsce, oznacza to opóźnienie w FCP.
Hyperspeed identyfikuje elementy CSS, które muszą zostać wyrenderowane dla FCP, i nadaje im priorytety, umożliwiając późniejsze załadowanie innych, mniej krytycznych bitów CSS.
6.
Wywołuje się następną fajną funkcję skryptową Hyperspeed Optymalizacja JavaScriptu.
Analizuje kod witryny, identyfikuje każdy konkretny fragment kodu JavaScript i umożliwia indywidualne dostosowanie ładowania każdego skryptu.
Skrypty, które muszą zostać załadowane od razu, mogą być traktowane priorytetowo.
Inne dołączenia mogą być ładowane z opóźnieniem, ładowane asynchronicznie lub odroczone.
Konieczne jest dokładne przetestowanie zmian motywu przed wdrożeniem, aby upewnić się, że nie psujesz żadnych funkcji ani nie opóźniasz kodu, który nie powinien być opóźniany.
Ta precyzyjnie dostrojona kontrola jest wyjątkowo potężna i szczerze mówiąc, uważam ją za najważniejszą zaletę Hyperspeed.
Nigdzie indziej nie widziałem tych funkcji, a po skonfigurowaniu są bardzo cenne.
7.
Hiperszybkość również przyciąga dane na żywo z Google PageSpeed API na ich pulpicie nawigacyjnym, dzięki czemu możesz zobaczyć ostatnie rekordy szybkości witryny w miarę jej udoskonalania.
Nie jest to wielka funkcja, ale miło jest nie musieć ponownie testować witryny za każdym razem, gdy się zmienia, aby sprawdzić, czy działa.
Wady Hyperspeed dla Shopify
Wspomniałem powyżej, że chociaż uważam, że Hyperspeed jest najlepszą z wtyczek Shopify do zwiększania szybkości strony, nie jest idealna.
Muszę omówić kilka wad, jeśli są dla ciebie przeszkodą.
Nie dla mnie, ale ty możesz mieć inną sytuację.
Pierwszym minusem jest to, że chociaż bardzo dobrze radzi sobie z minimalizowaniem, odkładaniem i izolowaniem poszczególnych skryptów, CSS, obrazów i całej reszty, nie łapie plików .
Może i będzie tęsknić za niektórymi, i trudno przewidzieć, które z nich pominie i trudne do naprawienia ręcznie.
To ograniczenie oznacza, że czasami niektóre strony lub elementy nie ładują się szybciej, więc poszczególne strony działają wolniej niż reszta witryny.
To ograniczenie powoduje również irytujące błędy w PageSpeed Insights, które albo musisz naprawić, albo nauczyć się je ignorować.
W obronie aplikacji nie jest to ograniczenie Hyperspeed, ale sposób, w jaki niektóre aplikacje wprowadzają swój kod do Twojej witryny; niektóre JavaScript i obrazy można zoptymalizować, a inne nie.
Drugim poważnym minusem jest to działa, tworząc kopię wybranego motywu i modyfikując go.
Czasami oznacza to, że jeśli już próbujesz użyć niestandardowego motywu potomnego lub nietypowego motywu, może to nie działać poprawnie.
Może również powodować drobne problemy podczas aktualizacji motywu, głównie jeśli zmienia coś, co Hyperspeed musi działać i trzeba poczekać na aktualizację Hyperspeed.
Plusem jest to, że ułatwia to cofnięcie wszelkich zmian wprowadzonych przez Hyperspeed, jeśli zajdzie taka potrzeba.
Trzecia wada jest po prostu Cena.
Spośród wszystkich aplikacji Shopify do zwiększania szybkości strony, które wypróbowałem, ta jest jedną z droższych, za 39 USD miesięcznie.
To więcej, niż niektóre osoby wydają na subskrypcję Shopify! Oczywiście dla większości firm jest to drobna zmiana, ale wciąż się sumuje.
Nie ma darmowego planu, ale oferują 7-dniowy okres próbny, jeśli chcesz go wypróbować i zobaczyć, jak dobrze to działa, więc możesz zdecydować, czy warto.
Poza tymi trzema mankamentami nie mogę mu nic zarzucić.
Lubię Hyperspeed i myślę, że powinien on być dziś podstawowym elementem każdej dobrej witryny Shopify.
Galeria wstydu aplikacji Page Speed
Z każdej aplikacji do przyspieszania strony, którą wypróbowałem, większość z nich była w porządku, jeśli może trochę przeciętna.
Dwie jednak wyróżniały się jako najgorsze opcje.
Te dwa to:
- Wzmacniacz: optymalizator szybkości strony
- Swift — optymalizator szybkości strony
Te dwa są zasadniczo identyczne, a nawet mają ten sam język w niektórych częściach aplikacji i w aplikacji, do tego stopnia, że podejrzewałem, że stworzyła je ta sama firma.
Zastanawiam się, czy któryś z nich ma białą etykietę.
Jaki jest problem? Cóż, ich strony z aplikacjami obiecują ulepszenia prędkości, które można uzyskać i jak płynne jest ładowanie strony, ale kiedy je zainstalujesz, zgadnij co?
Oferuje tylko wstępne ładowanie linków; tak, ta rzecz, o której trochę narzekałem powyżej nie wpływa na czas ładowania strony. Użytkownicy mogą mieć nieco szybszą witrynę po początkowym załadowaniu, ale to początkowe ładowanie jest tym, za co wyszukiwarki oceniają Twoją witrynę.
Google używa szybkości strony jako wskaźnika rankingu, a wstępne ładowanie linków nie przynosi korzyści; wzrost SEO będzie zerowy.
Niefortunne w tych dwóch wtyczkach jest to, że dają ci to wyłączenie odpowiedzialności po tym, jak już zainstalowałeś aplikację i udzieliłeś im dostępu do swojej witryny.
Czuję się trochę oszukany.
Oto jak wygląda ten proces:
- Po pierwsze, aplikacja obiecuje przyspieszyć Twoją witrynę.
- Następnie decydujesz się zainstalować aplikację i udostępniasz swoje dane osobowe programiście.
- Na koniec aplikacja informuje, że w rzeczywistości nie przyspiesza witryny.
Dlaczego więc udostępniłem swoje dane osobowe deweloperowi?
Przynajmniej jest bezpłatny i zakładam, że pozytywne recenzje pochodzą od użytkowników, którzy nie przeprowadzali testów czasu ładowania przed i po.
Wciąż jednak pozostawiał kwaśny posmak w moich ustach.
Twoja kolej
Więc to jest moja rekomendacja.
Uzyskaj Hyperspeed, skonfiguruj go i ciesz się najlepszymi korzyściami związanymi z szybkością strony w Shopify.
Jestem pewien, że zanim doszedłem do tego wniosku, wypróbowałem każdą aplikację Shopify do zwiększania szybkości strony, ale mogłem coś przeoczyć.
Jeśli więc masz ulubiony optymalizator prędkości sklepu Shopify, daj mi o tym znać.
Z przyjemnością to sprawdzę, jeśli to jest to, czego nie widziałem (chyba że masz dla mnie alternatywę do sprawdzenia).
Lub, jeśli zdecydowałeś się użyć Hyperspeed i nie możesz uzyskać rezultatów, o których piję, daj mi znać, a ja mogę spróbować pomóc.
