¡16 maneras de acelerar su sitio web de WordPress hoy!
Publicado: 2014-12-31Acelerar su sitio web es la única forma garantizada de obtener más tráfico y realizar más ventas.
En 2010, Google confirmó que la velocidad del sitio es uno de los más de 200 indicadores que afectan las clasificaciones de búsqueda. Sus datos muestran que cuando las páginas se cargan lentamente, las personas pasan menos tiempo. Sin embargo, la mayoría de nosotros ponemos poco énfasis en hacer que nuestros sitios web sean más rápidos.
Tal vez ajustar los disparadores de velocidad internos de su sitio web de WordPress es demasiado desalentador.
Para arrojar luz sobre cómo reducir el tiempo de carga a la mitad, invitamos a Stavros Papadakis a presentar su proceso para acelerar los sitios web de los clientes.
Si su tiempo de carga es de más de 3 segundos o el tamaño de su página es de más de 2 MB, eso puede ser un gran problema que le está costando dinero, tanto en ventas perdidas como en tarifas del servidor.
Existen muchas herramientas en línea gratuitas, como WebPageTest, GTmetrix, Google PageSpeed Insights y Pingdom, que pueden ayudarlo a identificar problemas que provocan tiempos de carga lentos y una mala experiencia de usuario en su sitio.
Aquí le mostramos cómo hacerse cargo del rendimiento de su sitio web.
1. Habilitar la compresión
Comprimir sus archivos CSS y Javascript ayudará a los navegadores a descargarlos más rápido.
La compresión Gzip puede reducir fácilmente el tamaño de los archivos de más de 200 KB (sin comprimir) a menos de 40 KB (comprimidos). Mientras su servidor tenga habilitada la compresión, aprovéchela.
Puede estar seguro de que sus usuarios experimentarán una drástica aceleración de su sitio tanto para computadoras de escritorio como para dispositivos móviles al habilitar la compresión en su servidor.
Agregue el siguiente fragmento de código en su archivo .htaccess para habilitar la compresión de archivos estáticos.
AddOutputFilterByType DEFLATE aplicación/x-httpd-texto php/texto php/texto html/texto sin formato/texto css/aplicación xml/texto x-javascript/aplicación javascript/texto javascript/x-js
BrowserMatch ^Mozilla/4 gzip-solo-texto/html
BrowserMatch ^Mozilla/4\.0[678] sin gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Encabezado agregar Vary User-Agent
2. Optimiza tus imágenes
Las imágenes son las principales culpables de ralentizar un sitio web. Optimice siempre sus imágenes (especialmente las que superan los 50 KB) antes de subirlas a su sitio web.
La forma óptima de optimizarlas es utilizar Photoshop o cualquier otro software de manipulación de imágenes. Guarde imágenes para la web con una calidad de imagen de hasta el 60 %.
También debe usar imágenes progresivas para archivos JPG porque la representación progresiva de imágenes proporciona una experiencia de usuario más fluida.
Verifique las siguientes dos imágenes, se ven iguales pero la de la izquierda no está optimizada y tiene 80 KB y la de la derecha está optimizada y solo tiene 18 KB, 4 veces más pequeña.
Imagen no optimizada
3. Mueva los archivos Javascript al pie de página
Aunque las bibliotecas de Javascript como jQuery, Mootools y Prototype son increíbles porque amplían la funcionalidad de su sitio web, también pueden bloquear la visualización de sus páginas.
Los navegadores no comienzan a cargar el contenido hasta que se hayan descargado todos los archivos Javascript en el encabezado de la página.
Una manera fácil de resolver este problema es mover sus archivos Javascript, aquellos que no son necesarios durante la presentación inicial de la página, desde el encabezado hasta el pie de página de la página.
Si usa Wordpress, puede mover las llamadas de script de header.php a footer.php en su tema y usar true como el cuarto parámetro cada vez que use la función wp_enqueue_script.
Mueva los scripts JS al pie de página de la página
4. Asegúrese de tener habilitado KeepAlive
Apache (el servidor más utilizado para planes de alojamiento compartido en empresas de alojamiento de bajo costo) tiene una gran "característica" llamada KeepAlive que mantiene abiertas las conexiones para más de una solicitud HTTP.
Asegúrese de que KeepAlive esté activado en su empresa de alojamiento.
Si tiene acceso a su archivo httpd.conf, habilite KeepAlive asegurándose de tener "KeepAlive On" en él; de lo contrario, simplemente agregue el siguiente código en su archivo .htaccess.
<ifModule mod_headers.c> Conjunto de encabezados Keep-alive de conexión </ifModulo>
Habilite KeepAlive para su sitio
5. Fusionar archivos CSS: pequeños archivos CSS en línea
Los navegadores solo manejan tantas solicitudes HTTP al mismo tiempo. Cuando se alcanza este límite, algunos archivos esperan mientras otros se descargan.
Al fusionar todos sus archivos CSS en un solo archivo CSS, la página se procesa mucho más rápido.
Si tiene archivos CSS que pesan menos de 2 KB, debe incorporarlos en línea en lugar de realizar una solicitud HTTP adicional.
Wordpress tiene algunos complementos excelentes, como Autoptimize y Better WordPress Minify, que pueden ayudarlo a fusionar o incluso alinear sus hojas de estilo CSS.
Combinar archivos CSS y colocarlos en línea
6. Habilitar el almacenamiento en caché
El almacenamiento en caché mejora drásticamente el tiempo de carga de las páginas que no cambian con tanta frecuencia.
Al habilitar el almacenamiento en caché en su sitio, su código no sigue generando la misma página una y otra vez. De esta manera, la experiencia del usuario es mucho mejor y su servidor puede manejar más tráfico.
W3 Total Cache, WP Super Cache y WP Fastest Cache son solo una breve selección de complementos gratuitos de Wordpress que brindan diferentes tipos de almacenamiento en caché, por ejemplo, almacenamiento en caché de páginas, almacenamiento en caché de bases de datos y almacenamiento en caché de objetos, entre otros.
El complemento W3 Total Cache proporciona almacenamiento en caché de páginas, bases de datos y objetos
7. Utilice una red de entrega de contenido
Ya sea que use un CMS como Wordpress, Joomla, Magento, Drupal o un sitio PHP o HTML personalizado, le recomiendo configurar una red de entrega de contenido (CDN).
Una CDN es un sistema distribuido de servidores desplegados en múltiples centros de datos a través de Internet.
Cuando un cliente visita su sitio, el contenido estático, como imágenes y archivos CSS, se sirve desde el servidor que está geográficamente más cerca de ellos, por lo que se procesan mucho más rápido.
Por cierto, la carga en su servidor también se reduce drásticamente gracias a un CDN.
CloudFlare es un proveedor gratuito de CDN y DNS, entre otros. MaxCDN también es una opción excelente y asequible para optimizar el tiempo de carga de su sitio. Ambos son tan buenos como pueden conseguir.
CloudFlare es una red de entrega de contenido gratuita
8. Minimice la cantidad de solicitudes HTTP
Cuantas más solicitudes HTTP tenga, más lento será el tiempo de carga de su sitio.
Combine sus archivos CSS, fusione archivos Javascript y combine imágenes en sprites de datos, entre otros, para realizar la menor cantidad posible de solicitudes HTTP.
Cuando trabajo en el sitio de un cliente, uno de mis principales objetivos es minimizar la cantidad de solicitudes HTTP cargadas por página.
Combine archivos CSS, use sprites de datos o URI de datos para reducir la cantidad de solicitudes HTTP
9. Elija el tipo de archivo correcto para sus imágenes
Utilice JPG como predeterminado. Es el tipo de archivo de carga más pequeño y rápido.
Use PNG solo para imágenes con texto (JPG rasteriza el texto y lo hace borroso) o si necesita un fondo transparente.
Minimice o incluso elimine los archivos GIF pesados porque pueden ralentizar drásticamente el tiempo de carga de su sitio.
Aunque las siguientes dos imágenes se ven iguales, hay una gran diferencia entre ellas. El de la izquierda está guardado como archivo png y pesa 102KB y el otro es un archivo JPG con un tamaño de 18KB, así es, ¡6 veces más liviano!
Imagen guardada como PNG
Imagen guardada como JPG
10. Corrige tus errores 404
Lo crea o no, cualquier archivo faltante genera un error HTTP 404 y definitivamente ralentizará el tiempo de carga de su sitio.
Siempre verifique si hay errores 404 durante la representación de sus páginas para lograr el tiempo de carga más rápido.
Si su "cascada" (la forma en que el navegador representa su sitio) se ve así (cuidado con las filas rojas), entonces los errores 404 están arruinando el tiempo de carga de su sitio.
Los errores 404 pueden arruinar el tiempo de carga de su sitio
11. Cuida el tamaño de tu página
Aunque es tentador mostrar una gran cantidad de contenido en cada página, debe intentar mantener el tamaño de su página al mínimo.
Esto es aún más crucial para los móviles. Tener que cargar un sitio de 2 MB a través de un dispositivo móvil en una conexión 3G es una receta para el desastre. Tenga en cuenta que a los usuarios no les gusta esperar más de 2 o 3 segundos para que se muestre una página.
¿Una nueva imagen agrega valor al sitio? De lo contrario, no debe agregarlo a su sitio. Tan simple como eso.
Reducir el tamaño de página
12. Escalar imágenes
Nunca escale las imágenes sobre la marcha en HTML. Cree una miniatura de la imagen que necesita en las dimensiones exactas que se utilizará en sus páginas.
Por ejemplo, si tiene una imagen de 1200 px x 675 px y desea usar una versión "a escala" de 480 px x 270 px, cree una nueva versión redimensionada de la imagen original y utilícela en su lugar.
Esta imagen se vincula a una versión "grande" de la imagen utilizando una miniatura escalada en lugar de cambiar las dimensiones de la imagen en HTML.
Miniatura (imagen a escala) Enlaces a imagen de gran tamaño
13. Aproveche el almacenamiento en caché del navegador
Google recomienda un tiempo de caché mínimo de una semana y preferiblemente de hasta un año para los activos que cambian con poca frecuencia.
Establezca una política de almacenamiento en caché para todas las respuestas del servidor a los archivos estáticos (imágenes, CSS y Javascript) para que el navegador pueda determinar si puede reutilizar un archivo previamente cargado o no.
Esto generalmente se hace agregando este fragmento de código en el archivo .htaccess para planes de alojamiento compartido
<ifmodule mod_expires.c>
ExpiresActive On
ExpiresByType text/html “acceso más 7200 segundos”
ExpiresByType image/gif “acceso más 864000 segundos”
ExpiresByType image/jpg “acceso más 864000 segundos”
ExpiresByType image/png “acceso más 864000 segundos”
ExpiresByType text/css “acceso más 864000 segundos”
ExpiresByType texto/javascript "acceso más 864000 segundos"
Aplicación ExpiresByType/javascript “acceso más 864000 segundos”
</ifmodule>
14. Optimiza tu base de datos
Siempre que tenga un sitio basado en una base de datos (que incluye WordPress y todos los demás sitios basados en CMS), asegúrese de optimizar su base de datos.
Supervise su código para consultas lentas. Si está en un VPS o servidor dedicado, habilite el almacenamiento en caché de consultas y optimice la configuración de su servidor de base de datos.
Aunque la optimización completa de la base de datos puede ser un proceso realmente complicado y lento, phpMyAdmin le ofrece algunas opciones básicas de optimización al “optimizar sus tablas”.
Optimice su base de datos a través de phpMyAdmin
15. Seleccione sabiamente su empresa de hosting
Elija un plan de alojamiento que satisfaga las necesidades de su sitio.
La mayoría de las empresas de alojamiento aplican limitaciones a sus planes de alojamiento compartido y alojan cientos de sitios por servidor para mantener las tarifas al mínimo.
Tienes lo que pagas. Si tiene un sitio de comercio electrónico, un CMS pesado, mucho tráfico o picos de tráfico, evite los planes de alojamiento compartido.
Recomiendo encarecidamente la empresa de alojamiento de Wordpress administrada por WPEngine para cualquier sitio de comercio electrónico de WordPress o cualquier sitio de WordPress con picos de tráfico.
16. Contrata a un experto
Mi objetivo es brindarle suficiente información para comenzar a optimizar la velocidad de su sitio web.
Pero como sabe, es mejor contratar a un experto cuando es importante hacerlo bien.
Uno de mis clientes me contactó para optimizar el tiempo de carga de su sitio web. Las páginas del sitio web tardaban mucho en cargarse y los visitantes se quejaban porque la experiencia del usuario era mala.
Actualicé WordPress a su última versión, migré el sitio web a una empresa de alojamiento confiable y apliqué ajustes de optimización de velocidad para lograr el mejor tiempo de carga posible.
El tiempo de carga pasó de 8,2 a 2,6 segundos. El primer byte y el tiempo de inicio de procesamiento se optimizaron a 0,147 y 0,384 segundos respectivamente y la cantidad de solicitudes HTTP se redujo de 96 a 78. Google PageSpeed Insights también se optimizó al 88 %.
La tasa de rebote disminuyó alrededor de un 10 % en unas pocas semanas. El cliente y, lo que es más importante, los usuarios del sitio web estaban contentos y mantener el sitio se convirtió en una gran experiencia.
En resumen, optimizar el tiempo de carga de su sitio es una situación beneficiosa para usted y sus clientes potenciales.
¡Imagínese lo felices que estarán sus usuarios al ver tiempos de carga súper rápidos!
Si quieres contratarme, estaré encantado de ayudarte. ¡Vea mi cartera y contácteme en AwesomeWeb hoy!
Conclusión
Todo mejora cuando tu sitio carga más rápido.
Google te posiciona más alto. Los usuarios son más felices. Las tasas de rebote disminuyen. Las tasas de conversión aumentan. Y haces más ventas.
Deja de perder tráfico y dinero. Comience a optimizar el tiempo de carga de su sitio hoy.
Hoy ofrezco un paquete especial de $497 para lectores de IncomeDiary. Esta es la mitad de mi tarifa normal. Si su sitio cumple con mis calificaciones mínimas, me encargaré de todo lo que se indica en esta publicación. Mencione IncomeDiary en su mensaje y me pondré en contacto con usted en breve. ¡Comienza el 2015 con el sitio web más rápido que puedas tener!
Contratame aquí o encuentra otros freelancers de optimización de velocidad en AwesomeWeb aquí.