Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> HTML5, jak poprawnie ładować asynchronicznie style?, Google Insights
KsaR
post 25.07.2015, 03:39:23
Post #1





Grupa: Zarejestrowani
Postów: 516
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:
  1. <style scoped>@import url(//some_ip/~ksar/css/style.min.css?v=0)</style>

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

Ten post edytował Ksar 25.07.2015, 03:47:35


--------------------
WEB Ciekawostki | Pomocnik dla programistów
Dlaczego nie uczyć się z W3Schools? | Brak odpowiedzi w temacie?
Środowisko: debian 8, nginx, MariaDB, PHP 7.1
Go to the top of the page
+Quote Post
trueblue
post 25.07.2015, 07:37:26
Post #2





Grupa: Zarejestrowani
Postów: 5 055
Pomógł: 1410
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
Go to the top of the page
+Quote Post
KsaR
post 25.07.2015, 07:44:40
Post #3





Grupa: Zarejestrowani
Postów: 516
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 tongue.gif.
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 tongue.gif.


--------------------
WEB Ciekawostki | Pomocnik dla programistów
Dlaczego nie uczyć się z W3Schools? | Brak odpowiedzi w temacie?
Środowisko: debian 8, nginx, MariaDB, PHP 7.1
Go to the top of the page
+Quote Post
trueblue
post 25.07.2015, 07:52:50
Post #4





Grupa: Zarejestrowani
Postów: 5 055
Pomógł: 1410
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ś?
Go to the top of the page
+Quote Post
Comandeer
post 25.07.2015, 08:47:03
Post #5





Grupa: Zarejestrowani
Postów: 1 263
Pomógł: 252
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 tongue.gif


--------------------
Go to the top of the page
+Quote Post
KsaR
post 25.07.2015, 12:08:38
Post #6





Grupa: Zarejestrowani
Postów: 516
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ą:

  1. </head>
  2. <header>
  3. <div id="connected"></div>
  4. <nav id="menu">
  5. <ul>
  6. <li><a href="/">Strona główna</a></li> <!-- ten link -->
  7. <li><a href="/addquotes/">Dodaj cytaty</a></li>
  8. </ul>
  9. </nav>
  10. </header>


Ktoś, coś? biggrin.gif 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:
  1. </footer><style>@import url(//ip/~ksar/css/style.min.css?v=0)</style></body></html>


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


Ten post edytował Ksar 25.07.2015, 12:41:36


--------------------
WEB Ciekawostki | Pomocnik dla programistów
Dlaczego nie uczyć się z W3Schools? | Brak odpowiedzi w temacie?
Środowisko: debian 8, nginx, MariaDB, PHP 7.1
Go to the top of the page
+Quote Post
trueblue
post 25.07.2015, 15:01:29
Post #7





Grupa: Zarejestrowani
Postów: 5 055
Pomógł: 1410
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ą.
Go to the top of the page
+Quote Post
Comandeer
post 25.07.2015, 15:37:43
Post #8





Grupa: Zarejestrowani
Postów: 1 263
Pomógł: 252
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


--------------------
Go to the top of the page
+Quote Post
KsaR
post 25.07.2015, 16:00:42
Post #9





Grupa: Zarejestrowani
Postów: 516
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>):

  1. <link rel="stylesheet" href="//ip......../~ksar/css/style.min.css?v=0"/>


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 biggrin.gif).

Ide potestuje jeszcze.

Ten post edytował Ksar 25.07.2015, 16:09:54


--------------------
WEB Ciekawostki | Pomocnik dla programistów
Dlaczego nie uczyć się z W3Schools? | Brak odpowiedzi w temacie?
Środowisko: debian 8, nginx, MariaDB, PHP 7.1
Go to the top of the page
+Quote Post
trueblue
post 25.07.2015, 16:12:42
Post #10





Grupa: Zarejestrowani
Postów: 5 055
Pomógł: 1410
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="/">
Go to the top of the page
+Quote Post
KsaR
post 25.07.2015, 16:22:10
Post #11





Grupa: Zarejestrowani
Postów: 516
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 biggrin.gif.

Hmmm spróbuje jeszcze
  1. li{line-height:10mm}
// 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 tongue.gif
Ps. (Miedzy "li", i "a").

Ten post edytował Ksar 25.07.2015, 16:38:24


--------------------
WEB Ciekawostki | Pomocnik dla programistów
Dlaczego nie uczyć się z W3Schools? | Brak odpowiedzi w temacie?
Środowisko: debian 8, nginx, MariaDB, PHP 7.1
Go to the top of the page
+Quote Post
Comandeer
post 25.07.2015, 23:06:54
Post #12





Grupa: Zarejestrowani
Postów: 1 263
Pomógł: 252
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?


--------------------
Go to the top of the page
+Quote Post
KsaR
post 25.07.2015, 23:14:28
Post #13





Grupa: Zarejestrowani
Postów: 516
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

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

Ten post edytował Ksar 25.07.2015, 23:16:11


--------------------
WEB Ciekawostki | Pomocnik dla programistów
Dlaczego nie uczyć się z W3Schools? | Brak odpowiedzi w temacie?
Środowisko: debian 8, nginx, MariaDB, PHP 7.1
Go to the top of the page
+Quote Post
Comandeer
post 26.07.2015, 08:35:32
Post #14





Grupa: Zarejestrowani
Postów: 1 263
Pomógł: 252
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 wink.gif


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 25.06.2018 - 03:26