 HTML5, jak poprawnie ładować asynchronicznie style?, Google Insights |
  |
| HTML5, jak poprawnie ładować asynchronicznie style?, Google Insights |
  25.07.2015, 03:39:23
Post
#1
|
|
 Grupa: Zarejestrowani Postów: 520 Pomógł: 102 Dołączył: 15.07.2014 Skąd: NULL Ostrzeżenie: (0%) 
 |
Używam sobie tego narzędzia google żeby poprawić stronę zgodnie z ich radami:
https://developers.google.com/speed/pagespeed/insights/ Jednak... Jest problem. Nie mam pojęcia jak zrobić żeby zniknął mi komunikat: Cytat Należy poprawić: Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie Zamieniłem sobie (w <head>, i chcialbym żeby tam to zostało) <link(...)> na: I coś co mi się podoba, strona ładuje się znacznie szybciej co widać na oko, niż z <link>. Jednak komunikat nie zniknął a zamiast tego pojawił się jeszcze jeden: Cytat Warto poprawić: Nadaj priorytet widocznej treści WTF?.. Jak myślicie, olać te komunikaty czy może da się jakoś zrobić żeby znikły (jednocześnie zachowując szybkość ładowania lub nawet polepszając ją). 
Ten post edytował Ksar 25.07.2015, 03:47:35 -------------------- |
 |
 
|
|
25.07.2015, 07:37:26
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 6 799 Pomógł: 1827 Dołączył: 11.03.2014 Ostrzeżenie: (0%)
|
Wrzuć przed zamknięciem body, JS ładuj asynchronicznie (atrybut async, pamiętaj, że tu jest zaburzona kolejność) lub ładuj za pomocą JS (wstrzykując CSS i JS do head).
EDIT: Dopiero teraz zauważyłem. Dotyczy to pierwszej części. Ten post edytował trueblue 25.07.2015, 07:38:11 -------------------- |
|
|
|
|
25.07.2015, 07:44:40
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 520 Pomógł: 102 Dołączył: 15.07.2014 Skąd: NULL Ostrzeżenie: (0%)
|
Cytat(trueblue @ 25.07.2015, 08:37:26 )  Wrzuć przed zamknięciem body, JS ładuj asynchronicznie (atrybut async, pamiętaj, że tu jest zaburzona kolejność) lub ładuj za pomocą JS (wstrzykując CSS i JS do head). EDIT: Dopiero teraz zauważyłem. Dotyczy to pierwszej części. Troche będzie z tym do roboty zeby przeniesc aż przed </body> bo bede musial zmienic strukture aplikacji  .Ale skoro to ostateczne wyjscie (bez js). Btw. Sprawdzialem teraz validator.w3.org i o dziwo blad jest gdy <style scoped> w <head>.. Z js nie mam problemow bo jest async .
-------------------- |
|
|
|
|
25.07.2015, 07:52:50
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 6 799 Pomógł: 1827 Dołączył: 11.03.2014 Ostrzeżenie: (0%)
|
Drugi komunikat dotyczy umiejscowienia głównego kontentu na stronie. Np. gdy jest banner html lub co "gorsza" flash na górze strony, wtedy treść spada niżej.
Niestety nie zawsze da się wszystko poprawić. Swoją drogą jaki wynik dla desktop osiągnąłeś? -------------------- |
|
|
|
|
25.07.2015, 08:47:03
Post
#5
|
|
 Grupa: Zarejestrowani Postów: 1 268 Pomógł: 254 Dołączył: 11.06.2009 Skąd: Świętochłowice Ostrzeżenie: (0%)
|
Odnośnie CSS najlepsze efekty osiągnie się inlinując najważniejsze części arkusza stylów, a resztę dociągnąć JS asyncem (chociaż przy małych stronach to spowodować może FOUC). Jeśli nie ma JS, to zawsze ten arkusz można doładować przy pomocy noscript > link.
Co do style[scoped] - przecież [scoped] ogranicza style do swojego rodzica (style lokalne), więc wsadzenie tego w head nie ma sensu. Co do zaburzenia kolejności script[async] - od czegoś UMD jest
-------------------- ★Mój blog || Okiem krytyka★
|
|
|
|
|
25.07.2015, 12:08:38
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 520 Pomógł: 102 Dołączył: 15.07.2014 Skąd: NULL Ostrzeżenie: (0%)
|
Cytat(trueblue @ 25.07.2015, 08:52:50 ) Swoją drogą jaki wynik dla desktop osiągnąłeś? 76/100 tel 100/100 kompy. Coś się pozmieniało bo pojawił się błąd którego nie było, tzn wielkość elementów dotykowych. Chyba to coś źle diagnozuje.. Co do tego co się przyczepiają: Ktoś, coś?  błąd zniknął co do blokowania renderowania, i się pojawił blad rozmiaru elementow hm..Koncowka footeru(wygenerowana dynamicznie) tak wyglada po dodaniu tam i skasowaniu stoped: -- Treść jest mała tej strony bo dopiero robie, i póki co ten rozmiar to chyba ostatni element do 100% bo nic innego nie pokazuje. Cos zmienialem jeszcze w head, wrazie czego sie podziele zdobyta wiedza gdzie byla przyczyna. Kliknalem szczegoly, google pokazalo jak widzi strone, i widzi html ale bez styli :-O. Cos takiego doslownie: Cytat
Tresc Ten post edytował Ksar 25.07.2015, 12:41:36 -------------------- |
|
|
|
|
25.07.2015, 15:01:29
Post
#7
|
|
|
Grupa: Zarejestrowani Postów: 6 799 Pomógł: 1827 Dołączył: 11.03.2014 Ostrzeżenie: (0%)
|
A czy Google ma dostęp do tych styli? Pokazałeś ścieżkę z jakimś IP.
Kto się czepia o link do home? Spróbuj tam dać po prostu URL z domeną. -------------------- |
|
|
|
|
25.07.2015, 15:37:43
Post
#8
|
|
|
Grupa: Zarejestrowani Postów: 1 268 Pomógł: 254 Dołączył: 11.06.2009 Skąd: Świętochłowice Ostrzeżenie: (0%)
|
A czy Google wgl rozumie @import w style? Pewnie bot czeka na załadowanie plików z link, ale nie czeka na zassanie tego ze style (na poziomie kodu chyba się nawet nie da tego chwycić)
Albo faktycznie strona jest na tyle mała, że załapałeś się na FOUC. Ten post edytował Comandeer 25.07.2015, 15:47:18 -------------------- ★Mój blog || Okiem krytyka★
|
|
|
|
|
25.07.2015, 16:00:42
Post
#9
|
|
|
Grupa: Zarejestrowani Postów: 520 Pomógł: 102 Dołączył: 15.07.2014 Skąd: NULL Ostrzeżenie: (0%)
|
Cytat(trueblue @ 25.07.2015, 16:01:29 ) A czy Google ma dostęp do tych styli? Pokazałeś ścieżkę z jakimś IP. Kto się czepia o link do home? Spróbuj tam dać po prostu URL z domeną. Zrobiłem tak teraz (przed </body>):
I tak samo, w przegladarkach działa więc to chyba nie to. Coś tam na google pisze że elementy powinny mieć aż 48px i jakies odstepy miedzy soba czy jakos tak.. Zaraz bede testowal. (Edit: https://developers.google.com/speed/docs/in...tsAppropriately ) To zmienienie z IP na domene tez sprawdze, ale raczej to nie powinien byc problem dla bota. Pod adresem do ktroego sie odwoluje znajduje sie styl więc to żaden problem, a wręcz pomoc dla bota. Który nie musi sprawdać DNS tylko odrazu się łączy pod właściwy adres ip (mikro optymalizacja w ms ).Ide potestuje jeszcze. Ten post edytował Ksar 25.07.2015, 16:09:54 -------------------- |
|
|
|
|
25.07.2015, 16:12:42
Post
#10
|
|
|
Grupa: Zarejestrowani Postów: 6 799 Pomógł: 1827 Dołączył: 11.03.2014 Ostrzeżenie: (0%)
|
Nie miałem na myśli zmiany IP na domenę, ale wprowadzenie URL do linku <a href="/">
-------------------- |
|
|
|
|
25.07.2015, 16:22:10
Post
#11
|
|
|
Grupa: Zarejestrowani Postów: 520 Pomógł: 102 Dołączył: 15.07.2014 Skąd: NULL Ostrzeżenie: (0%)
|
Cytat(trueblue @ 25.07.2015, 17:12:42 ) Nie miałem na myśli zmiany IP na domenę, ale wprowadzenie URL do linku <a href="/"> Dokładnie tak wyglada komunikat (takze po zmianie na url): Cytat Należy poprawić: Dobierz odpowiedni rozmiar elementów dotykowych Niektóre linki/przyciski na stronie są prawdopodobnie zbyt małe, aby można z nich było wygodnie skorzystać na ekranie dotykowym. Zastanów się nad powiększeniem tych elementów w celu ułatwienia ich obsługi. Wymienione elementy dotykowe znajdują się blisko innych elementów i mogą wymagać zastosowania większych odstępów. Element dotykowy <a href="http://tu_moj_url(wyciety)">Strona główna</a> i kilka innych (1) znajduje się blisko innych elementów dotykowych . Hmm czcionke dałem 48px według ich zaleceń, problem nie znika. a jak testuje teraz na tablecie to znacznie za duża... 3 słowa się zmieszcza, moze 4 w lini .// takze wedlug zalecen, Zaraz to zedytuje zeby postow nie bic, jesli nie dziala dalej to skresle cala tą linijke. Nie ma co... Zmienilem i odstepy (line-height) i rozmiar czcinki (font-height) i brak, to samo. Chyba jednak lepiej to olac poki co, bo cos za dobrze nie dziala tamta strona chyba Ps. (Miedzy "li", i "a"). Ten post edytował Ksar 25.07.2015, 16:38:24 -------------------- |
|
|
|
|
25.07.2015, 23:06:54
Post
#12
|
|
|
Grupa: Zarejestrowani Postów: 1 268 Pomógł: 254 Dołączył: 11.06.2009 Skąd: Świętochłowice Ostrzeżenie: (0%)
|
A jeśli przeniesiesz css normalnie z powrotem do head to problem znika?
-------------------- ★Mój blog || Okiem krytyka★
|
|
|
|
|
25.07.2015, 23:14:28
Post
#13
|
|
|
Grupa: Zarejestrowani Postów: 520 Pomógł: 102 Dołączył: 15.07.2014 Skąd: NULL Ostrzeżenie: (0%)
|
Cytat(Comandeer @ 26.07.2015, 00:06:54 ) A jeśli przeniesiesz css normalnie z powrotem do head to problem znika? Yyyy.. Zniklo, ale znow sie pojawil ten komunikat przy ktorym post zaczalem: Cytat 85 / 100Szybkość działania strony Należy poprawić: Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie Strona zawiera blokujące zasoby CSS (1). Powoduje to opóźnienia w renderowaniu strony. Część strony widoczna na ekranie nie mogła się wyrenderować bez konieczności czekania na wymienione zasoby. Spróbuj opóźnić ładowanie zasobów blokujących, ładować je asynchronicznie lub wbudować najważniejsze elementy tych zasobów bezpośrednio w HTML-a. Zoptymalizuj wyświetlanie CSS następujących URL-i: http://ciach_ip/~ksar/css/style.min.css?v=0 I na kompy jeszcze zmienilo teraz Cytat 95 / 100Sugestie ? podsumowanie @z trescia jak wyzej.
Warto poprawić: Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie Ten post edytował Ksar 25.07.2015, 23:16:11 -------------------- |
|
|
|
|
26.07.2015, 08:35:32
Post
#14
|
|
|
Grupa: Zarejestrowani Postów: 1 268 Pomógł: 254 Dołączył: 11.06.2009 Skąd: Świętochłowice Ostrzeżenie: (0%)
|
Czyli tak jak mówiłem: strona jest na tyle mała, że łapiesz się na FOUC, czyli cała treść strony zdąży się wygenerować zauważalnie szybciej niż trwa download stylów. Najlepiej jest zinlinować najważniejszy css (albo cały jeśli jest to mały arkusz) a resztę dopiero dociągać asyncem: https://css-tricks.com/authoring-critical-fold-css/
Inlinuje na mojej domowej i łapię punkty ujemne jedynie za ga 
-------------------- ★Mój blog || Okiem krytyka★
|
|
|
|
|
|
Wersja Lo-Fi | Aktualny czas: 1.06.2025 - 10:13 |
