ten przewodnik został stworzony przez Davida Ferna, Social Security Administration

użycie JavaScript, użycie CSS, rozmiar obrazów i zasobów, buforowanie/użycie sieci i wyskakujące okienka. Są to najlepsze praktyki, na których powinny skupić się najczęściej odwiedzane strony rządowe, aby były bardziej przyjazne dla urządzeń mobilnych. Ale w jaki sposób możesz pracować nad każdym z tych obszarów, aby zapewnić, że Twoja witryna będzie zachwycona i wraca do użytkowników mobilnych?

przez sześć miesięcy, od 22 września 2017 r.do 22 marca 2018 r., federalny program testów mobilnych Crowdsource testował 26 stron internetowych rządu federalnego, które są najczęściej odwiedzane na urządzeniach mobilnych (smartfonach i tabletach) przy użyciu siedmiu przyjaznych dla urządzeń mobilnych zautomatyzowanych narzędzi testowych. Wyniki wskazują, że były to wspólne praktyki, które sprawiają, że witryny te nie są tak przyjazne dla urządzeń mobilnych, jak użytkownik może oczekiwać lub chcieć w mobilnym środowisku. Większość z tych obszarów nie odnosi się bezpośrednio do kwestii użyteczności, ale dotyczy sposobu budowy witryny (co może prowadzić do słabej wydajności). Więcej informacji o tym, jak przeprowadziliśmy testy, znajdziesz w sekcji Metodologia na końcu.

informacje TUTAJ przedstawiają pięć najlepszych praktyk, które znaleźliśmy w tych witrynach:

  1. zoptymalizuj JavaScript
  • umieszczenie JavaScript
  • JavaScript Minify
  • nie używaj wbudowanego JavaScript
  • Optymalizuj CSS
    • unikaj wymiarów bezwzględnych i pozycji w dyrektywach CSS
    • użyj zewnętrznych arkuszy stylów, aby oddzielić buforowanie CSS od zawartości
    • Połącz zasoby obrazu CSS w pliki Sprite
    • >

  • zoptymalizuj obrazy
    • Ogranicz rozmiar i wagę strony
    • Włącz kompresję zasobów
    • zoptymalizuj obrazy
    • określ wymiary obrazu
  • wykorzystaj buforowanie
    • wykorzystaj buforowanie przeglądarki
    • Połącz wiele plików, aby zwiększyć wydajność
  • unikaj wyskakujących okienek
  • pamiętaj, że jeśli strona internetowa jest tworzona przy użyciu systemu zarządzania treścią (CMS) lub ramy programistycznej, nie wszystkie te ustawienia mogą być konfigurowalne. Sugerujemy jednak, aby Programiści zbadali możliwości systemu, aby ustalić,czy mogą być. Niektóre z tych zaleceń mogą występować w warstwie serwera www, która może być oddzielona od kodu programu.

    Optymalizacja JavaScript

    najczęstszym problemem jest użycie JavaScript. JavaScript jest używany w wielu aplikacjach desktopowych i mobilnych, ponieważ rozszerza funkcjonalność stron internetowych, jest stosunkowo łatwym językiem do nauczenia się i używania oraz stosunkowo szybko wykonuje się po stronie klienta. Jeśli jednak JavaScript nie zostanie umieszczony i wykonany z optymalnego miejsca w kodzie, nie zostanie zminimalizowany ani użyty w wierszu, może to negatywnie wpłynąć na wydajność aplikacji na urządzeniach mobilnych, które tradycyjnie mają minimalne zasoby.

    umieszczenie JavaScript

    problem – grupowanie JavaScript na końcu znaczników strony jest optymalne dla obciążenia strony. Gdy specyfikacja HTTP umieszcza JavaScript w innym miejscu na stronie (np. u góry), może to spowodować zablokowanie ładowania podczas pobierania plików JavaScript. Dodatkowo, zanim przeglądarka będzie mogła renderować stronę, musi zbudować drzewo DOM poprzez parsowanie znaczników HTML. Za każdym razem, gdy parser napotka skrypt, zatrzymuje się i wykonuje skrypt, zanim będzie kontynuował parsowanie. Spowalnia to wydajność ładowania strony.

    rozwiązanie-umieść skrypty w znaczniku <head> i użyj atrybutów async lub defer, co pozwala na pobranie skryptów jak najszybciej bez blokowania przeglądarki.

    Skrypty z atrybutem async są wykonywane asynchronicznie. Oznacza to, że skrypt jest wykonywany natychmiast po jego pobraniu—bez blokowania przeglądarki w międzyczasie—i że drugi skrypt może być pobrany i wykonany przed pierwszym skryptem.

    Skrypty z atrybutem defer są wykonywane w kolejności (tzn. najpierw skrypt jeden, potem skrypt drugi). To również nie blokuje przeglądarki. W przeciwieństwie do skryptów async, Skrypty defer są wykonywane tylko po załadowaniu całego dokumentu.

    • Fixit-umieszczenie JavaScript| https://mobiforge.com/design-development/fixit-javascript-placement
    • Usuń blokowanie renderowania JavaScript| https://developers.google.com/speed/docs/insights/BlockingJS
    • Zmniejsz rozmiar powyższej zawartości krotnie| https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent
    • gdzie umieścić znaczniki <script> w znacznikach HTML? | http://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup

    JavaScript Minify

    problem-pliki JavaScript powinny być zawsze minimalizowane, aby skrócić czas przesyłania i przyspieszyć ładowanie strony.

    rozwiązanie – Minifikacja usuwa niepotrzebne lub nadmiarowe dane bez wpływu na sposób przetwarzania zasobu przez przeglądarkę. Narzędzie IDE (Integrated Developer Environment) używane do tworzenia witryny może zawierać funkcje, które zminimalizują JavaScript podczas procesu kompilacji. Można to również zrobić za pomocą narzędzi Google Closure tools, w tym Closure Compiler, optymalizatora, który przepisuje kod i minimalizuje martwą przestrzeń, aby szybciej go pobrać. Typowe jest minifikowanie tylko w środowisku produkcyjnym, ponieważ rozwiązywanie problemów i debugowanie w środowiskach programistycznych będzie łatwiejsze dzięki Nie minifikowanemu JavaScript.

    • Minimalizuj zasoby (HTML, CSS i JavaScript) | https://developers.google.com/speed/docs/insights/MinifyResources
    • jak zminimalizować swoje strony internetowe CSS, HTML & JavaScript| https://www.elegantthemes.com/blog/tips-tricks/how-to-minify-your-websites-css-html-javascript

    nie używaj wbudowanego JavaScript

    problem-wbudowany kod JavaScript nie powinien być używany, ponieważ wymaga, aby przeglądarka przechodziła znaczniki kodu JavaScript, które spowalniają przetwarzanie.

    rozwiązanie-Przenieś cały kod JavaScript do jednego minifikowanego pliku, który zapewnia czyste oddzielenie znaczników, stylu i kodu. Można to również osiągnąć, włączając Filtr „Inline JavaScript” na serwerach internetowych Apache i Nginx.

    • Fixit-Inline JavaScript| https://mobiforge.com/design-development/fixit-inline-javascript
    • Inline JavaScript| https://modpagespeed.com/doc/filter-js-inline
    • dlaczego Kod Inline CSS i JavaScript jest taki zły| https://dzone.com/articles/why-inline-css-and-javascript-

    zasoby:

    • JavaScript: Zalety i wady http://www.jscripters.com/javascript-advantages-and-disadvantages/

    Optymalizacja CSS

    kaskadowe arkusze stylów (CSS) opisują, w jaki sposób elementy HTML mają być wyświetlane na ekranie, mogą zaoszczędzić wiele pracy i mogą kontrolować układ wielu stron internetowych jednocześnie.

    jednak CSS może wydłużyć czas ładowania aplikacji, jeśli podano bezwzględne wymiary i pozycje w dyrektywach CSS, zewnętrzne arkusze stylów nie są używane do oddzielania buforowania CSS od zawartości, zasoby obrazów CSS nie są łączone w pliki Sprite i/lub istnieje więcej niż jeden znacznik H1 na stronę.

    unikaj wymiarów bezwzględnych i pozycji w dyrektywach CSS

    problem-należy unikać wymiarów pikselowych i bezwzględnych oraz pozycji w dyrektywach CSS, ponieważ mogą one nie pozwalać przeglądarce na dostosowanie zawartości do wyświetlacza lub poprawne renderowanie na wszystkich typach urządzeń. Istnieją jednak wyjątki od tej reguły. Na przykład, jeśli chcesz, aby obrazy były dopasowane do konkretnego wyświetlacza, bardziej sensowne jest określenie wymiaru w pikselach. Ponadto miary pikseli mogą być odpowiednie dla marginesów, obramowań i wypełnień.

    rozwiązanie-użyj względnych środków, takich jak em, ex, bolder, larger, i thick tam gdzie to możliwe. Na przykład podczas określania czcionki użyj font-size: 1.5em zamiast font-size: 12px.

    • Fixit-miary| https://mobiforge.com/design-development/fixit-measures

    użyj zewnętrznych arkuszy stylów, aby oddzielić buforowanie CSS od zawartości

    problem-zewnętrzne arkusze stylów powinny być używane do oddzielenia instrukcji CSS od HTML. To buforowanie CSS przez przeglądarkę internetową pozwala uniknąć kolejnej podróży na serwer i przyspiesza ładowanie strony.

    rozwiązanie-w sekcji <head> HTML użyj języka, aby wywołać plik CSS Na zewnątrz, zachowując instrukcje CSS w oddzielnym pliku OD HTML (patrz poniżej).

    <link rel="stylesheet" type="text/css" href="https://mysite.com/main.css" media="screen" title="style (screen)" />

    Zastrzeżenie: użycie wielu zewnętrznych arkuszy stylów CSS może negatywnie wpłynąć na wydajność, dlatego należy je połączyć w jeden zewnętrzny CSS.

    • wewnętrzne vs zewnętrzne CSS| http://infoheap.com/internal-vs-external-css/
    • zoptymalizuj dostarczanie CSS| https://varvy.com/pagespeed/optimize-css-delivery.html

    Połącz zasoby obrazów CSS w pliki Sprite

    problem-gdy wiele obrazów jest używanych niezależnie, każde z nich wymaga kilku żądań sieciowych. Sprites CSS łączy wiele obrazów w jeden plik obrazu do wykorzystania w witrynie internetowej, aby przyspieszyć dostawę i czas ładowania. Plik można następnie wyciąć za pomocą CSS.

    rozwiązanie-można znaleźć wiele narzędzi do tworzenia arkuszy sprite, w tym Compass, Lemonade, SpriteMe, Fireworks CS6 i TexturePacker.

    • Fixit – obrazek| https://mobiforge.com/design-development/fixit-image-sprites
    • CSS Sprites: czym są, dlaczego są fajne i jak z nich korzystać| https://css-tricks.com/css-sprites/
    • Arkusze Sprite CSS: najlepsze praktyki, narzędzia i pomocne aplikacje| https://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications–webdesign-8340

    zasoby

    • co to jest CSS? | https://www.w3schools.com/css/css_intro.asp

    Optymalizacja obrazów

    waga strony, znana również jako „waga sieci”, zmniejsza wydajność aplikacji, wydłużając czas ładowania i zmniejszając zużycie danych sieciowych. Zrozumienie wagi strony, kompresji zasobów, optymalizacji obrazów i wymiarów obrazu ma kluczowe znaczenie dla skutecznej strategii internetowej.

    Ogranicz rozmiar i wagę strony

    problem-całkowity Rozmiar Pliku strony, w tym pliki zależne, wpłynie na czas ładowania i czas potrzebny mobilnemu robotowi gąsienicowemu. Czyste i lekkie strony są najlepsze dla mobilnego SEO; mobilne Wyszukiwarki wolą pozycjonować te strony. Staraj się utrzymać rozmiar plików wszystkich stron mobilnych poniżej 25 kilobajtów. Jest to maksymalny rozmiar pliku, który iPhone będzie buforował dla każdego pobranego elementu.

    rozwiązanie-istnieje wiele sposobów na zmniejszenie wagi strony, w tym optymalizacja obrazu, kompresja gzip, Minifikacja, buforowanie, JavaScript i konsolidacja CSS. Inne rozwiązania obejmują unikanie: osadzania i dołączania, frameworków JavaScript i CSS, niestandardowych czcionek i niepotrzebnego bałaganu na stronie. Najlepsze rozwiązanie zależy od specyfiki Twojej witryny.

    • Fixit-Limit rozmiaru strony| https://mobiforge.com/design-development/fixit-page-size-limit
    • zrozumienie wagi strony| https://mobiforge.com/research-analysis/understanding-web-page-weight
    • zmniejszenie wagi strony| https://mobiforge.com/design-development/reducing-page-weight

    Włącz kompresję zasobów

    problem-kompresowanie zasobów za pomocą gzip lub Deflate może zmniejszyć liczbę bajtów wysyłanych przez sieć.

    rozwiązanie-większość serwerów może być skonfigurowana do używania kompresji gzip. Na przykład możesz włączyć kompresję gzip na serwerze Apache, używając pliku konfiguracyjnego .htaccess. Możesz także użyć mod_gzip, aby włączyć kompresję gzip, a mod_deflate, aby skompresować wyjście z serwera przed wysłaniem go do odwiedzającego. Jeśli witryna jest hostowana na serwerze Windows, możesz włączyć kompresję zarówno dla plików statycznych, jak i dynamicznych, wybierając opcję Włącz kompresję statyczną w Menedżerze usług IIS (Internet Information Services).

    • Włącz kompresję| https://developers.google.com/speed/docs/insights/EnableCompression
    • Włącz kompresję gzip| https://varvy.com/pagespeed/enable-compression.html
    • jak włączyć kompresję gzip| https://www.giftofspeed.com/enable-gzip-compression/

    Optymalizacja obrazów

    problem-obrazy na stronie powinny być zoptymalizowane, aby zmniejszyć rozmiar plików bez znacznego wpływu na ich jakość wizualną. Formatowanie i kompresowanie obrazów może zapisać wiele bajtów danych.

    rozwiązanie-Użyj aplikacji do kompresji obrazów, aby łatwo zmniejszyć rozmiar plików obrazów. Narzędzia te usuwają ukryte dane w pliku obrazu, takie jak dodatkowe profile kolorów i metadane (np., Geolokalizacja miejsca wykonania zdjęcia), które nie są potrzebne. Zapewniają szybki i łatwy sposób na zmniejszenie rozmiaru plików bez utraty jakości obrazu. Narzędzia do kompresji obrazu obejmują TinyJPG, Compressor.io, Kraken, ImageOptimizer, ImageOptim, Crush Pics i Minifier (Aplikacje Shopify).

    • Optymalizuj obrazy| https://developers.google.com/speed/docs/insights/OptimizeImages
    • Fixit-Obraz Crunch| https://mobiforge.com/design-development/fixit-image-crunch
    • Optymalizacja obrazów dla sieci: Praktyczny poradnik| https://www.abetterlemonadestand.com/optimizing-images-for-web/
    • jak zoptymalizować obrazy dla witryny WordPress| https://www.elegantthemes.com/blog/tips-tricks/optimize-images-for-your-wordpress-website

    podaj wymiary obrazu

    problem-wymiary obrazu powinny być zawsze uwzględniane, a obrazy nie powinny być ponownie próbkowane w czasie wykonywania, ponieważ spowolni to renderowanie strony. Gdy obrazy są przywoływane z poziomu znaczników, należy podać ich wymiary wyświetlania dla przeglądarki. Określenie szerokości i wysokości dla wszystkich obrazów pozwala na szybsze renderowanie, eliminując potrzebę niepotrzebnego ponownego malowania i ponownego malowania.

    rozwiązanie-określ szerokość i wysokość obrazu, włączając atrybuty width i height, gdy używasz elementu img (patrz poniżej).

    <img src="images/clown.jpg" width="50" height="50" />

    jeśli w dokumencie zawierającym Nie podano żadnych wymiarów lub jeśli podane wymiary nie odpowiadają wymiarom rzeczywistych obrazów, przeglądarka będzie wymagać ponownego wlania i przemalowania po pobraniu obrazów. Aby zapobiec ponownemu przepływowi, określ szerokość i wysokość wszystkich obrazów w znaczniku HTML <img> lub w CSS.

    • Fixit-Określ rozmiary obrazów| https://mobiforge.com/design-development/fixit-specify-image-sizes
    • określ wymiary obrazu| https://gtmetrix.com/specify-image-dimensions.html

    wykorzystanie pamięci podręcznej

    zmniejszenie liczby żądań aplikacji i procesów zasoby poprawią czas ładowania i zmniejszą zużycie danych sieciowych. Można to zrobić na dwa sposoby: lokalne buforowanie lub zminimalizowanie użycia zewnętrznych skryptów i obiektów.

    Dźwignia buforowania przeglądarki

    problem – pobieranie zasobów przez sieć jest zarówno powolne, jak i kosztowne, a pobieranie może wymagać wielu podróży w obie strony między Klientem a serwerem, co opóźnia przetwarzanie i może blokować renderowanie zawartości strony. Może to również wiązać się z kosztami danych dla odwiedzającego. Wszystkie odpowiedzi serwera powinny określać zasady buforowania, aby pomóc klientowi określić, czy i kiedy może ponownie użyć wcześniej pobranej odpowiedzi.

    rozwiązanie-wykorzystaj buforowanie przeglądarki, zmieniając nagłówki żądań zasobów, aby korzystać z buforowania. Możesz dodać kod do pliku konfiguracyjnego .htaccess na serwerze lub użyć podstawowego nagłówka HTTP Cache-Control (patrz poniżej).

    Cache-Control: max-age=2592000, public
    • wykorzystaj buforowanie przeglądarki| https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
    • Fixit-buforowanie| https://mobiforge.com/design-development/fixit-caching
    • wykorzystaj buforowanie przeglądarki| https://varvy.com/pagespeed/leverage-browser-caching.html
    • co jest .htaccess? | http://www.htaccess-guide.com/
    • Cache-Control| https://varvy.com/pagespeed/cache-control.html

    łączenie wielu plików w celu zwiększenia wydajności

    problem-każdy zewnętrzny obiekt pobrany na stronie wymaga oddzielnego żądania serwera nazw domen (DNS). Nie jest to duży problem na tradycyjnym komputerze z szybkim połączeniem, ale w wolniejszych sieciach mobilnych może to powodować opóźnienia. Spowoduje to pogorszenie wydajności aplikacji i czasu ładowania.

    rozwiązanie-zmniejsz liczbę i rozmiar zasobów wymaganych dla witryny. Jeśli jednak nie jest to możliwe, połącz wszystkie zewnętrzne pliki CSS w jeden arkusz stylów lub wszystkie pliki JavaScript w jeden duży plik, aby zmniejszyć liczbę wywołań do przeglądarki.

    • najlepsze praktyki aplikacji mobilnych-minimalizacja zasobów zewnętrznych| https://varvy.com/pagespeed/cache-control.html
    • jak zmniejszyć żądania HTTP, aby przyspieszyć witrynę WordPress| https://yoast.com/reduce-http-requests-wordpress/
    • proste kroki, aby poprawić czas ładowania strony| http://www.peachpit.com/articles/article.aspx?p=1431494&seqNum=5

    unikaj wyskakujących okienek

    korzystanie z wyskakujących okienek niekoniecznie jest złe w aplikacji komputerowej. Jeśli jednak aplikacja korzysta z responsywnego projektu lub jest używana w aplikacji mobilnej, wyskakujące okienka często utrudniają i szkodzą użytkownikowi. Przyciągają uwagę użytkownika ze strony do wyskakującego okienka, a początkujący użytkownik szybko staje się zdezorientowany i sfrustrowany.

    wyskakujące okienka

    problem-okna wyskakujące nie są obsługiwane na wielu urządzeniach mobilnych i używanie ich może mieć nieprzewidywalne wyniki

    rozwiązanie – istnieje wiele alternatyw dla wyskakujących okienek, które są widoczne bez zajmowania całego okna, takich jak lightboxy, rozbudowa linii i stacjonarne banery reklamowe.

    • Fixit-wyskakujące okna| https://mobiforge.com/design-development/fixit-pop-windows
    • śmierć wyskakujących okienek mobilnych i co możesz zrobić zamiast tego| http://searchengineland.com/death-mobile-pop-ups-can-instead-263390
    • Google łamie natrętne wyskakujące okienka mobilne: oto, co marketerzy muszą wiedzieć| https://blog.hubspot.com/marketing/google-pop-up-mobile-marketing#sm.0000u10cf1u3gcsdyzz2qa1xm5ugf
    • Jaka jest Najlepsza Alternatywa dla Pop-up? | https://www.quora.com/Which-is-the-best-alternative-to-a-pop-up
    • 5 podstawowe zasady UX dla projektowania okien dialogowych| https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116
    • 9 nie tak natrętne alternatywy dla Hover pop-up Ads| https://www.linkedin.com/pulse/9-not-so-intrusive-alternatives-hover-pop-up-ads-paula-agius

    nasza metodologia dla tego badania

    wykorzystaliśmy następujące kroki do przeprowadzenia tego badania:

    1. korzystając ze statystyk Digital Analytics Program (DAP), wyciągnęliśmy nazwy 26 najlepszych stron internetowych rządu federalnego, do których dostęp mają urządzenia mobilne.
    2. przetestowaliśmy każdą witrynę przy użyciu siedmiu przyjaznych dla urządzeń mobilnych zautomatyzowanych narzędzi testowych:
      • Google Mobile-Friendly Test| https://www.google.com/webmasters/tools/mobile-friendly/
      • Mobile Moxie| https://www.mobilemoxie.com/tools/site_analysis/
      • Mobi Ready| http://ready.mobi/
      • spostrzeżenia na stronie| https://developers.google.com/speed/pagespeed/insights/
      • W3C MobileOK Checker| https://validator.w3.org/mobile/
      • Varvy SEO tool| https://varvy.com/
      • Gtmetrix – https://gtmetrix.com/
    3. po przeanalizowaniu nieudanych kryteriów zgłoszonych przez każde narzędzie, zebraliśmy wyniki w jednym arkuszu kalkulacyjnym Microsoft Excel.
    4. pogrupowaliśmy problemy, które znaleźliśmy na 15 lub więcej witrynach, w pięć kategorii objętych tym przewodnikiem, które są wymienione w kolejności od większości wystąpień (JavaScript) do najmniejszych wystąpień (pop-upy).

    Articles

    Dodaj komentarz

    Twój adres e-mail nie zostanie opublikowany.