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

GOOGLE

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%

GOOGLE

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