nuestro wordpress rendimiento de yendo mÁs allÁ …...a lag time of 400ms results in a decrease of...

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


- 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.


BACKEND: ARQUITECTURA


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


BACKEND: EJEMPLOS $my_posts = get_my_posts(10)foreach ($my_posts as $post) { print $post->content}


BACKEND: EJEMPLOS// O(n), 1 acceso BD $my_posts = get_my_posts(10) // <-- Acceso a BDforeach ($my_posts as $post) { print $post->content}


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}


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}


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) // <-- ???}


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 }}


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 ) }}


Todos los WordPress del mundoestán llenos de situaciones

como esta y aún peores


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


NUESTROS NUEVOS AMIGOS

NEWRELIC


BLACKFIRE


FRONTEND:EL NAVEGADOR

La arquitectura es mucho más senzilla, nostenemos que centrar "solo" en cómo elnavegador procesa nuestra página.


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


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?


PERFORMANCE


UNEJEMPLO


COVERAGE


PREGUNTAS


MUCHAS GRACIAS PORVUESTRA ATENCIÓN!

Me podéis encontrar en: @julimestieri linkedin.com/in/julia-mestieri-ferrer [email protected]


nuestro wordpress rendimiento de yendo mÁs allÁ …...a lag time of 400ms results in a decrease of...

Documents