- Kompresja i optymalizacja obrazu
- Grunt
- Łyk
- Generowanie responsywnych obrazów dla elementu <picture>
- Grunt
- Modyfikacja obrazu SVG
- Grunt
- Grunt
- Zbuduj duszki SVG z obsługą różnych przeglądarek.
- Modyfikacja CSS
- Grunt
- Grunt
- CSS inline
- Grunt
- Grunt
- Grunt
- Osadzanie ścieżki krytycznej CSS
- Potok zasobów (automatyczne przetwarzanie wszystkich optymalizacji)
- Grunt
- Analiza porównawcza
- Optymalizacja ram
# Grunt- i Gulp-task, aby zoptymalizować wydajność
Zmniejszenie wydajności może mieć wpływ zaangażowanie użytkowników z ich uczuć interakcje ze stroną i tym wydajność . Na szczęście zespół projektu Make The Web Faster z Google zaoferował wybór najlepszych praktyka aby Twoje strony były lekkie, szybkie i atrakcyjne. Obejmują one zmniejszanie zasobów, takich jak CSS i JavaScript, optymalizację obrazów, osadzanie CSS w znacznikach, usuwanie nieużywanych stylów itp.
Jeśli masz pełny dostęp do swojego serwera, doskonałą opcją byłoby użycie moduł PageSpeed dla Apache i Nginx z filtrami do wielu z tych zadań. Jeśli jednak nie ma dostępu lub rozumiesz, że moduł nie będzie wystarczający, jest wystarczająco dużo wtyczek dla systemów kompilacji, których użycie pozwoli na uzupełnienie luk dokładniejszą kontrolą wydajności.
Poniżej Grunt- i Łyk wtyczki, które zespół Yeoman regularnie wykorzystuje w swoich projektach. Próbowaliśmy skupić się na tej liście i wyeliminować wcześniejsze zalecenia, które nie mają tak dużej wartości, ale to, co tutaj przedstawiono, jest wystarczające, aby pomóc w utrzymaniu możliwie najmniejszych rozmiarów stron i ich zasobów.
Uwaga: Generator aplikacji internetowej dla Grunt i Łyk od zespołu Yeoman zawiera już wtyczki do optymalizacji obrazu, konkatenacji i minifikacji HTML / CSS / JS. Uznajemy webapp za doskonałą podstawę, a ten artykuł obejmuje wtyczki, które wykraczają poza te procesy.
Kompresja i optymalizacja obrazu
Średnia strona internetowa zajmuje teraz nieco więcej. 1,5 MB , w tym obrazy, które stanowią większość tego tomu. Staramy się, aby rozmiar naszych zdjęć był jak najmniejszy, aby skrócić czas oczekiwania na załadowanie.
Dzięki odpowiedniej równowadze kompresji i formatu możliwe jest przesyłanie obrazów swojej strony tak szybko, jak to możliwe. Jest to bardzo ważne dla użytkowników urządzeń mobilnych z ograniczonymi planami taryfowymi lub wolnym połączeniem.
Grunt
Dlaczego dwie wtyczki? Ok, masz to. analiza różnice między nimi. Możesz wybrać najbardziej odpowiedni dla siebie.
Łyk
W czasie pisania tego tekstu nie było wtyczki do Gulpa, która używa ImageOptim.
Uwaga: chłopaki z Etsy dowiedzieli się o tym dodaniu po prostu 160 KB obrazów na swoich stronach zwiększa awarię użytkowników mobilnych o 12%. Jeśli nie możesz zmniejszyć liczby obrazów na stronach, przynajmniej zoptymalizuj je.
Generowanie responsywnych obrazów dla elementu <picture>
Jeśli masz witrynę RWD, która dostosowuje się do różnych urządzeń, możesz także tworzyć responsywne i obrazy.
Zwracanie niepotrzebnie dużych obrazów do przeglądarki może wpływać na temat wydajności ładowania i wyświetlania strony, i nie są to jedyne cechy, które mogą na tym ucierpieć.
Jest to jeden z powodów, dla których musimy korzystać z responsywnych obrazów iw tym względzie z przyjemnością witamy srcset - Mamy nadzieję, że doprowadzi to do pełnej implementacji elementu <picture>.
Istnieje kilka wtyczek Grunt, które pomagają generować wiele obrazów o różnych rozdzielczościach w ramach procesu tworzenia projektu.
Grunt
Ponadto, jeśli potrzebujesz zmienić rozmiar dużych obrazów, możesz użyć grunt-image-resize .
Uwaga: badania Tima Kadleka w dziedzinie responsywnych obrazów doprowadziło do wniosku To, że ich użycie może doprowadzić do oszczędności do 72% na rozmiar obrazu. Pomimo faktu, że jest jeszcze zbyt wcześnie, aby dokonać wyboru na rzecz responsywności, BBC i Guardian używają Imager.js jako rozwiązania dla różnych przeglądarek.
Modyfikacja obrazu SVG
Pliki SVG tworzone w edytorach zazwyczaj zawierają dużą ilość zbędnych informacji (metadane, komentarze, ukryte elementy itp.). Wszystko to można całkowicie nieszkodliwie usunąć lub przekształcić w bardziej zwartą reprezentację bez wpływu na renderowanie.
Grunt
Łyk
Generowanie Sprite'a
Grunt
Łyk
Konwertuj obrazy na WebP
WebP to nowoczesny format obrazu, który oferuje kompresję obrazu w Internecie, ze stratą lub bez. Obrazy WebP z bezstratną kompresją są 26% mniejsze niż PNG i 25-34% mniej kompresji ze stratami niż JPEG. Jest to dość ekonomiczne i na szczęście istnieją wtyczki do kodowania Grunt i Gulp dla WebP.
Grunt
Łyk
Uwaga: Test WebPageTest mówi, że w porównaniu z JPEG obrazy WebP są ładowane znacznie szybciej ze względu na ich mały rozmiar. W Chrome Web Store dowiedziałem się Wykorzystanie WebP dało średnio 30% oszczędności, co pozwala zaoszczędzić kilka terabajtów ruchu dziennie.
Zbuduj duszki SVG z obsługą różnych przeglądarek.
Grunt
Łyk
Uważamy, że osadzanie obrazów przy użyciu identyfikatora URI danych stało się obecnie anty-wzorcem słaba wydajność na urządzeniach mobilnych.
Modyfikacja CSS
Minifikacja eliminuje niepotrzebne przestrzenie, podziały wierszy, wypełnienia i znaki, które zwykle nie są potrzebne w wersji wydania produktu. Kompresowanie plików HTML, CSS i JS może poprawić czas analizowania, wykonywania i ładowania. Jeśli chodzi o CSS, zalecamy:
Grunt
Łyk
Usuń nieużywany CSS
W projektach opartych na strukturach CSS, takich jak Bootstrap, Foundation itp. zazwyczaj nie używasz wszystkich dostępnych stylów. Zamiast włączać całe ramy w wydaniu, użyj UnCSS, aby usunąć nieużywane style ze stron. Dlatego niektórzy programiści sprawiają, że ich arkusze stylów są łatwe do 85% ich oryginalnego rozmiaru.
Grunt
Łyk
Uwaga: Najczęściej zadawane przez deweloperów pytanie o UnCSS lub proces usuwania nieużywanego CSS dotyczy tego, czy może on również działać ze stylami, które są dynamicznie osadzone na stronie. Nasza odpowiedź brzmi tak. Jest to możliwe dzięki temu, że UnCSS działa w tandemie z PhantomJS. Deweloperzy pochodzą z 10 do 120 Kb zapisywanie na typowej stronie Bootstrap, a UnCSS działa równie dobrze z innymi frameworkami.
CSS inline
Jeśli zewnętrzne zasoby CSS dla określonej strony są małe, możesz osadzić je w znacznikach, oszczędzając na dodatkowych żądaniach wysyłanych do serwera. Osadzenie niewielkiej ilości CSS pozwala przeglądarce natychmiast rozpocząć renderowanie strony.
Grunt
Łyk
Łączenie wyrażeń mediów
Chociaż nie jest to zalecenie zespołu PageSpeed, można łączyć wyrażenia multimedialne w pojedyncze definicje. Znaleźliśmy te wtyczki przydatne do przetwarzania CSS generowanego przez preprocesory, które mogą używać zagnieżdżonych definicji zapytań o media.
Grunt
Łyk
Javascript
Minifikacja, kompresja JS
Grunt
Łyk
RequireJS (optymalizacja za pomocą r.js)
Grunt
Łyk
Minifikacja HTML
Grunt
Łyk
Prosta konkatenacja
Grunt
Łyk
Ogólna kompresja plików / folderów
Grunt
Łyk
Kompresja Zopfli
Algorytm kompresji Zopfli to biblioteka kompresji typu open source, która generuje o 3-8% mniej danych wyjściowych w porównaniu z zlib przy maksymalnym poziomie kompresji. Najlepiej nadaje się do aplikacji, w których dane są kompresowane tylko raz, a następnie przesyłane przez sieć wiele razy.
Grunt
Łyk
Uwaga: Gdy Google Fonts zaczęło używać Zopfli, czcionki stały się średnio łatwiejsze o 6%, aw niektórych przypadkach o 15%. Według Ilya Grigorik , dla Open Sans, zmniejszenie rozmiaru było o ponad 10%, co wpłynęło na zmniejszenie czasu na rysowanie i ładowanie. Jednak obrazy skompresowane za pomocą Zofli są dekodowane dłużej niż zwykłe pliki JPG. Wskaźniki te można wykorzystać do podjęcia decyzji, czy korzystać z WebP.
Osadzanie ścieżki krytycznej CSS
Ścieżka krytyczna to kod i zasoby potrzebne do renderowania zawartości znajdującej się na górze strony (w przybliżeniu Lane: dosłownie „ponad foldem” - aż do złożenia, czyli ekranu pierwszej strony ) - czyli Twoi użytkownicy zobaczą przede wszystkim, kiedy zaczną ładować stronę. PageSpeed zaleca osadzanie niezbędnych stylów w celu zwiększenia wydajności. Podczas gdy narzędzia takie jak mod_pagespeed Bardzo wydajna, aby to osiągnąć, optymalizacja niezbędnych stylów za pomocą innych narzędzi jest znacznie trudniejsza.
Możesz używać PhantomJS ze skryptami. raport prędkości aby dowiedzieć się, które style są odpowiedzialne za górną część strony, a następnie ręcznie je zoptymalizować.
Uwaga: Paul Kinlan napisał bookmarklet aby ocenić style górnej części strony, które również warto zobaczyć.
Potok zasobów (automatyczne przetwarzanie wszystkich optymalizacji)
Jedno narzędzie, na które warto zwrócić uwagę Grafika zasobów .
AssetGraph patrzy na projekty jako zestaw zadań na wykresach, gdzie węzły są zasobami (HTML, CSS, obrazy, JS), a krawędzie są relacjami między nimi (tagi img, a, skrypt itp.).
Jeśli AssetGraph określa, w jaki sposób zestawy zasobów są powiązane ze sobą, może automatycznie wykonywać większość optymalizacji wydajności. Działa to w szczególności w przypadku małych projektów i obecnie pracuje nad wsparciem dla dużych projektów.
Grunt
Łyk
Użytkownicy Gulp powinni używać AssetGraph bezpośrednio.
Analiza porównawcza
Poniższe wtyczki testowe są przydatne do wykorzystania w ramach wdrażania podejścia Ciągłej integracji. Chociaż są one obecnie dostępne tylko dla Grunt, możesz użyć chrząknięcie uruchomić Grunt Task przez Gulp. Zalecamy:
grunt-stronicowanie - Doskonałe do automatycznego określania punktów PageSpeed w ramach ciągłej integracji.
grunt-telemetria płaszczowa - uzyskiwanie gładkości, czasu pobierania i innych statystyk z Telemetrii, w ramach ciągłego procesu integracji. Może to pomóc w skonfigurowaniu panelu testowania wydajności podobnego do tego, w którym jest używany Lakier nawierzchniowy .
grunt-wpt - ciągła integracja z okularami WebPageTest.
gruntowe fantomy - czas odpowiedzi na żądania, odpowiedzi, czas ładowania pierwszego obrazu / CSS / JS, czas zdarzenia gotowości DOM i inne.
Optymalizacja ram
Grunt
Łyk
Misch
Wniosek
Zmniejszona wydajność może wpłynąć na zaangażowanie użytkownika i jego doświadczenie w interakcji z zasobem. Poświęć trochę czasu na eksperymentowanie z wtyczkami, aby zoptymalizować wydajność - dowiedz się, jakie praktyczne korzyści mogą dać twoim projektom.
Odwiedzający Twoje strony będą szczęśliwsi dzięki natychmiastowej reakcji, a szybka sieć jest lepsza dla wszystkich.