Cómo dejar de cargar archivos innecesarios y reducir las solicitudes HTTP del sitio web: consejos de optimización de WordPress

En Crunchify, hemos publicado múltiples tutoriales de optimización de velocidad para que los consulte en cualquier momento.

Usamos MaxCDN como nuestro proveedor de contenido. Han pasado casi 4 años y hasta ahora está funcionando muy bien. Genesis WordPress Framework y MaxCDN son la mejor combinación. De forma predeterminada, Genesis Framework viene con mucha optimización, esquema de marcado de Google, estructura compatible con dispositivos móviles y mucho más.

La semana pasada estaba mirando mi cuenta MaxCDN y de repente noté los mejores recursos de descarga. Como puede ver en la imagen top 9 out of 10 resource files se descargaron más de ~ 5 millions veces la semana pasada.

Me sorprendió y pensé que realmente debería necesitar esos recursos. ¿Tengo que cargar esos archivos por separado? Cómo deshacerse de esos archivos si no se requieren, excepto el archivo style.css , que es absolutamente necesario para que se cargue el sitio.

Comencemos con cómo me deshice de todos esos 9 archivos con trucos simples

Paso 1

Enumeremos list all of those 9 files . La segunda columna muestra el número de veces que se descargó.

Paso 2

Agrupemos los archivos del complemento Crayon Syntax Highlighter .

Hay 3 archivos:

neon.css , crayon.min.css y crayon.min.js . He escrito un tutorial completo por separado con un total de 7 pasos detallados para deshacerme de esos archivos. Por favor revíselo y avíseme si ve algún problema.

Paso 3

Ahora wp-embed-min.js . Visite el tutorial Cómo deshabilitar el script de incrustación automática para WordPress 4.4+. Dejará de cargar el archivo incrustado en el front-end.

Etapa 4

Repasemos 3 more .png :

patrón-bg.png

Estaba cargando esta imagen en el fondo del encabezado y pie de página. Me deshice de él usando el color #333 en su lugar.

crunchify-sprite.png

Estaba cargando esta imagen de sprite para mostrar los botones de seguimiento social en la barra lateral. Lo reemplacé por fuentes fontawesome .

h3.png

Estaba cargando esto para mostrar la marca de verificación para las publicaciones H3 en algunas de las ubicaciones. Lo reemplacé con fuentes fontawesome . A continuación se muestra un equivalente fontawesome.

Paso-5

Ahora nos quedan solo 2 archivos. crunchify-logo.png y bg.png , que pensé en mantenerlo. Entonces, en lugar de llamar como imagen, agregué el equivalente de imagen base64 para esos archivos.

Antes:

Después:

He convertido ambas imágenes a imágenes base64. La ventaja la obtendremos, no tener que abrir otra conexión y hacer una solicitud HTTP al servidor para la imagen.

Menos solicitud = mejor tiempo de carga de la página

Hay algunas ventajas en el uso de imágenes SVG (Scalable Vector Graphic) image ya que las imágenes se escalan a cualquier tamaño sin perder claridad (excepto muy pequeñas), lo que se ve muy bien en las pantallas de retina.

Estos Data URIs no se limitan a .png o imágenes, sino a cualquier recurso. Aquí hay una herramienta simple de conversión de .png a .svg que utilicé en línea.

Resumen

Este tutorial es parte de la sección Cómo acelerar WordPress y aumentar el rendimiento. Encontrará todos los trucos y consejos de optimización de WordPress allí.

Al seguir estos pasos, me deshice de los 9 recursos no deseados de 10. Lo que significa que mi página se carga mucho más rápido ya que habrá 9 solicitudes menos en cada página.

Avíseme si tiene otros consejos que mejorarán la velocidad de la página del sitio. En Crunchify, la velocidad es el criterio principal y esa es la razón por la que usamos muy pocos complementos. Todas las páginas se cargan within half a second .