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.
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.
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.
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:
1 |
############################################ |
2 |
|
3 |
# enable resulting html compression |
4 |
php_flag zlib.output_compression on |
5 |
|
6 |
############################################ |
A continuación, para poner en acción la compresión gzip, agregaremos estas líneas al archivo .htaccess:
1 |
############################################ |
2 |
|
3 |
# Inserting filter on all content |
4 |
SetOutputFilter DEFLATE |
5 |
|
6 |
# Inserting filter only on selected content types |
7 |
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript |
8 |
|
9 |
# Tackling some Netscape 4.x problems |
10 |
BrowserMatch ^Mozilla/4 gzip-only-text/html |
11 |
|
12 |
# Tackling some Netscape 4.06-4.08 problems |
13 |
BrowserMatch ^Mozilla/4\.0[678] no-gzip |
14 |
|
15 |
# Scenario: MSIE masquerades as Netscape |
16 |
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html |
17 |
|
18 |
# Command for not compressing images |
19 |
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary |
20 |
|
21 |
# Handling Proxies correctly |
22 |
Header append Vary User-Agent env=!dont-vary |
23 |
|
24 |
############################################ |
Por último, pongamos un límite de caducidad en los encabezados, agregando este código en el archivo .htaccess:
1 |
############################################ |
2 |
<IfModule mod_expires.c> |
3 |
|
4 |
# First of all enable expirations |
5 |
ExpiresActive On |
6 |
|
7 |
# Default expiration |
8 |
ExpiresDefault "access plus 1 month" |
9 |
|
10 |
# For favicon |
11 |
ExpiresByType image/x-icon "access plus 1 year” |
12 |
|
13 |
# Set Images Expiry |
14 |
ExpiresByType image/gif "access plus 1 month" |
15 |
ExpiresByType image/png "access plus 1 month" |
16 |
ExpiresByType image/jpg "access plus 1 month" |
17 |
ExpiresByType image/jpeg "access plus 1 month" |
18 |
|
19 |
# Set CSS Expiry |
20 |
ExpiresByType text/css "access 1 month” |
21 |
|
22 |
# For Javascript Expiry |
23 |
ExpiresByType application/javascript "access plus 1 year" |
24 |
|
25 |
</IfModule> |
26 |
############################################ |
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:
Mediante la implementación de fragmentos enriquecidos, pueden destacarse y verse así:
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.
app/design/frontend/[package]/[theme] /template/catalog/product/view.phtml y agrega el código resaltado en la clase product-view.1 |
<div class="product-view" itemscope itemtype="https://schema.org/Product" itemid="#product_base"> |
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:
1 |
<h1 itemprop="name"> |
2 |
<?php echo $_helper->productAttribute($_product,$_product->getName(), 'name') ?>
|
3 |
</h1>
|
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:
1 |
<div class="std" itemprop="description"> |
2 |
<?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?>
|
3 |
</div>
|
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:
1 |
$_img = '<img itemprop="image" id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />'; |
2 |
|
3 |
$_img = '<img itemprop="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />'; |
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:
1 |
<?php if ($this->getReviewsCount()): ?> |
2 |
|
3 |
<div class="product-view" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" |
4 |
|
5 |
<?php if ($this->getRatingSummary()):?> |
6 |
<div class="rating-box"> |
7 |
<div class="rating" style="width:<?php echo $this->getRatingSummary() ?>%"></div> |
8 |
</div>
|
9 |
<?php endif;?> |
10 |
|
11 |
<p class="rating-links"> |
12 |
<a href="<?php echo $this->getReviewsUrl() ?>"><?php echo $this->__('%d Review(s)', $this->getReviewsCount()) ?></a> |
13 |
<span class="separator">|</span> |
14 |
<a href="<?php echo $this->getReviewsUrl() ?>#review-form"><?php echo $this->__('Add Your Review') ?></a> |
15 |
</p>
|
16 |
|
17 |
<meta content="<?php echo $this->getReviewsCount();?>" itemprop="ratingCount"> |
18 |
<meta content="5" itemprop="bestRating"> |
19 |
<meta content="<?php echo <?php echo $this->getRatingSummary()*5/100 ?>" itemprop="ratingValue"> |
20 |
|
21 |
</div>
|
22 |
|
23 |
<?php elseif ($this->getDisplayIfEmpty()): ?> |
24 |
|
25 |
<p class="no-rating"> |
26 |
<a href="<?php echo $this->getReviewsUrl() ?>#review-form"> |
27 |
<?php echo $this->__('Be the first to review this product') ?> |
28 |
</a>
|
29 |
</p>
|
30 |
|
31 |
<?php endif; ?> |
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):
1 |
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> |
2 |
|
3 |
<meta itemprop="priceCurrency" content="<?php echo Mage::app()->getStore()->getCurrentCurrencyCode();?>" /> |
4 |
<?php if ($_product->isAvailable()): ?> |
5 |
<p class="availability in-stock"> |
6 |
<link itemprop="availability" href="http://schema.org/InStock"> |
7 |
<?php echo $this->__('Availability:') ?> |
8 |
<span><?php echo $this->__('In stock') ?></span> |
9 |
</p>
|
10 |
<?php else: ?> |
11 |
<p class="availability out-of-stock"> |
12 |
<link itemprop="availability" href="http://schema.org/OutOfStock"> |
13 |
<?php echo $this->__('Availability:') ?> |
14 |
<span><?php echo $this->__('Out of stock') ?></span> |
15 |
</p>
|
16 |
<?php endif; ?> |
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:
1 |
<span itemprop="price" class="price" id="price-excluding-tax-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>">...</span> |
Del mismo modo, para cada span con la clase regular-price, agregaremos el código resaltado en él:
1 |
<span class="regular-price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>"> <?php echo str_replace('class="price"', 'class="price" itemprop="price"', $_coreHelper->currency($_price + $_weeeTaxAmount, true, true)); ?> |
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.
