02 Jun

Optimizando la velocidad de mi sitio joomla WPO

El mejorar la velocidad de una web y tener optimizado sus recursos, no es solo bueno para que google haga un posicionamiento web óptimo, sino que está demostrado que si una página dura más de 4 segundos en cargar, el usuario no interactúa con ella.

Personalmente soy partidario de mientras menos extensiones instaladas en nuestro joomla mucho mejor. Es más, prefiero insertar directamente código si es necesario a instalar una extensión.
Es necesario para tener optimizada la velocidad de nuestra páginas varias cosas, que yo haría antes de ponerme a instalar como un loco estas extensiones.
  • Comprobar que el código javascript no tiene fallos.
  • Disminuiría el número de archivos css y javascript poniéndolos en el mismo archivo.
  • Validaría el código html y css
  • Disminuiría imágenes
Todas estas cosas al final las haces mientras que construyes la web y a la larga para mi entender son muy beneficiosas. Pero hay extensiones joomla que también hacen cosas parecidas.
Los problemas es que no tienes tanto control como si trabajaras directamente con el código, la compresión y unión la hace una máquina, posiblemente haya cosas que no se puedan validar o cosas que no tengas luego control sobre ellas.

JCH Optimize

Uno de mis preferidos. Es muy similar a RokBooster y ocurre algo similar, dado que es bastante complicado poner todo a punto, pero el resultado cuando lo usas son sitios que vuelan!

Link

 

Joomla! en sí mismo no es lento, pero en parte, uno de los puntos más positivos de Joomla! es que detrás, hay una gran comunidad desarrollando todo tipo de plugins, componentes, módulos y si no los usamos con cuidado pueden afectarnos el rendimiento de nuestro sitio web. En esta imagen podemos analizar los tiempos de carga de Joomla! por defecto.
¿Cómo analizo el rendimiento de mi sitio?
  • Les recomiendo que realicen la evaluación en este sitio: http://analyze.websiteoptimization.com/ . Genera un informe bastante completo.  Ingresamos nuestra URL, hacemos clic en enviar, escribimos el código que aparece en pantalla y hacemos clic en analizar.
¿Qué puntos son importantes del informe que genera http://analyze.websiteoptimization.com/?
  • Las solicitudes HTTP. (HTTP Requests)
  • Tamaño total del sitio. (Total Size)
  • Cantidad de HTML e imágenes CSS
  • Número de archivos CSS y JS.
  • Tamaño de las imágenes.
  • Archivos JS duplicados
Es importante leer todas las notas al final del informe ya que también nos indican que aspectos podemos mejorar de nuestro sitio.
Una vez que hemos analizado nuestro sitio, debemos revisar que podemos arreglar desde el mismo administrador de Joomla.
GZip
  • Joomla! Utiliza PHP para crear los HTML de nuestro sitio. Estos archivos pueden ser comprimidos mediante GZIP, esto puede reducir hasta en un 90% el tamaño de los archivos. Lo que se traduce en una disminución del ancho de banda utilizado y el tiempo de carga.
  • Lo activamos desde la Configuración Global en la pestaña de Server. Ahora, debemos comprobar que de  efectivamente esté comprimido el sitio. En esta dirección http://www.gidnetwork.com/tools/gzip-test.php   ingresamos el URL y hacemos clic en Check y esto nos generará un informe donde nos indicará el estado del GZip.
Cache
  • Otro aspecto importante es activar el caché para esto nos dirigimos igualmente la Configuración Global, en pestaña System. Ahora no basta con eso, recordemos activar el plugin en el administrador de plugins. Se llama System-Cache.
¿Qué elementos podemos evitar para mejorar el rendimiento de nuestro sitio?
Número de módulos: Entre menos mejor. No hay que sobrecargar el sitio con módulos innecesarios. Cada módulo significa una solicitud HTTP, en incluso pueden cargar su propio CSS o JS.
Componentes: Desinstale los componentes que no usa. Escoja un editor, no tenga dos o tres. Escoja el más eficiente.
Plugins: Evalúe los beneficios de instalar un plugin. Desinstale los que no necesita. Por ejemplo, si usa el editor JCE junto con sus utilidades (JCE Utilities) tenga en cuenta los siguientes efectos del JCE Utilities Plugin en Joomla!:
  • 11 nuevas solicitudes HTTP
  • Tiempo de carga aumenta 50 segundos a una velocidad de 56k
  • 3 elementos JS adicionales y 2 CSS.
  • Aumenta el tamaño total de una página en 225396 bytes.
Monitoreo en tiempo real: No hace falta tener plugins de monitoreo en Joomla! Mejor use el servicio externo que da Google Analytics. Todos los módulos/complementos de terceros ralentizan la carga de la página. http://www.google.com/analytics/. Desactive las estadísticas de Joomla.
Sobre los templates:
  • Trate de usar siempre un template liviano y simple. Analice un cada plantilla por separado enhttp://analyze.websiteoptimization.com/ antes de subirla y usarla. Si no puede cambiar el template recorte y optimice los aspectos del informe que considere convenientes.
Optimización del CSS.
¡Cuidado! Al igual que en cualquiera de los pasos que he venido describiendo, realice una copia de respaldo del sitio por cualquier eventualidad.
Optimizaciónd de Java Script
Imágenes HTML:
Nunca le pida al navegador que cambie el tamaño de una imagen por usted. Si usted inserta una imagen grande y le cambia el tamaño entonces el navegador va a cargar la imagen completa y luego va a reducirla por lo que aumenta el tiempo de carga. Es mejor subir las imágenes del tamaño que es y ya. Recuerde que puede utilizar la opción en Photoshop de guardar la imagen para Sitio Web, esto le va a reducir bastante el tamaño al archivo.
Imágenes CSS:
Entre más simple la plantilla, menos imágenes CSS. Si su plantilla ofrece distintos colores, estilos, módulos y menús, deberíamos manualmente editar los archivos CSS o el index.php de nuestra plantilla para que carguen únicamente los scripts necesarios.  Por defecto la mitad de las imágenes CSS pueden ser desactivadas o sus referencias pueden ser removidas sin ningún efecto en la apariencia o presentación de la plantilla.
¡Haga una limpieza de su sitio!
  • Elimine todos los componentes/módulos/plugins no deseadas o no usadas
  • Revise que no haya tablas PHP que ya no utilice.
  • Optimice o repare las tablas de la base de datos por medio de PhpMyAdmin.
  • Analice su sitio con Google Webmaster y revise que no haya errores 404 ya que estos pueden tener un efecto negativo en la velocidad del sitio.
  • Combine los archivos CSS y JS para reducir las solicitudes HTTP y el tamaño del archivo.
  • Esto se complica un poco pero puede usar dos extensiones: Minify (trabaja desde el directorio de raíz) o Com_minify.
  • Use la técnica CSS Sprite. Estos son dos artículos que pueden serles de utilidad.
http://websitetips.com/articles/css/sprites/

http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/

Como lograr que tu sitio web cargue en 1.29 segundosCreado por @Helvecio

Antes de comenzar: Ejecuta tu sitio web a través GTMetrix. Anota tu grado actual y luego mírelo como mejora. Lo bueno es que GTMetrix hace también un seguimiento de su historial, así que puedes ver en un gráfico tus mejoras.

Paso 0: Haga un resguardo (backup) completo de su sitio

Algunas de estas recomendaciones pueden dañar tu sitio web, por lo que tenga en cuenta hacer resguardos frecuentemente antes de hacer cualquier cambio.

Paso 1: Marca un objetivo a alcanzar que sea ambicioso, y no pares hasta que lo veas cumplido

Esta es una necesidad absoluta. Si no tienes un objetivo a lograr, entonces no podras lograr nada. Por ejemplo, una meta ambiciosa es reducir el tiempo de carga del sitio a menos de 1,5 segundos y obtener al menos el 85% tanto en PageSpeed ​​y YSlow.
El resultado final es un tiempo de carga de 1.29s, el tamaño total de la página de 149KB ​​y el total de las solicitudes son de 28. No está mal 🙂
¿Como obtenemos este resultado?

Paso 2: Habilitar la caché de Joomla por defecto

Esto es bastante simple, sin embargo, es muy eficaz. Sobre todo porque en lugar de correr las mismas consultas una y otra vez a la base de datos, la caché guarda una copia de la página y lo sirve en un archivo temporal. Esto alivia la carga en el servidor y mejora el tiempo de carga general de su servidor. Para habilitar la caché, haga lo siguiente, vaya a:
Sistema > Configuración Global > Sistema
Cambie la cahé a: Activado – Caché progresiva y ajuste la Duración de la caché a 60 minutos, especialmente si su contenido no cambia con demasiada frecuencia.

Paso 3: Habilitar el plugin Sistema – Caché

Este plugin almacena en caché cada página completa de su sitio y, opcionalmente, usará el mecanismo para almacenar páginas en la caché del navegador. Usar la caché del navegador tiene mucho sentido, especialmente porque no tendrás que volver a descargar algunos archivos de imagen una y otra vez. El navegador utilizará la copia local y se requiere por lo tanto una menor transferencia de datos, trayendo consigo que tus páginas se cargen más rápido. Esto es especialmente efectivo para las cosas tales como el CSS y las imágenes de su sitio web. Esta es también la funcionalidad estándar de Joomla permitido a través de lo siguiente:
Extensiones > Gestor de plugins, filtre por tipos de plugin “System” y habilite el plugin Sistema – Caché. También debe ir a las opciones básicas del plugin y poner en “Sí” la opción “Usar la caché del navegador”.

Paso 4: Aproveche la caché del navegador a nivel del servidor

Esto es muy similar al Paso 3, y está estrechamente relacionado con el almacenamiento en caché del navegador. Sin embargo esto se hace a nivel de servidor. Básicamente, tendrá que recomendar al navegador que almacene en caché ciertos tipos de archivos durante un período específico de tiempo. Google PageSpeed ​​sugiere, al menos, un mes. Para ello, tendrá que editar el archivo htaccess. El valor de la edad máxima es de 1 mes en cuestión de segundos:
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
Otros valores que puede tener en cuenta:
1 Año:
Header set Cache-Control "max-age=29030400, public"
1 Semana:
Header set Cache-Control "max-age=604800, public"
También puede ser que elija para almacenar en caché menos o más tipos de archivos, pero los anteriores son los archivos estáticos más comunes que pueden y deben ser cacheados.

Paso 5: Habilitar la compresión GZIP

Este paso asegura que el contenido que se genera se comprima antes de su envío. La lógica es muy simple, se necesita mucho menos tiempo para comprimir y descomprimir el contenido en lugar de transferir el contenido sin comprimir. Esto es algo que también se puede hacer fácilmente en Joomla 3 haciendo lo siguiente:
Sistema > Configuración global > Servidor
Cambie la “Compresión ‘Gzip’ de páginas” a “Sí”.

Paso 6: Instalar JCH_Optimizer

JCH Optimizer contiene un número enorme de cosas recomendadas por PageSpeed ​​y da como resultado un gran impulso en su grado PageSpeed​​. El problema que se puede encontrar es que esto puede romper algunas de las funcionalidades de su sitio web. Pisa con cuidado con las opciones que permiten. Puede ser que pueda permitir casi todas las optimizaciones con muy pocas excepciones, pero a lo mejor, puede que tenga que jugar por un tiempo para encontrar la configuración óptima.

Paso 7: Minimizar el contenido de su sitio

Esto es MUY importante. Realizar y mantener su sitio absolutamente delgado. Este puede ser el paso en donde más se demore. Puede ser hasta de una semana, todo depende del tamaño de su sitio.
Nota: Ir con cuidado aquí. Realice copias de seguridad completas antes de eliminar del núcleo de Joomla! componentes, módulos o plugins.
Haga esto hasta que se sienta agotado. Retire todas las cosas que no se está utilizando. Incluso cosas que viene por defecto, pero que no va a necesitar, como la plantilla predeterminada que no usará nunca más. Desinstalalos a todos, no sólo desactivarlos nadamas. Obsesivamente centrarse en cosas que no necesitas, quite todos los componentes adicionales y combine módulos y plugins si es posible. Por ejemplo, para los botones sociales utilizen 1 plugin para todos.
Si tienes costumbre de insertar código html, ponga gran parte de ellos en un único módulo, tanto como sea posible. Eliminar categorías adicionales en los foros, minimizar el número de elementos en los menús hasta el máximo necesario. Eliminar contenidos antiguos. Mezclar y combinar categorías, menús y cualquier cosa que sea necesario. Su objetivo debe ser conseguir las cosas a un mínimo absoluto necesario para su sitio . Haga esto obsesivamente por varias semanas. Ir en una juerga de eliminación, cortar y quitar, desactivar y desinstalar. Concéntrese en su sitio para que sea tan delgado como sea humanamente posible sin romper nada.

Paso 8: Minimizar el número total de peticiones y el tamaño de las mismas

Elimina imágenes adicionales que son innecesarias. Utiliza imagenes de alguna fuente externa, de las imágenes que utilizas en páginas web externas y enlázalas a tu sitio (esto reducirá en número de búsquedas de DNS que necesita el navegador del cliente, ya que la carga de las imágenes tienen un impacto importante en la velocidad de subida de la página). Analiza detalladamente la peticiones que se realizan desde tu sitio web, con GTMetrix o las heramientas de rendimiento de Pingdom.
GTMetrix también tiene una función interesante que permite optimizar el tamaño de todas las imágenes. Guarda las versiones que han sido optimizadas y utiliza estas versiones optimizadas en tu sitio web.

Paso 9: Servir contenido de un CDN

Content Delivey Networks son servidores que cachean una copia de las partes estáticas del sitio y la sirven de forma óptima y mucho más rápido que tu servidor siempre que sea posible para tus visitantes. Esto le dará un nuevo impulso enorme a la velocidad de tu página. Si no puedes pagar un CDN, sitios como Cloudflare tienen un plan gratuito, que servirá a las necesidades de la mayoría de los sitios web pequeños.

Paso 10: Siga todas las recomendaciones de PageSpeed​​, YSlow

Tanto PageSpeed ​​como YSlow tienen una serie de recomendaciones detalladas, como especificar un conjunto de caracteres por defecto y asegurar que hayas especificado dimensiones a la imagen (especificar el ancho y la altura de cada imagen en tu sitio web). Para cualquier contenido que se aloja en tu sitio, siga cada uno de ellos a la carta. Si usted no tiene idea de lo que hay que hacer, Google es tu amigo, lea sobre ello y entienda de que se trata y lleve a cabo esa acción en tu sitio web. Evite malas solicitudes, es decir, asegurese de que no hay imágenes o archivos que están vinculados incorrectamente. Algunos pueden ser muy difícil de hacer a menos que realmente sepa lo que está haciendo, por ejemplo CSS sprites, carga script de terceros, como Facebook, Twitter, Adsense y Google Analytics de forma asíncronica. Hay muchas optimizaciones bastante fáciles que puedes hacer.
Si mantiene una postura optimizadora, debe finalmente llegar a un punto en que su sitio se convierte en la velocidad del rayo.
Share this

Leave a reply