![Page 1: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/1.jpg)
Optimización onpage avanzadaVÍCTOR GUERRERO. CONGRESO WEB 2017
![Page 2: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/2.jpg)
QUIÉN SOY
• Mi nombre: Víctor Guerrero.
• Trabajo en: VGS tecnologías web como CTO.
• Me puedes escribir a: [email protected].
• Me puedes llamar al: 976 472 539.
• Te ofrecemos: www.vgsystems.es.
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 3: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/3.jpg)
GUIÓN
1. Conceptos.
2. Análisis previos.
3. Optimización paso 1: Imágenes.
4. Optimización paso 2: Peticiones.
5. Optimización paso 3: Caché en el lado del cliente.
6. Optimización paso 4: Lado del servidor.
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 4: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/4.jpg)
GUIÓN
1. Conceptos.
2. Análisis previos.
3. Optimización paso 1: Imágenes.
4. Optimización paso 2: Peticiones.
5. Optimización paso 3: Caché en el lado del cliente.
6. Optimización paso 4: Lado del servidor.
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 5: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/5.jpg)
OPTIMIZACIÓN ONPAGE
Para optimizar nuestro sitio web podemos mejorar todos aquellos
factores que dependen de nosotros mismo e influyen directamente en
el tiempo de carga.
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 6: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/6.jpg)
FACTORES DE OPTIMIZACIÓN
Para reducir el tiempo de carga de nuestro sitio web, principalmente
podemos incidir en:
• Número de peticiones necesarias para cargar el sitio.
• Número de imágenes y tamaño de estas.
• Caché de recursos en el lado del cliente.
• Velocidad, optimización y calidad del servidor.
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 7: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/7.jpg)
PETICIONES
Son todas aquellas llamadas necesarias para visualizar por completo
un sitio web.
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 8: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/8.jpg)
PERO, ¿QUÉ ES UNA PETICIÓN?
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Fuente: igvita.comThe fastest request is a request not made.
![Page 9: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/9.jpg)
¿POR QUÉ REDUCIR LAS PETICIONES?
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
• Los navegadores tienen un
máximo de peticiones
capaces de ser procesadas
en paralelo.
• Google Chrome solo 6.
![Page 10: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/10.jpg)
WATERFALL
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Minimizamos el efecto cascada
![Page 11: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/11.jpg)
APROVECHA RECURSOS
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Al reducir las peticiones de ficheros, dispondremos
de peticiones extra para cargar el resto del sitio
web de forma más rápida.
Acortamos tiempo de carga.
![Page 12: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/12.jpg)
BUT, WHAT IS "FAST ENOUGH"?
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
https://www.igvita.com/posa/high-performance-networking-in-google-chrome/
![Page 13: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/13.jpg)
VELOCIDAD DEL SERVIDOR
Se trata del motor del coche. Sin una buena máquina, con los recursos
adecuados para nuestro sitio web, los resultados no se verán
realmente reflejados.
Los factores de mayor impacto son:
• Hardware adecuado y actual.
• Memoria RAM suficiente para cachear recursos.
• Ancho de banda.
• En el caso de servidores VPS cuidado con los “vecinos”.
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 14: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/14.jpg)
CACHE EN EL LADO DEL CLIENTE
Gracias a las cabeceras HTTP de respuesta que enviamos tras recibir
una petición, podemos indicar al navegador del usuario que recursos
no cambiarán entre cada petición, principalmente:
• Ficheros CSS.
• Fichero JS.
• Tipografías.
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 15: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/15.jpg)
GUIÓN
1. Conceptos.
2. Análisis previos.
3. Optimización paso 1: Imágenes.
4. Optimización paso 2: Peticiones.
5. Optimización paso 3: Caché en el lado del cliente.
6. Optimización paso 4: Lado del servidor.
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 16: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/16.jpg)
ANÁLISIS
Antes de comenzar a optimizar cualquier sitio web,
debemos de tener una radiografía completa del
mismo, comenzando por el HTML generado por
nuestro CMS.
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 17: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/17.jpg)
EXTENSIONES PARA CHROME
Meta SEO inspector Web Developer
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 18: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/18.jpg)
WEB DEVELOPER
Es una navaja suiza que nos permite obtener una
gran cantidad adicional de un sitio web.
Mis dos opciones preferidas:
• Information > View Document Outline
• CSS > Disable All Styles
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 19: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/19.jpg)
AUTOMATIZACIÓN DEL ANÁLISIS HTML
Podemos aprovechar la potencia del análisis “bulk” o
en lote, para encontrar los puntos de mejora de
nuestro sitio web.
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 20: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/20.jpg)
SCREAMING FROG
Herramienta multiplataforma de escritorio que nos permitirá
obtener en un vistazo muy rápido la salud de nuestro sitio.
Opción gratuita para Win: Xenu’s
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 21: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/21.jpg)
ANÁLISIS DE PETICIONES
PageSpeed Insights(online)
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
PageSpeed Insights(en navegador)
![Page 22: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/22.jpg)
ANÁLISIS DE PETICIONES DETALLADO
GT Metrix
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
PingdomTools
![Page 23: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/23.jpg)
PRUEBAS DE CARGA
Web Page Test
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Load Impact
![Page 24: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/24.jpg)
ANÁLISIS DESDE DENTRO
Herramienta para servidor multiplataforma que es capaz de
detectar desde problemas de rendimiento en secciones de
código de nuestro sitio web, así como problemas en nuestra
propia máquina.
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 25: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/25.jpg)
NEWRELIC, DASHBOARD
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 26: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/26.jpg)
CONCLUSIONES
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Principalmente podemos actuar sobre:
1. Imágenes(semiautomatizado).
2. Número de peticiones(semiautomatizado).
3. Caché en el lado del cliente(automatizado).
4. Caché en el lado del servidor(automatizado).
![Page 27: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/27.jpg)
GUIÓN
1. Conceptos.
2. Análisis previos.
3. Optimización paso 1: Imágenes.
4. Optimización paso 2: Peticiones.
5. Optimización paso 3: Caché en el lado del cliente.
6. Optimización paso 4: Lado del servidor.
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 28: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/28.jpg)
OPTIMIZACIÓN DE IMÁGENES
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Con un bajo esfuerzo, podemos reducir el peso de
las imágenes.
Es una de las optimizaciones de mayor impacto
sobre el rendimiento del sitio.
![Page 29: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/29.jpg)
HERRAMIENTAS PARA OPTIMIZAR IMÁGENES
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Kraken.io(Universal)
ImageOptim(Mac)
FileOptimizer(Win)
![Page 30: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/30.jpg)
EJEMPLOS CASOS REALES
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Ejemplo 1
Imagen congreso web
Imagen e-commerce
Ejemplo 2
Carpeta uploads WP
![Page 31: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/31.jpg)
GUIÓN
1. Conceptos.
2. Análisis previos.
3. Optimización paso 1: Imágenes.
4. Optimización paso 2: Peticiones.
5. Optimización paso 3: Caché en el lado del cliente.
6. Optimización paso 4: Lado del servidor.
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 32: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/32.jpg)
OPTIMIZACIÓN DE PETICIONES
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Principalmente abordaremos la optimización sobre
archivos JS y CSS.
![Page 33: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/33.jpg)
OPTIMIZACIÓN DE PETICIONES
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Dependiendo de la plantilla, en el caso de los
CMS(WordPress), el margen de maniobra será
pequeño sin reprogramar la plantilla a bajo nivel.
![Page 34: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/34.jpg)
OBJETIVO
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
En el caso de los desarrollos a medida, el objetivo es
un único fichero CSS y un único fichero JS.
Yo le llamo “conseguir un 1&1”.
![Page 35: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/35.jpg)
EJEMPLOS REALES
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
https://www.vgsystems.es(8 peticiones)
https://vguerrero.com(18 peticiones)
![Page 36: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/36.jpg)
EJEMPLOS REALES
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
https://www.vgsystems.es(8 peticiones)
https://vguerrero.com(18 peticiones)
Network tool, Google Chrome
![Page 37: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/37.jpg)
PREGUNTA
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
¿Se puede conseguir lo mismo que en un desarrollo
a medida con un tema de WordPress?
Sí
![Page 38: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/38.jpg)
PLAYGROUND
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
• Vamos a trabajar con la plantilla por defecto de
WordPress(Twenty Seventeen) y vamos a optimizarla. Punto
de partida, 32 peticiones.
• Objetivo: reducir el número de peticiones en un 50%.
![Page 39: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/39.jpg)
PASOS PARA LOGRAR 1&1, JAVASCRIPT
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
1. Trabajar con un tema hijo. Podemos crear un tema hijo para cualquier plantilla, en dos
pasos.
2. Crear tema hijo dentro de /wp-content/themes con nombre "twentyseventeen-child”.
3. Crear carpeta /js dentro de la carpeta del tema hijo y generar fichero js.js.
4. Pegar en orden el código fuente de nuestros ficheros JS cargados inicialmente. Es muy
importante respetar el orden. Las llamadas en JavaScript tienen dependencias.
5. Desanclar todos los ficheros JS del tema padre desde “functions.php”.
![Page 40: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/40.jpg)
PASOS PARA LOGRAR 1&1, ESTILOS
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
1. Crear carpeta /css dentro de tema hijo.
2. Generar un nuevo fichero style.css dentro de la carpeta creada.
3. Copiar estilos del tema padre dentro de style.css.
4. Desanclar todos los ficheros CSS del tema padre desde
functions.php.
![Page 41: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/41.jpg)
MINIFICACIÓN DE RECURSOS
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
1. Utilizando una herramienta de minificación de recursos,
generamos las versiones minificadas de los mismos.
2. Cambiamos las llamadas en functions.php para utilizar los ficheros
minificados.
![Page 42: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/42.jpg)
SMALLER
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 43: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/43.jpg)
EXTRA: MEJOR NO DAR PISTAS
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Eliminar versión de WordPress
![Page 44: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/44.jpg)
AUTOMATIZACIÓN: AUTOPTIMIZE
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
De lo mejor que he visto en formato plugin
![Page 45: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/45.jpg)
GUIÓN
1. Conceptos.
2. Análisis previos.
3. Optimización paso 1: Imágenes.
4. Optimización paso 2: Peticiones.
5. Optimización paso 3: Caché en el lado del cliente.
6. Optimización paso 4: Lado del servidor.
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 46: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/46.jpg)
CACHE EN EL LADO DEL CLIENTE
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
• Podemos informar al navegador de los recursos que no es
necesario que se descargue cada vez que se consulte una página de
nuestro dominio.
• Debemos añadir una serie de directivas adicionales a nuestro
fichero .htaccess.
![Page 47: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/47.jpg)
REQUISITOS
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Para que funcionen las directivas adicionales, es necesario tener
instalados y activados los siguientes módulos de Apache:
• Mod_expires
• Mod_deflate
• Mod_header
![Page 48: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/48.jpg)
RESULTADOS DEL PROCESO
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Antes Después
![Page 49: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/49.jpg)
DESCARGA EL CÓDIGO
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Puedes descargar el código de esta plantilla desde aquí:
https://github.com/vgsystems/seo-wpo-wordpress-theme
![Page 50: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/50.jpg)
GUIÓN
1. Conceptos.
2. Análisis previos.
3. Optimización paso 1: Imágenes.
4. Optimización paso 2: Peticiones.
5. Optimización paso 3: Caché en el lado del cliente.
6. Optimización paso 4: Lado del servidor.
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
![Page 51: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/51.jpg)
PAGESPEED: LADO DEL SERVIDOR
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
• Disponemos de PageSpeed de Google cómo módulo de Apache &
Nginx.
• Sirve para optimizar los recursos desde el lado del servidor
trabajando "menos", el servidor lo hace por nosotros.
• Cuidado: Si no sabes lo que haces, puedes romper tu servidor.
![Page 52: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/52.jpg)
PAGESPEED PARA SERVIDOR
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Pros:
• Permite optimizar imágenes, ficheros CSS y JS de forma automática.
• Ahorra tiempo.
• Se instala para todos los dominios del servidor.
• Permite gestión independiente en función del VirtualHost/dominio.
• Permite combinar con servidores de cache tipo Memcache.
![Page 53: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/53.jpg)
PAGESPEED PARA SERVIDOR
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Contras:
• Requiere conocimientos técnicos de administración de sistemas Linux.
• Depende del sitio web, funcionarán mejor o peor las optimizaciones
automáticas.
• Es posible que el tiempo de proceso "al vuelo" para peticiones sin
cachear, retrase la entrega. Puede aumentar el tiempo de carga en
sitios web con recursos pesados.
• Puede no ser compatible con nuestro sitio web.
![Page 54: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/54.jpg)
CACHE EN EL LADO DEL SERVIDOR
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Memcache
Permite acelerar el acceso a los ficheros de datos puesto que se
almacenan en memoria RAM.
![Page 55: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/55.jpg)
CACHE EN EL LADO DEL SERVIDOR
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
Opcache
Acelera el acceso al código interpretado por PHP. Lo almacena
en memoria RAM.
![Page 56: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/56.jpg)
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.MEMCACHE + OPCACHE ♥ WPO
![Page 57: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/57.jpg)
That’s all folks
![Page 58: Optimización onpage avanzada - VGS tecnologías web · Meta SEO inspector Web Developer VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017. WEB DEVELOPER Es una navaja suiza](https://reader034.vdocumento.com/reader034/viewer/2022042402/5f130986819d106c16095283/html5/thumbnails/58.jpg)
VÍCTOR GUERRERO. VGS TECNOLOGÍAS WEB. CONGRESO WEB 2017.
VGS tecnologías web
Víctor Guerrero
976 472 539
www.vgsystems.es