Millorar la performance d'un e-commerce amb bloc rebent les dades de third parties

Introducción

L'objectiu és construir una pàgina (una home) amb un header slider d'imatges a pantalla completa, amb un slider de productes, un parell de blocs de contingut fix (típic CTA a seccions d'un web) i un slider d'articles d'un bloc .

Els requisits són obtenir d'altres serveis productes i articles. El típic formulari de Newsletter també serà un servei extern.

El principal objectiu és tenir-ho tot amb bon rendiment i provar de posar sleeps en els serveis externs (per emular males third parties) i que tot i això no es ressenti la performance general de la pàgina.

El primer pas que hem realitzat ha estat generar aquests 3 llocs més externs:

• Bloc
• Butlletí
• productes

S'exportaran les seves dades via json.

Ja que els fem nosaltres anem a implementar la mateixa lògica en punts en comú, per exemple tant els articles com els productes tindran imatges, així que seguirem una mateixa estructura en el json:

"images": {
    "header": {
        "alt": "lorem ipsum",
        "desktop": {
            "src": "http://...",
        }
    }
}

Això ho fem per tenir imatges separades per dimensions de pantalla, per tal de poder obtenir una imatge diferent per a mobile i una altra per a desktop, per exemple.
Aquesta decisió ja té a veure amb performance, ja que aquest disseny ens permetrà enviar sempre la millor imatge possible, per així impedir carregar una imatge massa gran quan no sigui necessari.

Un cop finalitzat

Anem a fer un parell de proves i comprovar diferències. La primera forma en què farem aquesta home és fent vue components per a cada bloc, sense SSR. Aquí js hauria de bloquejar el just el client com perquè ens d'algun problema de performance.

La segona opció és carregar tots aquests blocs directament des php, minimitzant el js al més necessari, en el nostre cas això seran els sliders.

Aquí la primera resposta de servidor (TTFB) hauria de ser una mica més elevada (aquí és on haurem de realitzar algun canvi de cara a performance) però un cop arribin les dades hauria d'estar tot carregat sense bloqueig de JS (més enllà de què ens vagi a donar el propi slider)

Un cop tinguem les dues solucions compararem les mètriques que ens lliuri lighthouse en les dues versions i després començarem a posar sleeps molt bèsties (5 segons) en aquests third parties i veure quant podem mitigar aquest problema.

En total seran 4 versions:

• Molt js
• Molt js i sleeps en third parties
• Poc js
• Poc js i sleeps en third parties