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.
źródło
Odpowiedzi:
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.
źródło
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
źródło
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.
źródło
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 .
źródło