El árbol de categorías que no se ve en móvil y frena la página

Gustavo, de la comunidad, compartió un truco que vale para cualquier tienda: revisa qué módulos se ejecutan en móvil aunque la plantilla no los muestre. En un cliente, la plantilla escondía en el móvil el árbol de categorías lateral (ps_categorytree), pero el módulo seguía montándolo entero en cada visita. Solo con quitarlo en móvil, una página pasó de tardar 5 segundos a 3.

Por qué pasa

Muchas plantillas adaptan el diseño al móvil con CSS: el bloque sigue en el HTML, solo que oculto. Para el servidor no hay diferencia. El módulo consulta la base de datos, recorre todas las categorías, genera el HTML y lo manda al navegador, que lo recibe y no lo pinta. Con un catálogo de cientos de categorías, ese árbol es de lo más pesado de una página de listado.

En PrestaShop 1.6 cada módulo tenía su casilla para desactivarlo por dispositivo. PrestaShop todavía permite desactivar un módulo solo en móviles (según la versión, desde el gestor de módulos o desde el módulo de personalización del tema), pero un compañero avisó de que, en su plantilla, eso le rompía otra cosa. Por eso conviene la solución más fina: que el módulo siga activo y simplemente no haga nada en móvil.

Cómo lo hizo Gustavo y cómo hacerlo sin perderlo al actualizar

Gustavo añadió una comprobación al principio de la función que obtiene las categorías: si el visitante está en un móvil, devuelve una lista vacía. Funciona, pero tocar el fichero del módulo tiene un problema: la próxima actualización del módulo se lo lleva por delante.

La misma idea, como override de módulo, se queda aunque actualices. Crea override/modules/ps_categorytree/ps_categorytree.php:

<?php
class Ps_CategoryTreeOverride extends Ps_CategoryTree
{
    public function renderWidget($hookName = null, array $configuration = [])
    {
        if (Context::getContext()->isMobile()) {
            return '';
        }

        return parent::renderWidget($hookName, $configuration);
    }
}

Después borra var/cache/prod/class_index.php (y el de dev si existe) para que PrestaShop lo detecte, y pruébalo antes en una copia de la tienda. Dos detalles:

• La firma de renderWidget tiene que ser idéntica a la de tu versión del módulo; ábrelo y cópiala de ahí.
• Fíjate en el nombre de la clase: en los overrides de módulos es NombreDelMóduloOverride y extiende la clase del módulo, no una clase …Core.

Cómo encontrar los tuyos

No adivines: mide. Activa el profiling en config/defines.inc.php cambiando a true la constante _PS_DEBUG_PROFILING_ y carga la página con el modo de móvil del navegador. Al final verás cuánto tarda cada módulo y cuánta memoria gasta. Los candidatos son los que tardan mucho y no aparecen en pantalla: árboles de categorías, bloques de marcas, carruseles ocultos, widgets laterales.

Ojo con el SEO

Otro miembro del grupo puso la pega justa: mostrar contenido distinto en móvil y en escritorio puede afectar al posicionamiento. Google rastrea sobre todo la versión móvil, así que los enlaces que quitas en móvil dejan de existir para Google. Si el árbol era la única vía hacia algunas subcategorías, asegúrate de que el menú o los listados siguen enlazándolas. Si el menú ya las cubre, quitar el árbol en móvil no pierde nada.

Si quieres ver en detalle qué módulo frena tu tienda, RKR Diagnoses hace ese diagnóstico desde el back-office.

Esto salió en @PrestashopEsp, la mayor comunidad PrestaShop de España en Telegram. Ver la conversación