Uno de los aspectos más importantes de la construcción de un sitio web en WordPress es la optimización. A menudo, se construye un sitio limpio y sin problemas. Sin embargo, una optimización real de un sitio web WordPress muchas veces queda fuera del proceso, quizás porque el diseñador del sitio web simplemente no entiende la optimización de WordPress, o tal vez piense que simplemente no importa. Cualquiera que sea la razón, la optimización de un sitio web en WordPress es imprescindible.
¿Qué es la optimización de un sitio web en WordPress?
Cuando hablo de la optimización de WordPress, me refiero a una serie de mejoras o arreglos que hacen que un sitio web funcione mejor. Estas mejoras en un sitio web incluyen:
- Estilos y Scripts agregados, minificados y almacenados en caché
- Inyectar CSS en el encabezado de la página
- CSS en línea
- Mover y aplazar scripts al pie de página
- Minimizar HTML
- Optimizar Imágenes
- Imágenes de carga diferida
- Optimizar fuentes de Google
- JavaScript asíncrono no agregado
- Quitar WordPress Core Emoji Cruft
Lo más probable es que la lista anterior tenga muchas cosas que no entiendas y eso está bien. A menos que sea un desarrollador, la optimización de los problemas anteriores se pasará por alto y nunca se realizará.
Dicho esto, existe un excelente plugin que puede realizar todo lo anterior y optimizar su sitio web en WordPress con solo unos pocos clics. En la mayoría de los casos, el proceso aumentará el rendimiento. Y esto es ideal tanto para los visitantes como para los motores de búsqueda.
Echemos un vistazo a cómo optimizar un sitio web en WordPress usando el plugin Autoptimize WordPress.
Optimizar un sitio web en WordPress con Autoptimize
El plugin Autoptimize es un plugin de optimización (todo en uno), para sitios web realizados en WordPress. Esta es una forma fantástica de optimizar su sitio, especialmente si no comprende mucho de programación.
Primero, debe instalar y activar el plugin Autoptimize desde su panel de administración de WordPress.
Una vez que el plugin se haya instalado y activado, haga clic en Ajustes > Autoptimize y eso lo llevará a la página de configuración del plugin de optimización.
Ahora que está en la página de configuración principal del complemento Autoptimize, echemos un vistazo a cómo debería verse la configuración.
Autoptimize: configuración del plugin
La página de configuración proporciona muchas opciones para el plugin. La forma en que lo complete y lo que decida hacer se basará en lo que desee. Realmente no hay una forma incorrecta de completar la configuración. Es una cuestión de cómo quiere que funcione su WordPress.
Siéntase libre de jugar con las configuraciones hasta que obtenga los resultados que desea.
Cuando llegue a la página de configuración principal, verá cuatro pestañas:
- JS, CSS y HTML
- Imágenes
- Extra
- optimizar más
Opciones de JavaScript
Haga clic en la pestaña JS, CSS y HTML para comenzar. El primer cuadro le presenta opciones de JavaScript. Estos incluyen la capacidad de optimizar el código JavaScript mediante:
- Unificar archivos JS
Agregamos todos los archivos JS enlazados para que hacer que se carguen sin bloquear la visualización - Incluir JS incrustados
Permite que Autoptimize también extraiga el JS del HTML (no recomendable ya que puede hacer que la caché de Autoptimize crezca rápidamente) - Forzar JavaScript en <head>
Cargar pronto el JavaScript (no recomendable ya que hace que el JS bloquee la visualización) - Añadir bloques try-catch
Si se rompen tus scripts agregados debido a un error de JS, puede que quieras probar esto, pero normalmente no se recomienda. - No agregar sino aplazar
Los archivos JS individuales serán minimizados y aplazados, haciendo que no bloqueen la visualización. - Scripts a excluir de Autoptimize
Una lista de scripts, separada por comas, que no quieres optimizar. Por ejemplo, «cualquiercosa.js, otracosa.js» (sin las comillas). Importante: cuando está activo «agregar archivos JS» los archivos excluidos no minimizados continúan siendo minimizados por Autoptimize, salvo que esa opción esté desactivada en «varios». - Eliminar el JavaScript sin usar
Autoptimize combina el JavaScript de tu tema y plugins, pero no sabe qué se usa y qué no. Si Google PageSpeed Insights detecta JavaScript no usado, plantéate usar un plugin como «Plugin Organizer» o similar para gestionar qué JavaScript se añade y dónde.
Marque la primera casilla titulada «Optimizar código JavaScript» y el resto de las opciones se abrirán para que pueda trabajar.
Opciones de CSS
Desplácese un poco hacia abajo hasta las Opciones de CSS y haga clic en «Optimizar el código CSS» para habilitarlo. Verá opciones que incluyen:
- Unificar archivos CSS
¿Unificar todos los archivos CSS enlazados? Si esta opción está desactivada los archivos CSS seguirán en su lugar pero minimizados. - Incluir CSS incrustados
Marca esta opción para que Autoptimize también tenga en cuenta los CSS incrustados en el código HTML. - Crear data:URIs de imágenes
Activa esto para incluir las imágenes de fondo pequeñas en el propio CSS en vez de como descargas separadas. - Elimina el CSS que bloquea la visualización
Incrusta el «CSS antes de hacer scroll» mientras se carga el CSS principal optimizado automáticamente solo después de la carga de la página. - Combinar todos los CSS
Incrustar todo el CSS es un modo sencillo de frenar el CSS que bloquea la visualización, pero normalmente no se recomienda debido a que el tamaño del HTML se incrementa significativamente. Adicionalmente, podría mover las etiquetas meta a una posición en la que, por ejemplo, Facebook y Whatsapp no las encontrarían, rompiendo las miniaturas al compartir. - CSS a excluir de Autoptimize
Una lista separada por comas del CSS que quieras excluir de la optimización. Importante: los archivos excluidos no minimizados continúan siendo minimizados por Autoptimize, salvo que esa opción esté desactivada en «varios».
Nuevamente, puede completar esta área como mejor le parezca. Sin embargo, un par de cosas para recordar al completar las Opciones CSS del plugin:
- No todas las opciones son buenas para sitios que son más grandes. Para sitios más pequeños, sí. Para sitios más grandes con mucho tráfico, probablemente sea una buena idea no habilitar las opciones de «CSS en línea».
- Probablemente no debería habilitar la opción «Generar datos: URI para imágenes». En realidad, esto puede resultar en una disminución del número de solicitudes cuando su sitio web se está cargando, pero obligará a que las imágenes se sirvan a través de su servidor de alojamiento en lugar de un CDN.
Opciones de HTML y CDN
Desplácese un poco más hacia abajo y verá dos áreas de opciones más para el plugin: las opciones HTML y CDN. Estos dos cuadros se explican por sí mismos.
Para el área HTML, puede optar por habilitar esto y optimizar el código HTML o dejarlo fuera. La opción CDN le permite ingresar su URL raíz de CDN para habilitar CDN para archivos optimizados automáticamente. Si elige hacer esto, continúe y complete esa URL.
Información de caché y opciones misceláneas
Las últimas dos áreas de opciones para esta pestaña en particular incluyen la sección Información de caché y Opciones misceláneas. El área de información de caché simplemente muestra la información de caché actual.
Otras opciones tiene la opción de seis selecciones más para elegir. Activa o desactiva las que creas convenientes.
Nota: no olvide hacer clic en «Guardar cambios» o «Guardar cambios y vaciar caché» para asegurarse de que todas las opciones seleccionadas se mantengan.
Imágenes
Ahora haga clic en la pestaña «Imágenes» para pasar al área donde puede optimizar las imágenes de WordPress usando el complemento Autoptimize. Verás que hay dos secciones.
- Optimizar Imágenes
- Carga diferida de imágenes
Adelante, haga sus selecciones y siga adelante.
Extra
Si está interesado en algunas de las opciones adicionales que proporciona este plugin, haga clic en la pestaña «Extra» y eche un vistazo para ver si hay algo que desee habilitar.
Optimizar Google Fonts nunca es una mala idea, ni eliminar los emojis principales de WordPress. Ambas opciones acelerarán el sitio web.
Optimizar más
Si está interesado, la pestaña «Optimizar más» le mostrará otros plugins y selecciones de plugins que harán que Autoptimize sea más potente cuando esté integrado. Estos mejorarán aún más la optimización del sitio web en WordPress.
Optimizar el rendimiento de WordPress no tiene por qué ser difícil. Simplemente necesita las herramientas adecuadas y unos pocos clics para lograr la optimización del sitio web de WordPress.
Espero que este artículo le haya mostrado lo fácil que puede ser optimizar su sitio web de WordPress.
Si buscas Hosting WordPress completo para todos los tipos de sitios web
- Aprovécha la instalación automática de WordPress y del potente WordPress Starter para crear un sitio web totalmente funcional en unos minutos.
- Transfiere tu sitio WordPress en solo unos pocos clics con el plugin gratuito SiteGround Migrator o solicita una migración profesional del sitio web realizada por expertos.
- Actualiza automáticamente tu aplicación y plugins WordPress y aplicando parches contra exploits comunes relacionados con WordPress a través de su firewall de seguridad. También obtienes el plugin SiteGround Security todo en uno preinstalado para proteger tu sitio web de ataques de fuerza bruta, hackeos comunes, fugas de datos y mucho más.
- Obtén una solución integral de rendimiento WordPress que acelere drásticamente tus sitios. Está construida sobre la plataforma Google Cloud e incluye un CDN gratuito y el plugin SiteGround Optimizer gratuito para un potente almacenamiento en caché, optimizaciones front-end e imágenes, control de versiones de PHP y más. En GrowBig y planes superiores, también obtienes un servicio PHP un 30% más rápido.
