Post on 16-Oct-2020
YENDO MÁS ALLÁ EN ELRENDIMIENTO DE
NUESTRO WORDPRESS
Por Julià Mestieri Ferrer
WordCampMarzo 2020
Malaga
PRESENTACIÓNHola! Soy Julià Mestieri :) Llevo más de 10 años implementando y dirigiendo proyectos conCMS's PHP-MySQL-HTML-JavaScript. Actualmente soy Head of Ecommerce at Timeular ->https://timeular.com Me podéis encontrar en redes: @julimestieri https://www.linkedin.com/in/julia-mestieri-ferrer/ https://medium.com/quiron
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
Performance?
A lag time of 400msresults in a decreaseof 0.44% traffic - Inreal terms this amountsto 440 millionabandonedsessions/month and amassive loss inadvartising revenue
When the load timejumps from 1 to 4secconds, conversionsdecline sharply. Forever 1 seccond ofimprovement weexperience 2%conversion improvement
WALLMART
An extra 0.5 seconds in search page generationwould cause a trafficdrop by 20%
1 second of loading lagtime would cost Amazon$1.6 bilion in salesper year
AMAZON
Fuente: https://medium.com/@vikigreen/impact-of-slow-page-load-time-on-website-performance-40d5c9ce568a
PLAN DE LA CHARLA Performance back-end - Conceptos previos - Errores comunes - Herramientas Performance front-end - Processo de carga y render - Herramientas - Ejemplos Preguntas y debate
QUÉ NO VEREMOS
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
- Cómo elegir hosting
- Cómo configurar un CDN
- Desactivar plugins en desuso
- Minificar el JS y el CSS
- Limpiar la base de datos
- Usar PHP 7
- Optimizar imagenes en tamaño y formato
- Cómo activar object cache
-...
Muy recomendable el curso de Kyle Simpson en frontend masters:https://frontendmasters.com/courses/website-performance/
ENTENDER LOS PORQUÉSNada de recetas pre-hechas! Vamos a tratar de entender el rendimiento para poderencontrar nosotros mismos los problemas de nuestroWordPress. El objectivo no es entender todos los detallestécnicos, es saber que existen y ver cómo afectanpara poder buscarlo cuando nos nos haga falta.
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
BACKEND: ARQUITECTURA
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
Volvemos a los 90!: esquema básico de webs 'dinámicas'
Fuente: https://www.jostrans.org/issue21/art_torres_rodrigue.php
En el esquema básico tenemos:- Motor de procesado: PHP- Motor de Base de Datos: MySQL
Ambos sistemas funcionan con:- Procesador- Memoria (RAM) Tanto PHP como MySQL consumentiempo de ejecución.
BACKEND: COMPLEJIDAD
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
BACKEND: EJEMPLOS $my_posts = get_my_posts(10)foreach ($my_posts as $post) { print $post->content}
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
BACKEND: EJEMPLOS// O(n), 1 acceso BD $my_posts = get_my_posts(10) // <-- Acceso a BDforeach ($my_posts as $post) { print $post->content}
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
BACKEND: EJEMPLOS $my_posts = get_my_posts_ids(10) foreach ($my_posts as $post_id) { $post = get_post_by_id( $post_id ) print $post->content}
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
BACKEND: EJEMPLOS// O(n), 2 accesos BD $my_posts = get_my_posts_ids(10) // <-- Acceso a BDforeach ($my_posts as $post_id) { $post = get_post_by_id( $post_id ) // <-- Acceso a BD print $post->content}
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
BACKEND: EJEMPLOS// O(n) + O(?), almenos 2 accesos a BD $my_posts = get_my_posts_ids(10) // <-- Acceso a BDforeach ($my_posts as $post_id) { $post = get_post_by_id( $post_id ) // <-- Acceso a BD print render_template($post) // <-- ???}
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
BACKEND: EJEMPLOS// O(n^2), 3 accesos a base de datos $my_posts = get_my_posts_ids(10) // <-- Acceso a BDforeach ($my_posts as $post_id) { $post = get_post_by_id( $post_id ) // <-- Acceso a BD $related_posts = get_related_posts_by_id( $post_id ) // <-- Accesso a BD foreach ($related_posts as $related_post) { print $related_post->content }}
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
BACKEND: EJEMPLOS// O(?), ? accesos a base de datos $my_posts = apply_filters( 'get_posts', 'category-term', 10 )foreach ($my_posts as $post_id) { $post = get_post_by_id( $post_id ) // <-- Acceso a BD $related_posts = get_related_posts_by_id( $post_id ) $related_posts = apply_filters( 'pre_render_related', $related_posts ) foreach ($related_posts as $related_post) { print do_action( 'render_posts', $related_post->content ) }}
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
Todos los WordPress del mundoestán llenos de situaciones
como esta y aún peores
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
Don't panic!
DEBEMOS CENTRARNOS ENNUESTROS CUELLOS DE
BOTELLA
NO SE DEBEOPTIMIZAR TODO
Photo by: https://unsplash.com/@amseaman
DEBEMOS CENTRARNOS ENNUESTROS CUELLOS DE
BOTELLA
NO SE DEBEOPTIMIZAR TODO
Photo by: https://unsplash.com/@amseaman
noncritical path optimization isthe root of all evil
DONALD KNUTH
Monitoriza el funcionamiento denuestra infraestructura y nosda información sobre 'dónde' sedestinan más recursos. Es información agregada delfuncionamiento normal denuestro site.
NewRelic: MonitorizaciónNos permite analizar endetalle trazas de ejecución:desde que la petición llegaal servidor hasta quefinaliza el proceso. Es información puntual conmucho detalle.
Blackfire: Profiler
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
NUESTROS NUEVOS AMIGOS
NEWRELIC
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
NEWRELIC
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
NEWRELIC
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
NEWRELIC
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
NEWRELIC
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
BLACKFIRE
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
BLACKFIRE
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
FRONTEND:EL NAVEGADOR
La arquitectura es mucho más senzilla, nostenemos que centrar "solo" en cómo elnavegador procesa nuestra página.
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
Fuente: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction
Cómo el navegador pueda procesar losdistintos recursos se ve afectado por cuándopuede acceder a ellos.FRONTEND: LA RED
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
Las claves son: - First paint - Time to Interactive - First CPU Idle Los resultados pueden variar mucho enfunción de cómo configuremos el audit.
AUDIT: QUÉ MEDIR?
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
PERFORMANCE
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
UNEJEMPLO
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
UNEJEMPLO
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
UNEJEMPLO
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
COVERAGE
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
PREGUNTAS
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS
MUCHAS GRACIAS PORVUESTRA ATENCIÓN!
Me podéis encontrar en: @julimestieri linkedin.com/in/julia-mestieri-ferrer julia.mestieri.ferrer@gmail.com
YENDO MÁS ALLÁ EN EL RENDIMIENTO DE NUESTRO WORDPRESS