/Front-End-Performance-Checklist

🎮 The only Front-End Performance Checklist that runs faster than the others - Checklista wydajności Frontendu!

MIT LicenseMIT


Front-End Performance Checklist

  Checklista wydajności Frontendu  

🎮 Jedyna checklista wydajności Frontend, która działa szybciej, niż inne.

Jedna prosta zasada: "Projektuj i koduj z wydajnością na uwadze"

      PRs Welcome         Discord           Licence MIT  

  Jak korzystać • Współtworzenie • Plan • Product Hunt

🇨🇳 🇫🇷 🇰🇷 🇵🇹 🇷🇺 🇵🇱

Inne checklisty:
🗂 Front-End Checklist • 💎 Front-End Design Checklist

Spis treści

  1. HTML
  2. CSS
  3. Czcionki
  4. Obrazy
  5. JavaScript
  6. Serwer (w trakcie)
  7. Frameworki JS (w trakcie)

Wprowadzenie

Wydajność jest sporym tematem, ale nie zawsze jest to tylko temat "backendu" lub "admina": to także odpowiedzialność frontendu. Lista kontrolna wydajności frontendu to wyczerpująca lista elementów, które powinieneś sprawdzić, a przynajmniej być jej świadomym, jako programista frontend i stosować to w swoim projekcie (osobistym i zawodowym).

Jak korzystać?

Dla każdej zasady będzie akapit wyjaśniający dlaczego ta zasada jest ważna i jak możesz to naprawić. Aby uzyskać więcej szczegółowych informacji, należy znaleźć linki, które będą wskazywać 🛠 narzędzia, 📖 artykuły lub 📹 media które mogą wypełnić listę kontrolną.

Wszystkie elementy w Checklista wyjdajności Frontend są niezbędne, aby osiągnąć najwyższy wynik wydajności, ale można znaleźć też wskaźnik, który pomoże w ustaleniu priorytetów niektórych zasad w stosunku do innych. Istnieją 3 poziomy priorytetu:

  • Low oznacza, że element ma niski priorytet.
  • Medium oznacza, że element ma średni priorytet. Nie powinieneś unikać zajmowania się tą kwestią.
  • High oznacza, że element ma wysoki priorytet. Nie można uniknąć przestrzegania tej zasady i wprowadzenia zalecanych poprawek.

Narzędzia wydajności

Lista narzędzi, których możesz użyć do testowania lub monitorowania swojej witryny lub aplikacji:

Odnośniki

HTML

html

  • Zminifikowany HTML: medium Kod HTML jest minifikowany, komentarze, białe znaki i nowe wiersze są usuwane z plików produkcyjnych.

    Czemu:

    Usunięcie wszystkich niepotrzebnych spacji, komentarzy i atrybutów zmniejszy rozmiar kodu HTML i przyspieszy czas wczytywania strony w witrynie oraz oczywiście zmniejszy pobieranie pliku dla użytkownika.

    Jak:

    Większość frameworków ma wtyczki ułatwiające minifikację stron internetowych. Możesz użyć zestawu modułów NPM, które mogą wykonać zadanie automatycznie.

  • Umieść tagi CSS zawsze przed tagami JavaScript: high Upewnij się, że twój CSS jest zawsze ładowany przed kodem JavaScript.

    <!-- Not recommended -->
<script src="jquery.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css"/>

<!-- Recommended -->
<link rel="stylesheet" href="foo.css"/>
<script src="jquery.js"></script>
<script src="foo.js"></script>

    Czemu:

    Posiadanie tagów CSS przed JavaScriptem umożliwia lepsze równoległe pobieranie, co przyspiesza czas renderowania w przeglądarce.

    Jak:

    ⁃ Upewnij się, że <link> i <style> w twoim <head> są zawsze przed twoim <script>.

  • Zminimalizuj liczbę iframes: high Używaj iframe tylko wtedy, gdy nie masz innych technicznych możliwości. Staraj się unikać iframe tak bardzo, jak potrafisz.

  • Optymalizacja wstępnego ładowania z pobieraniem wstępnym, dns-prefetch i prerender: low Popularne przeglądarki mogą korzystać z dyrektywy tagu <link> i atrybutu "rel" z niektórymi słowami kluczowymi, aby wstępnie załadować określone adresy URL.

    Czemu:

    Pobieranie wstępne umożliwia przeglądarce ciche pobieranie niezbędnych zasobów potrzebnych do wyświetlenia treści, do których użytkownik może uzyskać dostęp w najbliższej przyszłości. Przeglądarka jest w stanie przechowywać te zasoby w pamięci podręcznej i przyspieszyć ładowanie stron internetowych, gdy używają różnych domen do zasobów strony. Po zakończeniu ładowania strony internetowej i upłynięciu czasu bezczynności przeglądarka rozpoczyna pobieranie innych zasobów. Gdy użytkownik przejdzie do określonego linku (już wstępnie pobranego), treść zostanie natychmiast wyświetlona.

    Jak:

    ⁃ Upewnij się, że <link> w twojej sekcji <head>.

⬆ powrót do góry

CSS

css

  • Minifikacja: high Wszystkie pliki CSS są minifikowane, komentarze, białe znaki i nowe wiersze są usuwane z plików produkcyjnych.

    Czemu:

    Po zminifikowaniu plików CSS zawartość ładuje się szybciej i do klienta wysyłanych jest mniej danych. Ważne jest, aby zawsze minifikować pliki CSS podczas produkcji. Jest to korzystne dla użytkownika, podobnie jak dla każdej firmy, która chce obniżyć koszty przepustowości i zmniejszyć zużycie zasobów.

    Jak:

    ⁃ Użyj narzędzi, aby zminifikować pliki automatycznie przed kompilacją lub wdrożeniem lub w jej trakcie.

  • Konkatenacja: medium Pliki CSS są łączone w jednym pliku (nie zawsze dotyczy HTTP/2).

    <!-- Niezalecane -->
<link rel="stylesheet" href="foo.css"/>
<link rel="stylesheet" href="bar.css"/>

<!-- Zalecane -->
<link rel="stylesheet" href="foobar.css"/>

    Czemu:

    Jeśli nadal używasz protokołu HTTP/1, może być konieczne połączenie plików, mniej prawdopodobne jest, jeśli serwer używa protokołu HTTP/2 (należy wykonać testy).

    Jak:

    ⁃ Użyj narzędzia online lub dowolnej wtyczki przed kompilacją plików lub podczas kompilacji lub wdrożenia, aby połączyć twoje pliki.
    ⁃ Upewnij się oczywiście, że konkatenacja nie psuje twojego projektu.

  • Nieblokujące: high Pliki CSS muszą być nieblokujące, aby nie dopuścić do poświęcenia czasu przez DOM.

    <link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>

    Czemu:

    Pliki CSS mogą blokować ładowanie strony i opóźniać jej renderowanie. Za pomocą preload można załadować aktualne pliki CSS, zanim przeglądarka zacznie wyświetlać zawartość strony.

    Jak:

    ⁃ Musisz dodać atrybut rel z wartością preload i dodać as="style" w elemencie <link>.

  • Nieużywany CSS: medium Usuń nieużywane selektory CSS.

    Czemu:

    Usunięcie nieużywanych selektorów CSS może zmniejszyć rozmiar plików, a następnie przyspieszyć ładowanie zasobów.

    Jak:

    ⁃ ⚠️ Zawsze sprawdź, czy we frameworku CSS, którego chcesz użyć, nie ma jeszcze kodu resetowania / normalizacji. Czasami możesz nie potrzebować wszystkiego, co znajduje się w pliku resetowania / normalizacji.

  • Osadzony lub wbudowany CSS: high Unikaj używania wbudowanego lub osadzonego CSS wewnątrz swojego <body> (Nie dotyczy HTTP/2)

    Czemu:

    Jednym z pierwszych powodów jest to, że jest to dobra praktyka, aby oddzielić treść od projektu. Pomaga także w utrzymaniu kodu, który jest łatwiejszy w utrzymaniu i zapewnia dostęp do witryny. Ale jeśli chodzi o wydajność, to po prostu dlatego, że zmniejsza rozmiar pliku stron HTML i czas ładowania.

    Jak:

    Zawsze używaj zewnętrznych arkuszy stylów lub osadzaj CSS w swoim <head> (i postępuj zgodnie z innymi zasadami wydajności CSS)

  • Analizuj złożoność arkuszy stylów: high Analiza arkuszy stylów może pomóc w oznaczaniu problemów, redundancji i duplikowaniu selektorów CSS.

    Czemu:

    Czasami możesz mieć nadmiarowości lub błędy sprawdzania poprawności w swoim CSS, analiza plików CSS i usunięcie tych złożoności może pomóc ci przyspieszyć pliki CSS (ponieważ twoja przeglądarka będzie je szybciej czytać)

    Jak:

    Twój CSS powinien być zorganizowany, używanie preprocesora CSS może ci w tym pomóc. Niektóre narzędzia online wymienione poniżej mogą również pomóc w analizie i poprawieniu kodu.

⬆ powrót do góry

Czcionki

fonts

  • Zapobiegaj Flashowi lub niewidocznemu tekstowi: medium Unikaj przezroczystego tekstu, dopóki Webfont jest ładowany

⬆ powrót do góry

Obrazy

images

  • Użyj obrazu wektorowego vs rastra/bitmapy: medium Preferuj używanie obrazu wektorowego zamiast obrazów bitmapowych (jeśli to możliwe).

    Czemu:

    Obrazy wektorowe (SVG) są zwykle mniejsze niż obrazy, a pliki SVG są responsywne i idealnie skalowane. Te obrazy mogą być animowane i modyfikowane przez CSS.

⬆ powrót do góry

JavaScript

javascript

  • Minifikacja JS: high Wszystkie pliki JavaScript są pomniejszone, komentarze, białe znaki i nowe wiersze są usuwane z plików produkcyjnych (nadal ważne, używając HTTP/2).

    Czemu:

    Usunięcie wszystkich niepotrzebnych spacji, komentarzy i podziałów zmniejszy rozmiar plików JavaScript i przyspieszy czas wczytywania strony w twojej witrynie i oczywiście zmniejszy pobieranie pliku dla użytkownika.

    Jak:

    ⁃ Skorzystaj z sugerowanych poniżej narzędzi, aby automatycznie zminimalizować pliki przed kompilacją lub wdrożeniem lub w jej trakcie.

  • Brak JavaScript w środku: medium (Dotyczy tylko witryny internetowej) Unikaj osadzania wielu kodów JavaScript w środku ciała (body). Zgrupuj kod JavaScript w plikach zewnętrznych lub ewentualnie w <head> lub na końcu strony (przed </body>).

    Czemu:

    Umieszczanie kodu JavaScript osadzonego bezpośrednio w twoim <body> może spowolnić twoją stronę, ponieważ ładuje się podczas budowania DOM. Najlepszą opcją jest użycie plików zewnętrznych z async lub defer aby uniknąć blokowania DOM. Inną opcją jest umieszczenie niektórych skryptów w twoim <head>. Przez większość czasu kod analityczny lub mały skrypt, który należy załadować, zanim DOM przejdzie do głównego przetwarzania.

    Jak:

    Upewnij się, że wszystkie twoje pliki są ładowane przy użyciu async lub defer i mądrze zdecyduj, jaki kod będziesz musiał wprowadzić w <head>.

  • Nieblokujący JavaScript: high Pliki JavaScript są ładowane asynchronicznie za pomocą async lub odroczone za pomocą atrybutu defer.

    <!-- Atrybut Defer -->
<script defer src="foo.js"></script>

<!-- Atrybut Async  -->
<script async src="foo.js"></script>

    Czemu:

    JavaScript blokuje normalne parsowanie dokumentu HTML, więc gdy parser osiągnie znacznik <script> (szczególnie znajduje się w <head>), przestaje go pobierać i uruchamiać. Dodanie async lub defer jest wysoce zalecane, jeśli twoje skrypty są umieszczone na górze strony, ale mniej wartościowe, jeśli są tuż przed tagiem </body>. Ale dobrą praktyką jest zawsze używanie tych atrybutów, aby uniknąć problemów z wydajnością.

    Jak:

    ⁃ Dodaj async (jeśli skrypt nie opiera się na innych skryptach) lub defer (jeśli skrypt opiera się na skrypcie asynchronicznym lub na nim polegał) jako atrybut tagu skryptu.
    ⁃ Jeśli masz małe skrypty, możesz użyć wbudowanego skryptu zamiast skryptów asynchronicznych.

  • Zoptymalizowane i zaktualizowane biblioteki JS: medium Wszystkie biblioteki JavaScript używane w twoim projekcie są konieczne (preferowana Vanilla JavaScript dla prostych funkcjonalności), zaktualizowane do najnowszej wersji i nie przytłaczają JavaScript niepotrzebnymi metodami.

    Czemu:

    W większości przypadków nowe wersje są dostarczane z optymalizacją i poprawką bezpieczeństwa. Powinieneś użyć najbardziej zoptymalizowanego kodu, aby przyspieszyć swój projekt i upewnić się, że nie spowolnisz swojej witryny lub aplikacji bez przestarzałej wtyczki.

    Jak:

    Jeśli twój projekt używa pakietów NPM, npm-check jest całkiem interesującą biblioteką do upgrade'u / aktualizacji bibliotek. Greenkeeper może automatycznie szukać zależności i sugerować aktualizację za każdym razem, gdy wychodzi nowa wersja.

⬆ powrót do góry

Serwer

server-side

  • Twoja strona korzysta z HTTPS: high

    Czemu:

    HTTPS jest przeznaczony nie tylko dla witryn e-commerce, ale dla wszystkich witryn, które wymieniają dane. Dane udostępniane przez użytkownika lub dane udostępniane podmiotowi zewnętrznemu. Współczesne przeglądarki ograniczają funkcjonalność witryn, które nie są bezpieczne. Na przykład: geolokalizacja, powiadomienia wypychane i pracownicy usług nie działają, jeśli Twoja instancja nie używa HTTPS. A dzisiaj łatwiej jest skonfigurować projekt z certyfikatem SSL niż wcześniej (i za darmo dzięki Let's Encrypt).

  • Minimalizowanie żądań HTTP: high Zawsze upewnij się, że każdy zażądany plik jest niezbędny dla twojej witryny lub aplikacji.
  • Użyj CDN, aby dostarczyć swoje assety: medium Skorzystaj z CDN, aby szybciej dostarczać treści na cały świat.

  • Serwuj pliki z tego samego protokołu: high Unikaj wyświetlania w witrynie plików pochodzących ze źródła za pomocą protokołu HTTP w witrynie, która używa na przykład HTTPS. Jeśli witryna korzysta z HTTPS, pliki zewnętrzne powinny pochodzić z tego samego protokołu.

  • Podaj pliki osiągalne: high Unikaj żądania plików nieosiągalnych (404).

  • Ustaw poprawnie nagłówki pamięci podręcznej HTTP: high Ustaw nagłówki HTTP, aby uniknąć kosztownej liczby zwrotów między przeglądarką, a serwerem.
  • Kompresja GZIP / Brotli jest włączona: high Użyj metody kompresji, takiej jak Gzip lub Brotli, aby zmniejszyć rozmiar plików JavaScript. Dzięki plikowi o mniejszych rozmiarach użytkownicy będą mogli szybciej pobierać zasób, co poprawi wydajność.

⬆ powrót do góry

Wydajność i frameworki JS

Angular

React

Vue

Wydajność oraz CMS

WordPress

Artykuły

Zalecane wtyczki

Tłumaczenia

Checklista wydajności frontend chce być dostępna również w innych językach! Nie wahaj się przesłać swojego wkładu!

Współtworzenie

Otwórz issue lub stwórz pull request, aby zasugerować zmiany lub uzupełnienia.

Wsparcie

Jeśli masz jakieś pytania lub sugestie, nie wahaj się skorzystać z Discord lub Twittera:

Autor

Stworzone z ❤️ od David Dias

Współtwórcy

Ten projekt istnieje dzięki wszystkim ludziom, którzy wnoszą swój wkład. [Współtworzenie].

Backers

Podziękowania dla wszystkich naszych backers! 🙏 [Zostań backer]

Sponsorzy

Wesprzyj ten projekt, zostając sponsorem. Twoje logo pojawi się tutaj wraz z linkiem do Twojej witryny. [Zostań sponsorem]

Licencja

MIT

Wszystkie ikony są dostarczane przez Icons8

⬆ powrót do góry

Stworzone przez: @thedaviddias polska wersja od @mbiesiad