Wydajność witryny może mieć ogromny wpływ na całe wrażenia użytkowników. Jeśli chcesz poprawić wydajność swojej witryny, na pewno znasz już PageSpeed Insights – narzędzie, które analizuje strony i udziela porad, jak przyspieszyć ich działanie, na podstawie sprawdzonych metod projektowania witryn na urządzenia mobilne i komputery.
Wyniki PageSpeed zależą od wielu czynników, w tym tego, jak dobrze zminimalizowano skrypty, zoptymalizowane obrazy, zawartość skompresowana gzip, elementy dotykowe mają odpowiedni rozmiar i unikniesz przekierowań na stronie docelowej.
40% użytkowników potencjalnie porzuca strony, których wczytywanie trwa dłużej niż 3 sekundy, dlatego dbanie o to, jak szybko strony wczytują się na urządzeniach użytkowników, staje się coraz ważniejszym elementem naszego procesu programowania.
Dane o wydajności w procesie kompilacji
Wielu deweloperów pyta, czy można uzyskać podobną ocenę wydajności w procesie tworzenia aplikacji, mimo że w narzędziu PageSpeed Insights ręcznie sprawdza się wyniki.
Odpowiedź brzmi: oczywiście.
Przedstawiamy PSI dla węzła
Dzisiaj z przyjemnością przedstawiamy PSI dla Node – nowy moduł, który doskonale współpracuje z Gulp, Grunt i innymi systemami kompilacji. Umożliwia połączenie z usługą PageSpeed Insights i wyświetla szczegółowy raport o wydajności Twojej witryny. Spójrzmy na podgląd dostępnych opcji raportowania:
Powyższe wyniki dają Ci pojęcie o możliwych ulepszeniach. Na przykład wartość 5,92 dla dopasowania rozmiaru treści do widocznego obszaru oznacza, że „niektóre” są nadal dostępne, a wartość 24 w celu zminimalizowania zasobów blokujących renderowanie może sugerować konieczność odroczenia wczytywania kodu JavaScript za pomocą atrybutu async.
Obniżenie bariery wejścia do narzędzia PageSpeed Insights
Jeśli korzystasz już z interfejsu PageSpeed Insights API lub używasz narzędzi, które na jego podstawie utworzyliśmy, prawdopodobnie trzeba było zarejestrować się w celu uzyskania dedykowanego klucza interfejsu API. Wiemy, że chociaż zajmuje to tylko kilka minut, ten proces może uniemożliwić Ci korzystanie ze statystyk w ramach codziennej pracy.
Z przyjemnością informujemy, że usługa PageSpeed Insights obsługuje wysyłanie żądań bez klucza interfejsu API maksymalnie do jednego żądania co 5 sekund (wiele dla każdego). W przypadku bardziej regularnych zastosowań lub poważnych kompilacji produkcyjnych zazwyczaj warto zarejestrować klucz.
Moduł PSI obsługuje zarówno opcję nokey, która pozwala skonfigurować ją w czasie krótszym niż kilka minut, jak i key (na nieco dłużej). Szczegółowe informacje o tym, jak zarejestrować klucz interfejsu API, znajdziesz w dokumentacji.
Pierwsze kroki
Dostępne są 2 opcje integracji PSI z przepływem pracy. Możesz je zintegrować z procesem kompilacji lub uruchomić jako narzędzie zainstalowane globalnie w systemie.
Proces kompilacji
Stosowanie PSI w procesie kompilacji Grunt lub Gulp jest dość proste. Jeśli pracujesz nad projektem Gulp, możesz zainstalować PSI i używać go bezpośrednio.
Zainstaluj
Zainstaluj PSI przy użyciu npm i przekaż --save-dev, aby zapisać go w pliku package.json.
npm install psi --save-dev
Następnie zdefiniuj dla niego zadanie Gulp w pliku gulpfile w ten sposób (omówione też w naszym przykładowym projekcie Gulp):
var psi = require('psi');
gulp.task('psi', function (cb) {
psi({
nokey: 'true', // or use key: ‘YOUR_API_KEY’
url: site,
strategy: 'mobile',
}, cb);
});
Aby uruchomić zadanie, użyj polecenia:
gulp psi
Jeśli używasz Grunta, możesz użyć narzędzia grunt-pagespeed, James Cryer, który teraz wykorzystuje PSI do raportowania.
Zainstaluj
npm install grunt-pagespeed --save-dev
Następnie wczytaj zadanie do pliku Gruntfile:
grunt.loadNpmTasks('grunt-pagespeed');
i skonfiguruj je do użytku:
pagespeed: {
options: {
nokey: true,
url: "https://www.html5rocks.com",
strategy: "mobile"
}
}
Możesz uruchomić zadanie za pomocą:
grunt pagespeed
Instalowanie jako narzędzie globalne
Możesz też zainstalować PSI jako narzędzie dostępne globalnie w swoim systemie. Ponownie możemy użyć npm do zainstalowania narzędzia:
$ npm install -g psi
W dowolnym oknie terminala możesz wysłać żądanie raportów PageSpeed Insights dla witryny (za pomocą opcji nokey lub interfejsu API specyficznego dla key, jak opisano poniżej):
psi http://www.html5rocks.com --nokey --strategy=mobile
lub dla użytkowników z zarejestrowanym kluczem interfejsu API:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
To wszystko.
Idź do przodu i spraw, by występy były częścią Twojej kultury
Musimy zastanowić się nad wpływem naszych projektów i wdrożeń na wrażenia użytkownika.
Rozwiązania takie jak PSI mogą monitorować wydajność w witrynach na komputerach i urządzeniach mobilnych. Są też przydatne, gdy są używane w ramach zwykłego przepływu pracy po wdrożeniu.
Chętnie poznamy Twoją opinię i mamy nadzieję, że PSI pomoże poprawić kulturę wydajności w Twoim zespole.