Get best of the week

WordPress "Bloqueo de renderizado JavaScript y CSS". ÂżComo arreglarlo?

Velocidad de descarga - un factor muy importante en las clasificaciones en el SERP ( el S earch E Ngine el R esultado P edad), o en la página de resultados de búsqueda. PageSpeed ​​Insights de Google es una gran herramienta para optimizar la velocidad de carga de su sitio web. No solo muestra la velocidad actual , sino que también identifica problemas que ralentizan su recurso. En esta guía, le mostraremos cómo solucionar uno de los problemas más comunes que puede encontrar al probar su sitio. Entonces, si ve una advertencia: " Elimine JavaScript y CSS que bloquean el procesamiento en el contenido de la mitad superior de la página ", no se preocupe, la solución está en este artículo.


Qué significa la advertencia "Elimine JavaScript y CSS que bloquean el procesamiento en el contenido de la mitad superior de la página"


En las reglas de Google PageSpeed , encontrará el siguiente requisito: "Eliminar JavaScript y CSS que bloquean el renderizado". Si no lo hace, puede afectar significativamente la velocidad de carga de su sitio. Disminuya la velocidad. Seguramente tiene una pregunta, ¿cómo pueden JavaScript y CSS ralentizar un sitio?


En pocas palabras, cada vez que instala un nuevo complemento o tema, el front-end se actualiza con un nuevo código JavaScript y CSS. En consecuencia, los navegadores pueden necesitar más tiempo para descargar este código y, por lo tanto, la página web.


La parte superior de la página, o ATF ( A Bove T que F de edad), es la parte de la página que el usuario ve inmediatamente después de cargarlo. Cualquier otra parte, todo lo que puedes ver al desplazarte hacia abajo, es BTF ( Bed and elow T of He the F old), o la parte inferior.


Ahora la esencia de esta advertencia se está volviendo mucho más clara, ¿no? Si, cuando visita su sitio, se carga JavaScript y CSS irrelevantes, recibirá una advertencia para reducir la cantidad de código JavaScript y CSS que bloquea la representación en la parte superior de la página


Búsqueda de "JavaScript y CSS de bloqueo de procesamiento" utilizando las estadísticas de la página de Google


, PageSpeed Insights:


  1. , URL- “Enter a web page URL”.
  2. “Analyze”, .

    c — 50 70 . Google .



JavaScript CSS, , .





, , 100 — . — UX.


, , UX, PageSpeed Insights.


, Google , . , , -!


“Eliminate render-blocking JavaScript and CSS in above-the-fold content”


JavaScript CSS, , WordPress . WordPress, :


W3 Total Cache


— W3 Total Cache. , , WordPress:


  1. Performance -> General Settings
  2. , Minify, .
  3. “Enable” Minify. Minify mode — “Manual”.
  4. “Save all settings”.


  5. JavaScript CSS, . Google PageSpeed Insights .
  6. , , , Performance -> Minify.
  7. JS. JS, “Operations in areas”. Non-blocking using “defer” embed type — Before <head>.
  8. “Add Script” JS file management. URL- JavaScript PageSpeed Insights .


  9. CSS. “CSS file management”, “Add a style sheet”. , URL- CSS Google PageSpeed Insights .


  10. , “Save Settings & Purge Caches”.

Autoptimize


, JavaScript CSS, — Autoptimize. . :


  1. Settings -> Autoptimize.
  2. “JavaScript and CSS Options” “Optimize JavaScript Code?” “Optimize CSS Code?”.
  3. “Save Changes and Empty Cache”.



, . .


, , Google PageSpeed Insights . , — ! .


  1. Settings -> Autoptimize.
  2. “Show Advanced Settings”.
  3. , “Also aggregate inline JS” “Also aggregate inline CSS” selections.


  4. .

Speed Booster Pack


, — Speed Booster Pack. JavaScript CSS . , :


  1. Speed Booster Pack , “Advanced”.
  2. “JavaScript Optimization”, “JavaScript Optimization” “Defer parsing of Javascript files”.
  3. “CSS Optimization” “CSS render-blocking optimization”.
  4. , Inline all CSS, Minify all (previously) inlined CSS, Move all inlined CSS . , .
    , . — “ ”, FOUC (Flash Of Unstyled Content). , , , CSS, .

, , Google PageSpeed Insights , .



, , .


Google’s PageSpeed Insights , . , , WordPress, “Eliminate render-blocking JavaScript and CSS in above-the-fold content”, .

More articles:


All Articles