Paul Benítez
Documento: Acelera-
Edición: 1
Página: 0 of: 24
Actualizado a: 21-03-2017
Para: Administrandowp.com
Contenido Pág.
1 INTRODUCCIÓN ....................................................................................................................... 2
2 EL TIEMPO DE CARGA .............................................................................................................. 2
3 WORDCAMP MADRID 2017 ..................................................................................................... 3
3.1 ¿POR QUÉ ES IMPORTANTE OPTIMIZAR EL RENDIMIENTO DE UNA WEB? .................................................. 4
3.2 LOS 10 MANDAMIENTOS DE WPO...................................................................................................... 5
3.2.1 WPO: Los 10 mandamientos ......................................................................................................... 6
3.2.2 ¿Cuál es el tiempo de carga óptimo u objetivo?.......................................................................... 6
3.2.3 Dibujo ilustrativo de la ponencia por Javier Alonso Gomez ...................................................... 7
4 MEDIR ....................................................................................................................................... 7
4.1 PINGDOM TOOLS............................................................................................................................... 8
4.1.1 Performance grade ......................................................................................................................... 9
4.1.2 Load time ......................................................................................................................................... 9
4.1.3 Faster than ..................................................................................................................................... 10
4.1.4 Page size ......................................................................................................................................... 10
4.1.5 Requests ......................................................................................................................................... 10
4.1.6 Tested from .................................................................................................................................... 11
4.2 GTMETRIX ...................................................................................................................................... 12
4.2.1 Punto 1 ........................................................................................................................................... 13
4.2.2 Punto 2 ........................................................................................................................................... 13
4.2.3 Punto 3 ........................................................................................................................................... 14
4.3 WEBPAGETEST ................................................................................................................................ 15
5 ANALIZAR ................................................................................................................................15
5.1 PINGDOM TOOLS............................................................................................................................. 16
5.2 GTMETRIX ...................................................................................................................................... 16
5.3 WEBPAGETEST ................................................................................................................................ 17
6 TOMAR ACCIÓN ......................................................................................................................18
6.1 EL PROVEEDOR DE HOSTING ............................................................................................................. 18
6.2 LA COMPRESIÓN GZIP ..................................................................................................................... 18
6.3 LA COMPRESIÓN DE IMÁGENES ......................................................................................................... 19
6.4 LA CACHE ........................................................................................................................................ 19
6.5 LA MINIFICACIÓN DE ARCHIVOS HTML, CSS Y JS ................................................................................... 19
6.5.1 La minificación de archivos html ................................................................................................ 19
6.5.2 La minificación de archivos css ................................................................................................... 19
6.5.3 La minificación de archivos js ..................................................................................................... 19
Página: 1 of: 24
Página: 2 of: 24
1 Introducción
Esta guía es para emprendedores digitales -normalmente unipersonales- dueños o
futuros dueños de un negocio online que emplean WordPress.
La metodología que te voy a explicar consiste en 3 fases: medir, analizar los resultados y
tomar acciones.
2 El tiempo de carga
Para facilitarte las cosas vas a centrarte en el tiempo de carga para evitar sumergirte
en demasiados asuntos técnicos que se escapan del propósito de esta guía pero que
por otro lado intentaré abordar de una forma coloquial para que me entiendas
perfectamente.
Para que te hagas una idea y desde un punto de vista diferente podemos decir que tu
sitio web es el resultado de un conjunto de tecnologías que cooperan entre sí y el
tiempo de carga es un factor directamente relacionado con el funcionamiento del
conjunto de ellas.
Página: 3 of: 24
Todas estas tecnologías se pueden optimizar para que su desempeño sea el más
apropiado.
Como dueño de tu activo digital eres el responsable y director de orquesta para que la
pieza musical resultante suene lo mejor posible. En esta guía lo mejor posible consistirá
en reducir a su mínima expresión el tiempo de carga.
Como te decía, trataré de ser lo más llano posible y evitaré terminología técnica para
que puedas entenderme y beneficiarte al máximo de lo que aquí te voy a explicar.
¡Vamos allá!
Tras la ponencia, hable personalmente con Pablo y le comenté que con su permiso
tomaría prestadas algunas diapositivas para crear parte de este ebook como, por
ejemplo, la que te muestro en el siguiente punto.
Página: 4 of: 24
Fuente: wpostats.com
Estamos de acuerdo en que tú objetivo no es tener una web como Amazon, ni como
AliExpress, ni como Netflix, pero estarás de acuerdo conmigo en que cuanto mejor sea
el tiempo de carga de tu sitio tendrás mejores resultados en términos de negocio, igual
que Amazon, AliExpress y Netflix.
Otro dato adicional. En 2015, una encuesta realizada por Google Webmasters en Google
Plus se preguntaba:
Página: 5 of: 24
En conclusión. Una web que carga rápido ofrece una mejor experiencia de usuario y
esto siempre redundará en mejores resultados para tu activo digital tanto si es en su
versión de escritorio como en su versión para dispositivo móvil.
1. Te dejo el enlace de la ponencia grabada (30 min) de Pablo López titulada: Los 10
mandamientos de WPO por si quieres verla.
2. Te voy a mencionar dos de las diapositivas que me parecen relevantes
3. Te dejo una copia del dibujo a modo de resumen de la charla que Javier Alonso
Gómez - @oyabun hizo. Una pasada.
¡Vamos allá!
Página: 6 of: 24
Página: 7 of: 24
Según la imagen superior, el tiempo de carga optimo debe ser inferior a 1,2 segundos
como normal general, es decir, que tu objetivo será acercarte todo lo que puedas a esa
cifra o mejorarla.
4 Medir
Antes de sumergirnos en los detalles de los 10 mandamientos lo primero que vas a
hacer es medir y para ello te voy a mostrar tres herramientas muy populares y útiles
que tienes a tu alcance: pingdom tools, gtmetrix y webpagetest.
Con el resultado que te facilitan estas herramientas podrás determinar si lo que has
hecho hasta ahora en términos de WPO está bien, está regular o lo puedes mejorar. 😊
Acelera-WordPress.V.1.docx www.administrandowp.com pág. 7 de 24
Documento: Acelera-
WordPress.V.1.docx
Acelera WordPress Edición: 1
Página: 8 of: 24
Las tres tienen un propósito común que consiste en facilitarte un montón de datos del
rendimiento de tu sitio. Te adelanto que en muchas ocasiones no es sencillo para un
emprendedor digital interpretar los resultados que arrojan.
Es más, tengo que reconocer que a mí personalmente me costó mi tiempo entender los
datos de sus informes, pero con dedicación, estudio y experimentación he conseguido
comprenderlos y sacarles partido, por lo que ahora estoy en mejor disposición para
ayudarte. También es cierto que hay cosas que aún desconozco.
Dicho esto, te recuerdo que te vas a centrar en la métrica relativa al tiempo de carga
(load time) para mantener tu foco y no perderte con el resto de datos y métricas que
igualmente intentaré explicarte para que tengas una mejor compresión.
En esta guía me voy a centrar en el “Summary” o resumen que contiene 6 claves que
son las que te muestro en la imagen ilustrativa inferior.
Página: 9 of: 24
Este indicador analiza como tu sitio las cumple. Alcanzar un valor de 85 es sinónimo de
que tu sitio tiene un buen rendimiento y es el valor de referencia a tener en cuenta.
Página: 10 of: 24
Cuanto más pequeño sea este valor mejor para ti y para tus lectores. Este valor es el
que vas a tratar de mejorar con las acciones que lleves a cabo.
Quédate con la idea de que cuanto menos pese tu sitio web será mejor, pero sin
volvernos locos.
4.1.5 Requests
Este indicador responde a la pregunta: ¿Cuántas peticiones son necesarias para que
cargue mi web?
Página: 11 of: 24
En los puntos 1, 2 y 3 te marco tres de los puntos de los que te he hablado para que
veas como se interrelacionan entre ellos y su sentido cuando ves el conjunto.
Página: 12 of: 24
4.2 GTmetrix
URL: https://gtmetrix.com
GTmetrix es una herramienta que te lo pone más sencillo que pingdom tools
limitándote a que le introduzcas la URL de tu sitio web y presiones sobre el botón
“Analyze”.
En realidad, el informe es más completo y te ofrece más detalles, pero quiero centrarme
solo en los que ves en la imagen para que la cosa no se complique mucho.
Página: 13 of: 24
4.2.1 Punto 1
Esta parte del informe te indica la fecha, la hora, la localización y la versión de
navegador y PageSpeed empleada en la prueba.
4.2.2 Punto 2
Esta parte del informe te devuelve dos indicadores, el relativo a tu puntuación de
PageSpeed y de YSlow.
Un valor de A al 94% indica que tu sitio cumple al 94% todas las recomendaciones de
PageSpeed, lo que está muy próximo al valor 100% lo que es sinónimo de una
puntuación excelente.
Respecto al valor B al 83% indica que tu sitio cumple al 83% todas las recomendaciones
de YSlow, lo que igualmente está muy próximo al valor 100% lo que es sinónimo de una
puntuación muy buena.
Quédate con la idea de que cuantos más altos sean estos valores mejor.
Página: 14 of: 24
4.2.3 Punto 3
Esta parte del informe te devuelve tres indicadores que son: el tiempo de carga total,
(Fully Loaded Time) el tamaño total de página, (Total Page Size) y el número de
solicitudes (Request)
Quiero que te fijes en el indicador tiempo de carga total (Fully Loaded Tome) para que lo
tomes como referencia. Las acciones que lleves a cabo irán encaminadas a reducirlo lo
máximo posible.
Recuerda que este indicador está calculado en base a la localización del test, que en este
caso se realiza desde Vancouver, Canadá.
En resumen, quédate con la idea de que cuanto menores sean estos valores mejor.
4.2.3.1 ¿Qué significan las flechas verdes que están a la derecha de los valores?
Si colocas el puntero del ratón encima de dichas flechas te aparece un valor indicándote
tu rendimiento relativo comparado con el resto de sitios web que han sido analizados
por GTMetrix en los últimos 30 días.
Esta información es muy útil en el sentido de que te permite compararte con el resto del
mundo y conocer tu posición. Si tienes flechas verdes en todos los casos significa que
tus puntuaciones son mejores en comparación con el resto del mundo.
Página: 15 of: 24
4.3 Webpagetest
URL: http://www.webpagetest.org/
5 Analizar
El proceso de analizar los resultados está implícito en la explicación que te he
proporcionado de las herramientas para medir: Pingdom Tools, Gtmetrix y
Webpagetest.
Página: 16 of: 24
La página web que estás mostrando a tus lectores, en este caso la home, cumple al 84%
la recomendaciones de rendimiento web de PageSpeed, tiene un tiempo de carga de
678 milisegundos que son necesarios para procesar las 66 peticiones (5) que pesan 641
Kilobytes (4), esto es, en poco más de medio segundo tu home se muestra a tus lectores
lo que es un 94% más rápido que el resto de sitios analizados desde Stockhom.
5.2 GTMetrix
Página: 17 of: 24
Tu home tiene una puntuación del 94% y del 83% en PageSpeed y en YSlow lo que
supone una nota A y una nota B, amboss resultados muy buenos por encima de la
media del resto de páginas analizadas.
Para cargar la página han sido necesarias 49 solicitudes, que en total suman 602
kilobytes que han tardado en cargar 3,6 segundos, datos mejores todos ellos que el
resto de páginas analizadas.
5.3 Webpagetest
Por favor, toma la decisión de alojar tu web en un buen servidor, aquel que te facilite
una respuesta lo más inmediata posible (First Byte Time).
Observa que haga buen uso de las conexiones persistentes (Keep-alive Enabled) o en su
defecto, pon tu los medios para configurarlas.
Preocúpate siempre de que tus imágenes estén comprimidas, todas y cada una de ellas
(Compress Images) y preocúpate también de que defines como corresponde la
caducidad de la cache de tus contenidos estáticos (Cache static content).
Por último, si tienes bien trabajado todo lo anterior, preocúpate de distribuir todo tu
contenido haciendo uso efectivo de un CDN (Effective use of CDN) o lo que es lo mismo,
una red de distribución de contenidos.
Acelera-WordPress.V.1.docx www.administrandowp.com pág. 17 de 24
Documento: Acelera-
WordPress.V.1.docx
Acelera WordPress Edición: 1
Página: 18 of: 24
6 Tomar acción
No lo vas a tener difícil porque el que proveedor que los emplea se encarga de
especificarlo en sus mensajes de marketing.
que en la herramientas anteriores se indica como Time to first Byte, es decir, el tiempo
que tarda en procesarse el primer byte desde que se solicita hasta que llega a la
pantalla de ordenador.
Cuando más reducido sea ese valor mejor será el tiempo de carga de tu web.
Página: 19 of: 24
6.4 La cache
Te voy a mostrar como un único plugin puede ayudarte a materializar todas las técnicas
mencionadas de una sola vez.
Esta técnica puede resultar delicada y en función de la herramienta que emplees puede
suponer más un problema que un beneficio. Hay que tener cuidado aquí.
Página: 20 of: 24
6.6 Recomendaciones
El sector tecnológico evoluciona constantemente y en ese sentido te conviene emplear
todas aquellas tecnologías que asentadas en el mercado y estables te benefician en
términos de tiempos de carga.
No emplearlas suele ser más por desconocimiento que por otra cosa. Si estas
tecnologías están disponibles en el mercado y te suponen un beneficio, pues no tiene
sentido no hacer uso de ellas.
• Php7
• Http2
Para detalles más precisos te remito a la Wikipedia, pero me gustará que te queden con
la idea de que es tu proveedor de hosting quien determina, define y configura que
versión por defecto de php ha de funcionar en sus servidores.
Al escribir estas líneas -Mayo de 2017- la versión 7 de php no suele ser la versión
configurada por defecto en la mayoría de los proveedores de hosting. Habla con tu
proveedor para salir de dudas.
Esta operación puede ser terriblemente sencilla o no, depende de las facilidades que te
proporcione tu hosting.
En el caso del proveedor que recomiendo como primera opción, SiteGround, que como
norma general van un pasito por delante, la versión por defecto de php que corre en
Acelera-WordPress.V.1.docx www.administrandowp.com pág. 20 de 24
Documento: Acelera-
WordPress.V.1.docx
Acelera WordPress Edición: 1
Página: 21 of: 24
todos sus en todos sus servidores es php7 desde Enero de 2017. En este sentido,
siempre que tenga oportunidad te invitaré a pasarte a SiteGround.
Hay otra forma que consiste en revisar dentro de las opciones de tu cpanel.
Otro modo de hacerlo es en emplear un archivo php tal y como que te indico en la
sección de trucos.
Para que me entiendas, en tu web tienes que ver esto cuando empleas tu navegador.
Página: 22 of: 24
6.10 Trucos
Comprobar versión de php que empleas
Bench.php