Compartir en facebook
Compartir en linkedin
Compartir en twitter
Compartir en pinterest
Compartir en google

Contenido

Optimizar WordPress puede parecer una tarea abrumadora. La colocación de complementos lo rompe todo. Puede convertirse en un desastre muy rápidamente. Algunos complementos de calidad de imagen hacen que las imágenes sean feas, pequeñas e inutilizables. Terminas perdiendo la calidad del sitio web por el rendimiento. No te preocupes, te enseñaremos paso a paso cómo optimizar wordpress y dónde tener cuidado.

Requisitos

  1. Autooptimizar. Obtener el complemento Aquí
  2. Caché LiteSpeed instalado en su servidor (opcional)
  3. PerfMatters. Obtener complemento Aquí
  4. ShortPixel (puede usar Litespeed para reemplazar este complemento)

Le sugiero que utilice estos complementos para optimizar su sitio de WordPress. Pueden ser extremadamente útiles y optimizar las páginas de su sitio web a un costo económico.

ADVERTENCIA: Esto podría dañar su sitio de WordPress. Cree una caja de arena para probar esta configuración antes de aplicarla en un sitio web en ejecución.

Autoptimizar

Autooptimize es el mejor complemento para generar CSS crítico, es decir, eliminará la mayoría de las partes inútiles en los códigos CSS. También optimiza los códigos JS y los minimiza.

Opciones de JavaScript

Algunas opciones pueden dañar su sitio web. He colocado con colores qué configuraciones probablemente desee aplicar a su sitio web. Los verdes tienen menos probabilidades de dañar su sitio web y los rojos tienen más probabilidades de hacerlo. Si sabe que su sitio web se rompe, busque el .js que está roto e intente agregarlo a "excluir de la optimización automática". Esto solucionará la mayoría de los problemas.

¿También agregar JS en línea?
¿Archivos JS agregados? ¿Agregar todos los archivos JS vinculados para que se carguen sin bloqueo de procesamiento? Si esta opción está desactivada, los archivos JS individuales permanecerán en su lugar pero se reducirán.
¿También agregar JS en línea? Deje que Autoptimize también extraiga JS del HTML. Advertencia: esto puede hacer que el tamaño de la caché de Autoptimize crezca rápidamente, así que habilítelo solo si sabe lo que está haciendo.
Forzar JavaScript en ? Cargue JavaScript temprano, esto puede corregir algunos errores de JS, pero hace que el JS se bloquee.
Excluir scripts de Autoptimize:
Una lista separada por comas de los scripts que desea excluir de la optimización, por ejemplo, "lo que sea.js, otro.js" (sin las comillas) para excluir esos scripts de ser agregados por Autoptimize. Importante: Autoptimize aún minimiza los archivos excluidos no minificados, a menos que la opción de "misc" esté desactivada.
¿Añadir envoltura de prueba? Si sus scripts se rompen debido a un error de JS, es posible que desee probar esto.

Opciones CSS

Opciones CSS

¿CSS en línea y diferido?
¿Archivos CSS agregados? ¿Agregar todos los archivos CSS vinculados? Si esta opción está desactivada, los archivos CSS individuales permanecerán en su lugar pero se reducirán.
¿También agregar CSS en línea? Marque esta opción para que Autoptimize también agregue CSS en el HTML.
Generar datos: ¿URI para imágenes? Habilite esto para incluir pequeñas imágenes de fondo en el CSS mismo en lugar de como descargas separadas.
¿CSS en línea y diferido? Inline "CSS por encima del pliegue" mientras se carga el CSS principal optimizado automáticamente solo después de la carga de la página. Consulte las preguntas frecuentes para más información. Esto se puede automatizar completamente para diferentes tipos de páginas en el CriticalCSS lengüeta.
¿Inline todo CSS? Insertar todo el CSS es una manera fácil de evitar que el CSS bloquee el procesamiento, pero generalmente no se recomienda porque el tamaño del HTML aumenta significativamente. Además, podría empujar las metaetiquetas a una posición en la que, por ejemplo, Facebook y Whatsapp ya no las encontrarán, rompiendo miniaturas al compartir.

No se recomienda "inline all css" porque aumenta los tiempos de carga. Si bien se puede cargar “async”, se carga en la página y puede retrasar el tiempo para pintar por primera vez.

Optimización HTML

¿Optimizar el código HTML?
¿Mantener los comentarios HTML? Habilite esto si desea que los comentarios HTML permanezcan en la página.

No sugiero que no guarde los comentarios html, porque tienden a no tener ninguna funcionalidad.

Optimización de imagen

Haga que su sitio sea significativamente más rápido con solo marcar un par de casillas de verificación para optimizar y cargar sus imágenes de forma diferida, ¡incluida la compatibilidad con WebP!

Optimizar imágenesOptimice las imágenes sobre la marcha y sírvalas desde el CDN global de Shortpixel. Obtenga más amor de Google y mejore la velocidad de carga de su sitio web optimizando sus imágenes disponibles públicamente sobre la marcha (también en el formato de imagen WebP de "próxima generación") por ShortPixel y luego almacenados en caché y servidos rápidamente desde la CDN global de Shortpixel. Regístrate ahora para recibir un bono de 1000 + 50% más créditos de optimización de imagen independientemente del tráfico utilizado. Se pueden adquirir más optimizaciones de imagen a partir de $4.99.Preguntas? Eche un vistazo al Preguntas frecuentes de ShortPixel! Solo funciona para sitios / imágenes que están disponibles públicamente. El uso de esta función está sujeto a las Condiciones de uso y Política de privacidad.
¿Imágenes de carga diferida?La carga diferida de imágenes retrasará la carga de imágenes no visibles para permitir que el navegador cargue de manera óptima todos los recursos para la página "arriba de la página" primero.

Esto debería permitirle configurar su sitio web. Fácil y sin muchos problemas. Este complemento también es gratuito.

Como dije, asegúrese de probar a fondo. Esto podría romper algunas funciones.

Optimizaciones adicionales

Fuentes de GoogleDejar como esta
Eliminar fuentes de Google
Combinar y enlazar en la cabeza (las fuentes se cargan rápido pero bloquean el renderizado), incluye pantalla: intercambio.
Combinar y precargar en el encabezado (las fuentes se cargan tarde, pero no bloquean el renderizado), incluye pantalla: intercambio.
Combine y cargue fuentes de forma asincrónica con webfont.js
Eliminar emojisElimina el CSS en línea de los 'emojis centrales' de WordPress, el JavaScript en línea y un archivo JavaScript que de otro modo no se optimizaría automáticamente.
Quitar cadenas de consulta de recursos estáticosEliminar cadenas de consulta (o más específicamente ver parámetro) no mejorará el tiempo de carga, pero podría mejorar las puntuaciones de rendimiento.

Ahora viene la parte complicada. Esta parte solo debe realizarse si está seguro de lo que está haciendo.

Vaya a tools.pingdom.com y pruebe su sitio web.

Guía sencilla para optimizar Wordpress en menos de 1 hora. 1

Verás algo así. Ahora, esto le dirá qué enlaces, si es que hay alguno, debe volver a conectar o buscar previamente dns. Este es un buen ejemplo, porque nuestro sitio web solo se vuelve a conectar a las fuentes de Google. Esto significa que se utilizará menos tiempo para realizar búsquedas de DNS en otros sitios web. En este caso no es muy relevante pero en este ejemplo podría poner:

fonts.gstatic.com, fonts.googleapis.com

También asegúrese de escuchar las estadísticas de velocidad de Google, ya que le indicará si es necesario precargar alguna solicitud. Si sugieren que precargue cualquier .js o .css, póngalo en "Precargar solicitudes específicas" y escríbalo. En mi caso, pondré la fuente como sugieren que se cargue primero para mejorar el tiempo de procesamiento.

Una de las ventajas adicionales de utilizar la optimización automática es que le brinda la oportunidad de generar archivos de caché. Esto puede crear muchos archivos, así que asegúrese de que sea útil para su sitio web. Además, cada vez que elimine el caché, se necesitará más para cargar su sitio web. Si tiene muchas visitas en su sitio web, esto puede hacer que se bloquee y use cantidades anormales de CPU.

Rendimiento

Este complemento cuesta. Pero vale absolutamente la pena.

Opciones

Seleccione las opciones de rendimiento que le gustaría habilitar.

Desactivar emojisHabilitar
Deshabilitar incrustacionesHabilitar
Quitar cadenas de consultaHabilitar
Deshabilitar XML-RPCHabilitar
Eliminar jQuery MigrateHabilitar
Ocultar versión de WPHabilitar
Eliminar el enlace wlwmanifestHabilitar
Eliminar enlace RSDHabilitar
Quitar ShortlinkHabilitar
Desactivar fuentes RSSHabilitar
Eliminar enlaces de fuentes RSSHabilitar
Desactivar Self PingbacksHabilitar
Deshabilitar la API RESTHabilitar
Eliminar enlaces de API RESTHabilitar
Deshabilitar DashiconsHabilitar
Desactivar Google MapsHabilitar
Desactivar fuentes de GoogleHabilitar
Deshabilitar el medidor de seguridad de la contraseñaHabilitar
Desactivar ComentariosHabilitar
Eliminar URL de comentariosHabilitar
Carga diferidaBETAHabilitar
Usar nativoHabilitar
Desactivar latidoPredeterminado Desactivar en todas partes Solo permitir al editar publicaciones / páginas
Frecuencia de latidos del corazón15 segundos (predeterminado) 30 segundos 45 segundos 60 segundos
Limitar revisiones de publicacionesPredeterminado Desactivar revisiones posteriores 123451015202530
Intervalo de guardado automático1 minuto (predeterminado) 2 minutos 3 minutos 4 minutos 5 minutos
Cambiar URL de inicio de sesiónPodría ser útil por motivos de seguridad.

Esto dependerá en gran medida de su sitio web. Si tiene mapas de Google o no necesita fuentes de Google, haga lo que sea mejor para su sitio web. De igual forma, pruebe a fondo y asegúrese de que no afecte a ninguna funcionalidad.

En la pestaña Extras habilite el "administrador de scripts".

Esta parte es muy útil, porque en Google a menudo recibe una alerta que dice "eliminar archivos css que no se utilizan" o "eliminar archivos js que no se utilizan"

Guía sencilla para optimizar Wordpress en menos de 1 hora. 2

En este ejemplo, verá algunos archivos que casi no se utilizan. Dicen que tiene un posible ahorro de 10,3 de 10,6 KB, lo que significa que probablemente sea seguro eliminarlo. Pruebe a fondo al hacerlo. Los Perfmatters nos ayudan aquí porque puede desactivarlos directamente.

Vaya a http://yourwpdomain.com/yourwpdirectory/fileyouwanttoedit? perfmatters

o solo agrega ? perfmatters a la página que desea optimizar.

Aquí verá los scripts que se están cargando.

Guía sencilla para optimizar Wordpress en menos de 1 hora. 3

Algunos tendrán la siguiente información:

Guía sencilla para optimizar Wordpress en menos de 1 hora. 4

Allí puede combinarlo con las sugerencias de Google de .css no utilizados. Desactive todos los CSS no utilizados que considere que no afectarán a su sitio web. También haz eso con los archivos .js. Pero como dije antes, tienes que verificar la configuración por configuración y página por página para ver cuál funciona y cuál no. Este complemento eliminará todos los archivos .js y .css no utilizados, lo que aumentará drásticamente su rendimiento.

Shortpixel - Optimización de imagen

Shortpixel es uno de los mejores optimizadores de imagen del mercado. Esta es mi configuración:

optimización de imagen de píxeles cortos

En mi caso personal, me importa mucho la calidad de la imagen. En consecuencia, decido cambiar el tamaño de mis imágenes a 1025 × 1024. La mayoría de las configuraciones presentadas aquí serán extremadamente útiles para su sitio web.

En la configuración avanzada de la página, le sugiero que habilite estas opciones:

Conversión de CMYK a RGB Ajuste los colores de sus imágenes para la visualización de la pantalla de la computadora y el móvil. Las imágenes para la web solo necesitan formato RGB y convertirlas de CMYK a RGB las hace más pequeñas.
Imágenes WebP:Entregue las versiones WebP de las imágenes en el front-end:
También crea Versiones de WebP de las imágenes, gratis.
 Utilizando la sintaxis de la etiqueta
 Global (procesa todo el búfer de salida antes de enviar el HTML al navegador)
Optimizar imágenes Retina También optimice las imágenes de Retina (@ 2x) si existen. Si tiene un complemento de Retina que genera imágenes específicas de Retina (@ 2x), ShortPixel también puede optimizarlas, junto con las imágenes y miniaturas de la biblioteca multimedia normal.  Más información 
Optimizar otros pulgares También optimice las miniaturas no listadas si las encuentra. Algunos complementos crean miniaturas que no están registradas en los metadatos, sino que solo las crean junto con las otras miniaturas. Deje que ShortPixel los optimice también. 
Optimizar archivos PDF Optimice automáticamente los documentos PDF.

Debe tener mucho cuidado si desea habilitar "Convertir imágenes PNG a JPEG" porque a veces puede alterar las imágenes que desea con un fondo transparente.

También debe habilitar estos:

Optimizar los medios al subirlos Optimice automáticamente los elementos de la biblioteca multimedia después de que se carguen (recomendado). De forma predeterminada, ShortPixel optimizará automáticamente todas las imágenes y archivos PDF recién cargados. Si desmarca esta opción, deberá ejecutar Bulk ShortPixel o ir a la Biblioteca de medios (en la vista de lista) y hacer clic en el (los) botón (s) "Optimizar ahora" del lado derecho. 
Proceso en el front-end Optimice automáticamente las imágenes agregadas por los usuarios en el front-end. Marque esta opción si tiene usuarios que agregan imágenes o documentos PDF desde formularios personalizados en el front-end. Esto podría aumentar la carga en su servidor si tiene muchos usuarios conectados simultáneamente.

Caché de LiteSpeed

Este complemento solo debe usarse si tiene un servidor Litespeed. Reduce drásticamente los tiempos de respuesta.

Vaya a Caché y habilite todas las configuraciones en "configuración de control de caché". Habilite igualmente la configuración de control de caché. Para obtener más información debe dirigirse al Sitio web de Litespeed.