Wydajność witryny może mieć ogromny wpływ na całe doświadczenie użytkownika. Jeśli ostatnio interesowało Cię przyspieszanie działania witryny, prawdopodobnie słyszałeś/słyszałaś o narzędzie PageSpeed Insights. Jest to narzędzie, które analizuje strony i podaje wskazówki, jak je przyspieszyć na podstawie sprawdzonych metod dotyczących wydajności witryn na urządzeniach mobilnych i komputerach.
Wyniki PageSpeed są oparte na kilku czynnikach, takich jak minimalizacja skryptów, optymalizacja obrazów, kompresja treści, odpowiedni rozmiar elementów dotykowych i uniknięcie przekierowań na stronie docelowej.
40% użytkowników rezygnuje ze stron, które wczytują się dłużej niż 3 sekundy, dlatego szybkość wczytywania stron na urządzeniach użytkowników staje się coraz ważniejszą częścią procesu programowania.
Dane o skuteczności w procesie kompilacji
Chociaż ręczne sprawdzanie wyników w PageSpeed Insights jest w porządku, wielu deweloperów pytało, czy można w procesie kompilacji uzyskać podobne wyniki dotyczące wydajności.
Odpowiedź brzmi: oczywiście.
Przedstawiamy PSI dla węzła
Z przyjemnością przedstawiamy PSI dla Node.js – nowy moduł, który świetnie współpracuje z Gulp, Grunt i innymi systemami kompilacji. Można go połączyć z usługą PageSpeed Insights, a także generować szczegółowy raport o wydajności witryny. Zobaczmy, jak wygląda podgląd tego typu raportu:
Wyniki te pozwalają poznać rodzaj ulepszeń, które można wprowadzić. Na przykład wynik 5,92 dla rozmiaru treści w widoku oznacza, że „coś” jeszcze można zrobić, a wynik 24 dla minimalizowania zasobów blokujących renderowanie może sugerować, że trzeba opóźnić wczytywanie JS za pomocą atrybutu async.
Obniżanie bariery wejścia do PageSpeed Insights
Jeśli korzystasz z interfejsu PageSpeed Insights od jakiegoś czasu lub próbujesz używać któregoś z naszych narzędzi opartych na tym interfejsie, prawdopodobnie musiałeś/musiłaś zarejestrować dedykowany klucz API. Wiemy, że chociaż zajmuje to tylko kilka minut, może to utrudniać korzystanie z narzędzia Statystyki w ramach codziennej pracy.
Z przyjemnością informujemy, że usługa PageSpeed Insights obsługuje żądania bez klucza API do 1 żądania co 5 sekund (wystarczająco dużo dla każdego). W przypadku częstszego używania lub poważnych kompilacji produkcyjnych warto zarejestrować klucz.
Moduł PSI obsługuje opcję nokey, która umożliwia jego skonfigurowanie w mniej niż kilka minut, oraz opcję key, która wymaga nieco więcej czasu. Szczegółowe informacje o tym, jak zarejestrować klucz interfejsu API, znajdziesz w dokumentacji.
Pierwsze kroki
PSI można zintegrować z przepływem pracy na 2 sposoby. Możesz go zintegrować z procesem kompilacji lub uruchomić jako globalnie zainstalowane narzędzie w systemie.
Proces kompilacji
Korzystanie z PSI w procesie kompilacji Grunt lub Gulp jest dość proste. Jeśli pracujesz nad projektem Gulp, możesz zainstalować i używać PSI bezpośrednio.
Zainstaluj
Zainstaluj PSI za pomocą npm i podaj parametr --save-dev, aby zapisać go w pliku package.json.
npm install psi --save-dev
Następnie zdefiniuj zadanie Gulp w pliku gulpfile w ten sposób (omówiliśmy je też w próbnym 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);
});
W przypadku powyższych zadań możesz wykonać zadanie, korzystając z:
gulp psi
Jeśli używasz Grunta, możesz skorzystać z poziomu grunt-pagespeed stworzonego przez Jamesa Cryera, który do generowania raportów wykorzystuje teraz PSI.
Zainstaluj
npm install grunt-pagespeed --save-dev
Następnie załaduj zadanie w pliku Gruntfile:
grunt.loadNpmTasks('grunt-pagespeed');
i skonfigurować go do użycia:
pagespeed: {
options: {
nokey: true,
url: "https://www.html5rocks.com",
strategy: "mobile"
}
}
Następnie możesz uruchomić zadanie, używając:
grunt pagespeed
Instalowanie jako narzędzia globalnego
Możesz też zainstalować PSI jako ogólnodostępne narzędzie w swoim systemie. Narzędzie zainstalujemy ponownie za pomocą npm:
$ npm install -g psi
W dowolnym oknie terminala możesz też poprosić o raporty PageSpeed Insights dotyczące witryny (z opcją nokey lub interfejsem API key w ten sposób:
psi http://www.html5rocks.com --nokey --strategy=mobile
lub jeśli masz zarejestrowany klucz interfejsu API:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
To wszystko.
Zadbaj o to, aby wyniki były częścią kultury Twojej firmy
Musimy zacząć bardziej zastanawiać się nad wpływem naszych projektów i wdrożeń na wrażenia użytkowników.
Rozwiązania takie jak PSI mogą monitorować wydajność witryny na komputerach i urządzeniach mobilnych. Są przydatne w ramach regularnego procesu po wdrożeniu.
Chętnie poznamy Twoją opinię i liczymy, że PSI pomoże poprawić kulturę pracy w Twoim zespole.