Пуснах уебсайта си в Google Pagespeed и той се върна

„Елиминирайте блокирането на рендериране на JavaScript и CSS в съдържанието отгоре на прегъване“

Проблемът е, че тези "блокиращи визуализация" активи са необходими за изобразяването. Както в:

  • Google Fonts CSS (Google CDN)
  • BootStrap CSS (MaxCDN)
  • CSS на сайта (локален)

Объркан съм. Как мога да изобразя страницата си без моя css.css файл, bootstrap файловете и google шрифтовете?

Губене на време ... по-често, отколкото не ... прозрение ... не се изисква.

Matrix и Pagespeed Insights на Google не е задължително и няма да ви възнагради с никакви тайни класации на Google за катерица от ниво 9.

Google, Bing и вашите потребители не се интересуват от матрицата за оценяване на страници, тъй като защо? в крайна сметка това се свежда до това колко бързо се зарежда страницата и това е, което потребителите и търсачките възнаграждават сайтовете.

Най-голямото влияние на скоростта на уебсайта е достойният хостинг ...

Добрият хостинг има най-голямо влияние върху скоростта на страницата, ако приемем, че нямате фундаментални проблеми ... неща като блокиране на рендерите, изтичане и други неща, които често се отчитат, не са основни проблеми, повечето не намаляват скоростта на страницата до неприемливо ниво.

Всъщност, ако погледнете топ 100 на сайтовете в света, те са БЪРЗИ, но постигат изключително ниски стойности по отношение на pageSpeed ​​прозренията.

Използвайте инструмент за тестване с реално значение ...

Препоръчвам ви да използвате подходящ инструмент за тестване и WebPagetest, като използвате множество проходи с множество сървъри във вашия целеви регион. Целете се за по-малко от 2 секунди, в идеалния случай под 1,5 секунди и под 1 секунда е изключително добро.

Какво е блокиране на визуализация?

Блокирането на визуализация е мястото, където се изисква ресурс преди действителното съдържание, чакането на ресурс за изтегляне може да забави теста на страницата надолу, това често е известно като зареждане на ресурси „над гънката“ и разрешаването на проблема е поставянето на този ресурс “ под гънката '(след съдържанието).

За да заобиколите този проблем, трябва асинхронно да заредите шрифтовете, което означава, че не е в <head> </head>, за решение вижте следващата глава по-долу.

Разрешаване на блокирането на визуализация на шрифтове на Google

Ако искате да стигнете до най-близкото 100/100 в рамките на Google прозрение или други базирани на Matrix уебсайтове, тогава можете да преодолеете проблема с блокирането на рендерирането с шрифтове на Google, като използвате техния Webfont Loader.

Което изглежда по следния начин:

<script type='text/javascript'> WebFontConfig = { google: { families: [ 'Noto+Serif:400,400italic,700,700italic' ] } }; (function() { var wf = document.createElement('script'); wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script> 

Други CSS файлове

Ако имате други ресурси като CSS или JS файлове, които се зареждат вътрешно или външно, тогава те трябва да бъдат заредени в долната част на страницата, това не включва основни JavaScripts (напр. Modernizr или основния CSS на вашия сайт (напр. Повечето доставчици ще предоставят някакъв API за зареждане на CSS чрез JavaScript отдолу.

За съжаление, не всички доставчици на CSS имат API или предоставят елегантно решение, поради което обикновено трябва да разработите и внедрите свой собствен JavaScript, който ще зареди CSS ресурса в долната част на страницата.

Пример за зареждане на CSS файлове в долната част на страницата с помощта на JavaScript

По-долу има скрипт, който ще зареди почти всеки CSS файл, който искате отдолу, ако е вътрешен или външен, няма проблем. Поставете го преди </body>

<script type='text/javascript'> //  
  • Поправете ме, ако греша, но дали Google просто ми каза, че вграденият CSS е по-добър?
  • 1 Да ... вграденото е по-бързо, но точката на Google е само за най-важното, като оформлението или решетката, по този начин нещата не се прескачат, след като се зареди CSS.
  • Така че казвате, че вграденият CSS е добър само когато е направен за подобряване на UX
  • 1 Да ... но това ли го правя на собствените си сайтове? не ... защото по-голямата част от тях се зареждат в рамките на 800ms - стига вашият сайт да се зарежда бързо, тези препоръки са безсмислени.

е работил за вас: Charles Robertson | Искате ли да се свържете с нас?