Co to jest „treść widoczna na ekranie” w Google Pagespeed?

132

Do niedawna moja witryna (www.heatexchangers.ca) osiągnęła 98% w Google Page Speed. Było kilka rzeczy, z którymi nie mogłem nic zrobić, na przykład ciąg zapytania z czcionek internetowych. Byłem z tego bardzo zadowolony, ponieważ reprezentowało to wszystko, co mogłem zrobić.

Niedawno Google dodało coś innego, co wpływa na wynik szybkości strony, a teraz uzyskuję tylko 89% na szybkości strony i otrzymuję tę sugestię:

  • Wyeliminuj zewnętrzne kody JavaScript i CSS blokujące renderowanie w części strony widocznej na ekranie.

Sugestia, aby to naprawić, wydaje się obejmować przeglądanie wszystkich moich plików .css i .js oraz oddzielanie niektórych ich części i dodawanie ich w tekście do mojego kodu HTML. To powoduje pewne zamieszanie, ponieważ miałem wrażenie, że musimy trzymać jak najwięcej JS i CSS z HTML-a, jak to tylko możliwe.

Czym dokładnie jest treść „w części strony widocznej na ekranie”? Jeśli jest to kilka stylów, takich jak czcionka, kolor tła itp; wtedy widzę, że włączenie inline może nie być zbyt wielkim problemem. Nie udało mi się znaleźć listy dokładnie tego, co to jest.

Glipt
źródło
49
W „folderze” znajduje się dolna część ekranu podczas ładowania strony. Gdy wchodzisz na stronę internetową, każda treść, którą widzisz od razu bez przewijania, znajduje się „w części strony widocznej na ekranie”. Wszystko, co musisz przewinąć w dół, aby zobaczyć to „pod zakładką”.
CaribouCode
21
Powyżej zagięcia to termin zwykle używany w odniesieniu do gazet, czyli treść powyżej miejsca, w którym papier jest złożony w poziomie. Zwykle w przypadku projektowania stron internetowych jest to pierwsze około 600 pikseli ~ (dyskusyjne w zależności od tego, kogo zapytasz). Nie odnosi się do stylów (czcionek, tła itp.), Ale odnosi się do treści i typu js, który może blokować renderowanie w tej treści. Wątpię, czy Google sugeruje użycie stylów wbudowanych, czy rzeczywiście możesz opublikować sugestie, które otrzymałeś?
Christian
@Coop Dlaczego nie udzielić odpowiedzi zamiast komentarza?
Kolob Canyon

Odpowiedzi:

113

Dzieje się tak, ponieważ firma Google niedawno zmieniła narzędzie szybkości strony, aby lepiej odzwierciedlało coraz bardziej mobilną sieć. Mobilne sieci danych mają inną charakterystykę wydajności niż sieci przewodowe lub Wi-Fi, więc musisz zrobić różne rzeczy, aby je zoptymalizować.

Powyżej części ekranu (ATF) to po prostu wartość pierwszego ekranu - wszystko, czego nie trzeba przewijać, aby zobaczyć. Oczywiście różni się to w zależności od urządzenia i jego orientacji, więc może być konieczne uogólnienie i być może znalezienie kilku funkcjonalnych wspólnych opcji, może jednej skierowanej na smartfony, jednej na tablety i jednej na większe komputery stacjonarne.

Jeśli chodzi o CSS, o którym mówią, tak naprawdę zamierzają wszystkie CSS potrzebne do pełnego stylu dla każdej wyświetlanej treści ATF. Aby określić czas wczytywania treści ATF, zrobią zrzut ekranu ostatecznej wersji i porównają go wizualnie z ładowaną stroną, a kiedy będzie wystarczająco podobny, uznają, że punkt, w którym zawartość ATF jest załadowana.

To jest prezentacja wideo od Google na ten temat:

http://www.youtube.com/watch?v=YV1nKLWoARQ

Nacisk kładziony jest na nakłonienie użytkowników do zrobienia czegoś w ciągu pierwszej sekundy. Przyczyna umieszczenia CSS dla zawartości ATF bezpośrednio w HTML odzwierciedla ich badania wydajności danych mobilnych pokazujące, że jeśli CSS tam nie ma, nie zostanie załadowany wystarczająco wcześnie, aby być w ciągu pierwszej sekundy.

Zawierają również linki do narzędzi, które mogą być w stanie zautomatyzować niektóre z tych czynności. Nie próbowałem ich i YMMV.

Joshua Coady
źródło
@Joshua, zrobiłem coś dla „Wyeliminuj blokujące renderowanie JavaScript i CSS w części strony widocznej na ekranie” <noscript> ... </noscript>. Ale zastanów się tylko nad telefonami komórkowymi. Nie na komputerze. dla tego adresu
Martin
2

Statystyki strony Google pokażą Ci jasno, ile% plików CSS odsyłających do treści w części strony widocznej na ekranie jest ładowanych zbyt późno i strona mogła zostać wyrenderowana wcześniej. Niż możesz przesunąć części CSS, aby uzyskać zielony wynik. mogę to dla ciebie zrobić: goo.gl/GsRxNc

link z Google opisujący „na ekranie” https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

NoWomenNoCry
źródło
Czy możesz wyjaśnić, co oznaczają procenty? Powiedzmy, że PageSpeed ​​donosi, że 55% treści w części strony widocznej na ekranie można renderować bez czekania na załadowanie zewnętrznych arkuszy stylów. Oznacza to, że 45% treści w części strony widocznej na ekranie jest stylizowanych na podstawie reguł z zewnętrznych arkuszy stylów. Ale tak nie jest .
x-yuri
0

Odnoszą się do plików js blokujących renderowanie, takich jak kod analityczny lub kod śledzenia, dlatego sugerują umieszczenie tych skryptów „wczytaj mnie przed wszystkim innym” w stopce, ponieważ zostaną załadowane, gdy użytkownik wyświetli witrynę na ekranie.

CowboyWillie
źródło
To jest poprawne. Powinny być odroczone, ładowane asynchronicznie lub przeniesione do stopki / przed zamykającym tagiem </body>, ponieważ nie są one kluczowe dla strony. Kluczowy kod, taki jak styl strony głównej lub Bootstrap, musi zostać załadowany na górze strony, w przeciwnym razie zobaczysz FOUC (Flash Of Unstyled Content), więc jedyną rzeczą, którą można zrobić z tymi kluczowymi komponentami, jest ich zminimalizowanie i scalenie na mniej plików, aby zmniejszyć blokowanie renderowania. Ten komentarz jest wsparciem dla komentarza CowboyWillie, który jest niesprawiedliwie odrzucany.
Tahi Reu
Zgadza się, odkładasz, odkładasz, odkładasz, więc ładujesz samą górę swojej strony. Ból związany z dzieleniem doskonale działających plików javascript i css to cena, jaką trzeba zapłacić za tę nową koncepcję, którą wszyscy spieszyli do wdrożenia!
Salvador Valencia
0

Zawartość strony widoczna na ekranie to część strony internetowej, która jest widoczna w oknie przeglądarki po pierwszym wczytaniu strony. Google chce widzieć wbudowany CSS wyodrębniony z głównego pliku CSS i wstawiony do tagu head, umożliwiając załadowanie wszystkiego, co widzisz jako pierwsze.

źródło - https://www.c2experience.com/blog/passing-googles-abovethefold-css#:~:text=Above%2Dthe%2Dfold%20content%20is,first%20to%20be%20loaded%20first .

Emily Katie
źródło