7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Magento

Aumentar la velocidad y agregar fragmentos enriquecidos en Magento

Read Time: 8 mins
This post is part of a series called Magento SEO.
Magento SEO: Optimizing Pages and Avoiding Duplicate Content Penalties
Magento SEO: Internationalization and Extensions

Spanish (Español) translation by steven (you can also view the original English article)

Hasta ahora, en esta serie, hemos realizado la mayoría de los pasos necesarios para la optimización en el sitio. Ahora, en la tercera parte de esta serie, aprenderás cómo optimizar tu instalación de Magento para reducir el tiempo de carga de la página y cómo integrar fragmentos enriquecidos para que tus resultados de búsqueda se vean más profesionales.

Aumentar la velocidad

Reducir el tiempo de carga de la página es una preocupación para todos los desarrolladores web. Magento, al ser un gigante de un CMS, no es muy rápido, pero hacer algunas pequeñas modificaciones puede incrementar su rendimiento.

Reducir el tiempo de carga de la página es necesario no solo para mejorar la experiencia del usuario y reducir la tasa de rebote, sino también para ayudarte a posicionarte bien en los motores de búsqueda. Desde 2010, Google da especial importancia al tiempo de carga de la página de un sitio web para determinar su clasificación de página. Aquí discutiremos brevemente algunas formas rápidas y factibles de reducir el tiempo de carga de la página de tu tienda Magento.

La forma más rápida y sencilla de hacer que tu sitio Magento sea rápido es realizando algunos pequeños cambios en el panel de administración de Magento. En primer lugar, habilitaremos la caché de Magento. Este pequeño paso por sí solo reducirá el tiempo de carga de la página entre un 30% y un 40%.

Cuando la caché de Magento está habilitada, Magento no tiene que cargar todos los recursos de la página desde los servidores en cada solicitud de página. Para habilitar la caché de Magento, ve a Sistema > Administración de caché. Selecciona todos los tipos de caché y, en el menú desplegable de la esquina superior derecha, selecciona Habilitar y enviar.

Cache managementCache managementCache management

En segundo lugar, necesitamos fusionar nuestros archivos CSS y JS antes de la representación de la página. Iremos a Sistema > Configuración > Desarrollador. Aquí verás Fusionar archivos JavaScript y Fusionar archivos CSS. Establece ambos campos en Sí y presiona Guardar.

Merge JavaScript and CSS filesMerge JavaScript and CSS filesMerge JavaScript and CSS files

Esta combinación de archivos CSS y JS reducirá la cantidad de solicitudes al servidor mientras se carga la página. Esto volverá a reducir sustancialmente el tiempo de carga de la página.

A continuación, ejecutaremos el proceso de compilación de Magento. La función de compilación de Magento compilará todos los archivos de Magento para crear una única ruta de inclusión (include) para un mayor rendimiento. Esto reduce el tiempo de carga de la página entre un 25% y un 50%.

Para utilizar esta herramienta, el directorio includes y el archivo includes/config.php deben poder escribirse. Para iniciar el proceso de compilación, ve a Sistema > Herramientas > Compilación. En la esquina superior derecha, verás el botón Ejecutar proceso de compilación. Haz clic en él y habrás terminado.

Run Compilation ProcessRun Compilation ProcessRun Compilation Process

A continuación, tenemos algunos pasos avanzados para reducir el tiempo de carga de la página que requieren cambiar el contenido en el archivo .htaccess. Puede haber muchos archivos .htaccess en un directorio de Magento, pero aquí editaremos el que se encuentra en el directorio raíz.

A través del archivo .htaccess, primero realizaremos la codificación del contenido, que comprimirá el archivo antes de enviarlo al agente solicitante. Esto reducirá el tiempo de descarga del archivo. En segundo lugar, agregaremos la duración del vencimiento a los encabezados. Esto significa que mientras descargas los recursos, el navegador verificará si los encabezados han expirado. Si no es así, se utilizarán las versiones en caché.

Para habilitar la compresión, elimina el comentario de esta línea de código en tu archivo .htaccess predeterminado, es decir, elimina el # antes de php_flag zlib.output_compression on:

A continuación, para poner en acción la compresión gzip, agregaremos estas líneas al archivo .htaccess:

Por último, pongamos un límite de caducidad en los encabezados, agregando este código en el archivo .htaccess:

Una cosa muy importante a considerar para mejorar la velocidad de tu tienda Magento es la elección del servidor. Este artículo de Tuts+ hace un gran trabajo al explicar los factores que debes considerar para asegurarte de que tu elección de servidor sea una buena opción para Magento.

Implementación de fragmentos enriquecidos

Ahora es el momento de idear una forma de implementar esquemas, o fragmentos enriquecidos, en nuestra tienda Magento. No solo harán que tus resultados de búsqueda se vean más profesionales y los ayudarán a destacarse, sino que también es probable que aumenten la tasa de clics en las páginas de búsqueda.

Los fragmentos enriquecidos que integraremos en este instructivo son producto, oferta y calificación agregada, y al final, te daré algunos recursos sobre cómo implementar rutas de navegación y esquemas de organización.

De forma predeterminada, los resultados en las páginas de resultados del motor de búsqueda tienen este aspecto:

Default search engine resultsDefault search engine resultsDefault search engine results

Mediante la implementación de fragmentos enriquecidos, pueden destacarse y verse así:

Rich snippets in search engine resultsRich snippets in search engine resultsRich snippets in search engine results

Ten en cuenta que la implementación de estos fragmentos requerirá la edición de archivos de plantilla. Necesitarás tener conocimientos básicos de HTML y PHP para implementarlos. Además, asegúrate de mantener una copia de seguridad de cada archivo antes de editarlo.

Comenzaremos implementando el esquema de productos. Abra este archivo en su editor: app/design/frontend/[package]/[theme] /template/catalog/product/view.phtml y agrega el código resaltado en la clase product-view.

Ahora etiquetemos el nombre, la descripción y la imagen del producto. Para etiquetar el nombre de un producto, busca la etiqueta h1 que contiene el nombre del producto y agrega el siguiente código en ella:

Ahora, para etiquetar la descripción, busca el div de descripción del producto y asegúrate de que incluyas los atributos en el siguiente código:

A continuación, en app/design/frontend/[package]/[theme]/template/catalog/product/view/media.phtml, busca las etiquetas de imagen (encontrarás dos instancias de ellas en las líneas 40 y 62 si estás usando el tema predeterminado) y asegúrate de que incluyan lo siguiente:

Ahora, agregaremos información de calificación agregada del producto. Para eso, abre este archivo:

app/design/frontend/[package]/[theme]/template/review/helper/summary.phtml

Reemplaza el código completo de este archivo con el código que se proporciona a continuación:

Ahora, para mostrar el alcance de la oferta del producto, abre el siguiente archivo:

app/design/frontend/[package/[theme]/template/catalog/product/view/type/default.phtml

Agrega este código al comienzo del código, después de los comentarios iniciales (que deberían estar alrededor de la línea 28):

Y al final del archivo, agrega este código:

</div><!-Offer Divs ends -->

Para agregar el precio, abre este archivo:

app/design/frontend/[package]/[theme]/template/catalog/product/price.phtml

Asegúrate de agregar los atributos adecuados para el código en cada instancia de las clases price y regular-price. Para cada instancia de intervalo con la clase price, agregaremos la etiqueta itemprop resaltada en ella:

Del mismo modo, para cada span con la clase regular-price, agregaremos el código resaltado en él:

Usando técnicas como esta, también puedes agregar breadcrumbs a tus fragmentos enriquecidos. Un excelente tutorial sobre esto es Google Rich Snippets en Magento. No olvides probar simultáneamente mientras implementas estos esquemas. Puedes utilizar las herramientas de prueba gratuitas de Google y Bing con fines de prueba.

Una vez que hayas implementado todos estos conceptos enriquecidos en tu tienda Magento, notarás un aumento significativo en el tráfico de tu sitio web si ya estás clasificando bien en los motores de búsqueda.

Conclusión

Hasta ahora, deberíamos tener un sitio web de Magento totalmente optimizado para SEO con muy buen tiempo de carga de la página y resultados de búsqueda de aspecto profesional.

En el siguiente artículo de esta serie, explicaré algunas consideraciones de SEO para crear una configuración de múltiples tiendas para Magento y brindaré una descripción general rápida de algunas extensiones de Magento útiles para fines de SEO.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.