En un diseño web vamos a tener una serie de recursos o componentes que deben descargarse al browser. Estos recursos son principalmente:
- El HTML
- Los archivos CSS
- Los archivos JavaScript
- Las fuentes e
- Imágenes
Web Development Website
En un diseño web vamos a tener una serie de recursos o componentes que deben descargarse al browser. Estos recursos son principalmente:
A partir de cierta versión de WordPress ya los colaboradores del código nos dieron a los desarrolladores web ciertas funciones para que no tengamos que entrar en el core de WordPress a hacer cambios en el head. O, peor aún, que no insertemos HTML directamente en el archivo header.php ya que eso inutilizaría el propósito del CSM.
Estoy creando códigos en mi archivo de funciones personalizado. Uno de esos códigos es para la inserción de referencias a archivos de estilos en la cabecera. Esos archivos de estilo son los de fontawesome. No los estoy colocando en algún directorio del tema porque quiero que las referencias se mantengan allí aún si cambio de tema.
Sí queremos colocar una hoja de estilo en la cabecera usamos las funciones wp_enqueue_style(), pero si lo que queremos es no hacer referencia a la hoja de estilo o al script si no el código CSS directamente, entonces ya es otra cosa.
Esto se logra descargando un archivo .zip que te proporciona la misma gente de FontAwesome en su página donde explica cómo hacerlo tú mismo.
En un principio estaba usando el archivo functions.php del tema activo, pero a medida que voy incorporando más código se hace evidente que debo dejar esa mala maña. El archivo functions.php es un archivo cortesía del creador del tema que a su vez es un cumplimiento de los lineamientos de WordPress, pero el tema podría funcionar sin ese archivo.
Voy a documentar lo que voy a ir haciendo con una web, businet.brigzen.com, que usa WordPress y con el tema Astra para optimizar su carga de manera que pase con 100 puntos el PageSpeed Insight.
Lo primero que voy a hacer es pasarla por el PageSpeed Insight y ver de qué se queja, tomaré nota de los scripts y de los estilos y trabajaré en función de ellos.
Diferir un script que se encuentra en la cabecera del index es pasar de esto:
<script type='text/javascript' src='https://jquery.min.js' id='jquery-core'></script>
A esto:
<script defer type='text/javascript' src='https://jquery.min.js' id='jquery-core'></script>
Se le ha agregado al link el parámetro <defer>.
Diferir scripts es la mejor manera de lidiar con los errores arrojados por PageSpeed Insight referente a archivos Javascript.
Voy a explicar cómo corrijo los errores relacionados con scripts en los resultados de PageSpeed Insight. Tanto para el bloqueo de renderizado como para cuando el script que no se usa aplica lo siguiente.