Automatyzacja pomiaru skuteczności witryny

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:

Ekran raportowania skuteczności

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.