Author Archives: rene manqueros

13 Abr 2018

15 minutos

Mediano

Optimizacion de WordPress – Imagenes

Optimizacion WordPress

Introducción

A nadie le agrada un sitio lento, para nuestros usuarios esto genera frustración y que no compren nuestros productos, no vuelvan a visitar nuestra página, o lo peor: se vayan con la competencia! Por consecuencia esto genera pérdidas económicas, definitivamente algo que queremos evitar a toda costa. En otras ocasiones, el tiempo de carga es aceptable pero consume demasiados recursos, dependiendo del servicio de hosting que tengan (principalmente los de cloud), esto puede subir el costo de operación (algo que también debemos evitar).

La gran mayoría de las veces que los clientes se acercan a agencias para ayuda con el rendimiento de su website, éstos sugieren rehacer todo el sitio por conseguir un contrato mas grande (o simple incompetencia) y para los que no tienen presupuesto, tiempo o la capacidad de rehacer todo el proyecto significa que se quedan atrapados con su sitio lento.

En esta guia documentaré como optimizo un sitio basado en WordPress, solo haré uso de herramientas gratuitas, de esta manera, optimizar sus sitios no representará costo adicional (recuerden: gastar = malo), debido a que es un cliente real, no publicaré el nombre del website, pero daré la mayor cantidad de información para que puedan replicar las técnicas en sus proyectos.

Requisitos

Para este tutorial necesitarás:

  • Un sitio lento 🙂
  • Chrome

Paso 1 – Identificar la causa

Lo primero es identificar dónde esta nuestro cuello de botella y atacar ese punto, para esto haremos uso de nuestra primer herramienta: Pingdom – https://tools.pingdom.com/ 

En el primer campo pondremos la url de nuestro sitio, en el segundo definimos desde donde se haran las pruebas, aqui practicamente no nos importa mucho la opción siempre y cuando en cada prueba al mismo sitio seleccionemos la misma ubicación, de lo contrario tendremos factores externos afectando nuestras métricas. Algunas personas sugieren seleccionar la ubicación mas cercana a tu servidor/datacenter para que no aumente el tiempo por la distancia, otros que el mas cercano a donde estan tus usuarios para tener una idea de como lo perciben ellos y otros mas dicen que el mas lejano para ver el peor de los casos, todos ellos, estan equivocados, lo que buscamos es constancia simplemente en todas nuestras pruebas. Mas adelante explicare cómo evaluar la percepción del usuario respecto a su ubicación.

Damos click a “start test” y despues de un momento tendremos un resumen similar a este:

El cual, a pesar de darnos muchos datos, no nos da la información que buscamos aun, el unico métrico que tomaremos por lo pronto sera  el “load time” y eso con mucho criterio pues depende de cientos de factores que luego explicaré. Lo mas importante en este momento está un poco mas abajo y algo escondido, en lo que es se llama “HAR” (HTTP Archive) o “Waterfall report”, el cual nos dice como se esta comportando realmente el sitio:

El primer elemento siempre sera la página “base”, la cual manda llamar todo lo demas: incluir css, js, tags de terceros, imagenes, etc. Este primer elemento, es todo lo que se ejecuta del lado del servidor, una vez cargado este archivo, el usuario podría estar viendo “algo” en lo que cargamos el resto del sitio, tener este elemento en un tiempo de carga bajo es clave para dar una percepción de sitio rápido, no obstante, en este caso, tarda .5 segundos, un poco menos del 20% de nuestro tiempo total, ergo, no hay valor en enfocarnos en el codigo del lado de servidor (contenido dinámico) por ahora.

Entonces, si el contenido dinámico no es el problema, nuestro siguiente candidato será el contenido estático (CSS/JS/Imagenes), si buscamos la siguiente tabla en nuestro reporte:

Veremos que el 92.5% del contenido de la página está compuesto por imágenes y el total de nuestro sitio está en 16.92 Megabytes, los cuales fueron transferidos en 2.68 segundos, dándonos una tasa de transferencia de 50Mbits/segundo para el que realizó la prueba (pingdom). Esta velocidad es demasiado alta para el usuario promedio, en los hogares el promedio andará en 10Mbits/s y en movil 3-4Mbits/s, asi que los 2.68s que reporta pingdom, para un usuario comun, seran de 12-18 segundos (fueron 18 en mi dispositivo móvil con 4G) dependiendo de su conexión (esta es una de las razones por las que el tiempo que nos reporta pingdom no es representativo de la experiencia de usuario).

Si regresamos al reporte de Waterfall, ordenamos los archivos por tamaño (en order descendente), veremos que las primeras 10 imágenes juntan mas de 10MB, si optimizamos esas imágenes, tendremos el mayor beneficio.

Paso 2 – Optimizar imágenes

Existen muchas opciones para optimizar el tamaño de las imágenes, la primera seria redimensionarlas: empecemos por investigar en dónde se está usando la imagen, y qué dimensiones tiene el contenedor:

En mi caso, la primer imagen está siendo usada en un contenedor de 242×242 pixeles y la imagen tiene unas dimensiones de 1500×1500, asi que tomaré esas imágenes y las redimensionare a 242×242, una vez hecho esto, ejecuto de nuevo la prueba en pingdom para ver qué tanto mejoramos:

Nuestra total se fue a un poco menos de la mitad, repetimos el proceso con 5 imágenes mas y:

Ahora estamos en 5.77 MB, será mucho mas rápido descargar esto y también se vera un menor consumo de bandwidth en la factura del hosting.

Conclusión

1 – El tiempo de carga al final de las optimizaciones, segun pingdom fue de 2.04 segundos, como ya vimos este número no es exactamente lo que el usuario experimentará, para eso usaremos otras herramientas (analizadas en otro post). Este sitio en móvil pasó de 18 segundos a 4 segundos lo cual para el usuario se transformó de una experiencia frustrante a algo “aceptable”.

2 – Hay muchas optimizaciones adicionales que se pueden hacer a las imágenes (smushing, lazy loading, etc), sin embargo hay que reprioritizar y pivotear nuestra estrategia de optimización constantemente, el impacto que tuvieron las primeras 15 imágenes en nuestro tiempo de carga, no lo tendrán las siguientes 15, en ese momento tenemos que ir de nuevo al primer paso de identificar nuestro nuevo cuello de botella y solucionarlo.

11 Abr 2018

10 minutos

Facil

Instalacion de WordPress

cpanel WordPress

Introducción

WordPress es una de las plataformas de administración de contenido con la mayor cantidad de usuarios en el mundo, con ella podemos crear Blogs, tiendas en línea, foros, sistemas de administración escolar y muchas cosas mas, todo esto de manera gratuita; por ser de las herramientas con mas instalaciones, esto significa que recibe colaboraciones de gente alrededor del mundo proveyéndola con mejoras de funcionalidad, seguridad y rendimiento constantemente.  En este tutorial explicaremos el sencillo proceso para instalarla con las herramientas que provee ArkHosting.

Requisitos

Para este tutorial necesitaras:

  • Servicio de hosting con cPanel.
  • 10 minutos.
  • Un navegador web (nosotros usaremos Chrome, pero cualquiera funciona).

Paso 1 – Acceder a cPanel

En nuestro navegador, iremos a cPanel, escribiendo el nombre de nuestro dominio seguido de “/cpanel”, ejemplo: https://demo.com/cpanel.

Una vez ahi iniciaremos sesion con las credenciales que recibimos de nuestro proveedor de hosting:

Paso 2 – Seleccionar el instalador de WordPress

Una vez dentro de cPanel, procederemos a seleccionar el instalador de WordPress:

y luego confirmamos que deseamos instalar WordPress:

Paso 3 – Configuración de la instancia de WordPress

El instalador nos dará una lista de valores a ajustar, solo debemos prestar atención a las primeras cuatro secciones en este momento y el resto podríamos ajustarlos después:

Sección Opción Descripción
Software Setup Información base de donde sera instalado WordPress, estos son los únicos valores que no es posible cambiar después (fácilmente).
Choose Protocol El tipo de conexión al sitio HTTP (inseguro) o HTTPs (seguro), todos los paquetes de ArkHosting manejan HTTPs de manera gratuita así que seleccionaremos esta opción.
Choose Domain El dominio al que instalaremos WordPress.
In Directory El directorio en el cual sera instalado, esto es útil cuando tenemos varias plataformas en un mismo hosting, como deseamos que el WordPress sea el punto principal, dejaremos este campo en blanco.
Site Settings  Opciones de personalización del sitio
 El título de nuestro sitio
Site Description  Una descripción corta
Admin Account  Credenciales para el administrador del sitio
 Admin Username  Nombre de usuario para el adminsitrador
 Admin Password Contraseña para el administrador
 Admin Email Email al cual recibirá notificaciones
 Choose Language
 Select Language  Idioma en el cual se instalará WordPress
 Select Plugin(s)  Plug-ins a habilitar durante la instalación
 Limit Login Attempts (Loginizer) Limita la cantidad de intentos fallidos al iniciar sesión, esto es una capa adicional de seguridad en nuestra instancia de WordPress
 Advanced Options  Ajustes del servidor de base de datos, por el momento no modificaremos esto.
 Select Theme Instalar una plantilla diferente a la predetermina de WordPress.
 Email installation details to Email a donde se enviara un resumen de toda esta información.

Paso 4 – Sitio web y Panel administrativo

Una vez instalado, tendremos el siguiente resumen, con las URL’s del sitio y de su panel administrativo:

 

Usamos nuestras credenciales como administrador:

Y ya podemos empezar a crear contenido en nuestro sitio!

Conclusión

WordPress es una gran opción para usuarios de todos los niveles, su instalación es muy sencilla y rápida, lo cual lo hace muy accesible, y a su vez tiene una gran cantidad de plug-in’s y temas que nos permiten extender la funcionalidad base y crear prácticamente cualquier tipo de herramienta que deseemos.