Grunt i Gulp, aby zoptymalizować wydajność

  1. Kompresja i optymalizacja obrazu
  2. Grunt
  3. Łyk
  4. Generowanie responsywnych obrazów dla elementu <picture>
  5. Grunt
  6. Modyfikacja obrazu SVG
  7. Grunt
  8. Grunt
  9. Zbuduj duszki SVG z obsługą różnych przeglądarek.
  10. Modyfikacja CSS
  11. Grunt
  12. Grunt
  13. CSS inline
  14. Grunt
  15. Grunt
  16. Grunt
  17. Osadzanie ścieżki krytycznej CSS
  18. Potok zasobów (automatyczne przetwarzanie wszystkich optymalizacji)
  19. Grunt
  20. Analiza porównawcza
  21. Optymalizacja ram

# Grunt- i Gulp-task, aby zoptymalizować wydajność

# 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.

Меню сайта
Мини-профиль
  • Регистрация Напомнить пароль?

    Бесплатно можно смотреть фильмы онлайн и не забудьте о шаблоны dle на нашем ресурсе фильмы бесплатно скачать c лучшего сайта
    Опросы
    Топ новости
    Инструкция: как включить подсветку клавиатуры на ноутбуке Asus


    Заблокировалась и отключилась встроенная клавиатура на ноутбуке: как снять блокировку и включить? 


    Ремонт ноутбука ASUS N75S в Санкт-Петербурге (СПб): замена дисплея, замена клавиатуры, ремонт корпуса Асус N75S, замена матрицы
    Услуга Стоимость, руб. Диагностика ASUS N75S Бесплатно (500р при необходимости разбора) Профилактические работы с системой охлаждения + замена кулера 2500 р * Замена чипа (видеочипа) ASUS N75S 6000-6500 Замена

    Как поменять клавиатуру на ноутбуке самостоятельно?
    Владельцы мастерских по ремонту компьютеров часто встречаются со случаями, когда приносят ноутбук, на который была пролита какая-либо жидкость. В некоторых случаях подобная ситуация означает, что понадобится

    Как правильно и быстро снять клавиши с клавиатуры ноутбука
    При продолжительной и тем более неаккуратной эксплуатации ноутбука часто образуются проблемы с клавишами. Они могут залипать, плохо нажиматься, а некоторые клавиши и вовсе могут сломаться. Для решения

    Как почистить клавиатуру компьютера
    С появлением компьютера человек все больше времени проводит за ним. Это и рабочий инструмент, и средство развлечения. Поэтому, совсем неудивительно, что определенные устройства, используемые для ввода

    Замена и ремонт клавиатуры для ноутбука, видео-инструкции
    Замена клавиатуры и кнопок ноутбука показано на видео с подробным объяснением процесса. Цена замены в сервисном центре от 200 рублей . Звоните по тел: +7 (812) 640-03-20 . Замена или ремонт

    4 способа, как отключить клавиатуру на ноутбуке
    Если у вас есть ноутбук, то клавиатура и тачпад на нем являются важными составляющими, без которых работа на устройстве будет вызывать сложности. Конечно есть альтернативы в виде клавиатур и мышей, которые

    Как правильно и быстро снять клавиши с клавиатуры ноутбука
    При продолжительной и тем более неаккуратной эксплуатации ноутбука часто образуются проблемы с клавишами. Они могут залипать, плохо нажиматься, а некоторые клавиши и вовсе могут сломаться. Для решения

    Как правильно и быстро снять клавиши с клавиатуры ноутбука
    При продолжительной и тем немало неаккуратной эксплуатации ноутбука часто образуются проблемы с клавишами. Они могут залипать, нехорошо нажиматься, а некоторые клавиши и вовсе могут сломаться. Для решения