Forum PHP.pl > HTML5, jak poprawnie ładować asynchronicznie style?

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: HTML5, jak poprawnie ładować asynchronicznie style?

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

KsaR

25.07.2015, 03:39:23

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:

[HTML] pobierz, plaintext 
<style scoped>@import url(//some_ip/~ksar/css/style.min.css?v=0)</style>
[HTML] pobierz, plaintext

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ą).

trueblue

25.07.2015, 07: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.

KsaR

25.07.2015, 07:44:40

Cytat(trueblue @ 25.07.2015, 08:37:26 )

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

trueblue

25.07.2015, 07:52:50

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ś?

Comandeer

25.07.2015, 08:47:03

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

KsaR

25.07.2015, 12:08:38

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ą:

[HTML] pobierz, plaintext 
</head>
<body>
<header>
<div id="connected"></div>
<nav id="menu">
<ul>
 <li><a href="/">Strona główna</a></li> <!-- ten link -->
 <li><a href="/addquotes/">Dodaj cytaty</a></li>
</ul>
</nav>
</header>
[HTML] pobierz, plaintext

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:

[HTML] pobierz, plaintext 
</footer><style>@import url(//ip/~ksar/css/style.min.css?v=0)</style></body></html>
[HTML] pobierz, plaintext

--
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.

Hmmm, btw.
Cos zmienialem jeszcze w head, wrazie czego sie podziele zdobyta wiedza gdzie byla przyczyna. - jednak zmiany w head nic nie zmienily hmm.

Kliknalem szczegoly, google pokazalo jak widzi strone, i widzi html ale bez styli :-O.

Cos takiego doslownie:

Cytat

Strona główna
Dodaj cytat

Tresc

trueblue

25.07.2015, 15: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ą.

Comandeer

25.07.2015, 15:37:43

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.

KsaR

25.07.2015, 16:00:42

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>):

[HTML] pobierz, plaintext 
<link rel="stylesheet" href="//ip......../~ksar/css/style.min.css?v=0"/>
[HTML] pobierz, plaintext

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.

trueblue

25.07.2015, 16:12:42

Nie miałem na myśli zmiany IP na domenę, ale wprowadzenie URL do linku <a href="/">

KsaR

25.07.2015, 16:22:10

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

.

Hmmm spróbuje jeszcze
[CSS] pobierz, plaintext
li{line-height:10mm}
[CSS] pobierz, plaintext
// 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").

Comandeer

25.07.2015, 23:06:54

A jeśli przeniesiesz css normalnie z powrotem do head to problem znika?

KsaR

25.07.2015, 23:14:28

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

Warto poprawić:
Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie

@z trescia jak wyzej.

Comandeer

26.07.2015, 08:35:32

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

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.