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á cómo optimizar su instalación de Magento para reducir el tiempo de carga de la página y cómo integrar fragmentos enriquecidos para hacer que sus resultados de búsqueda se vean más profesionales..

Velocidad creciente

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 pequeñas modificaciones puede aumentar su rendimiento.

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

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

Cuando la memoria caché de Magento está habilitada, Magento no tiene que cargar todos los recursos de página de los servidores en cada solicitud de página. Para habilitar el caché de Magento, vaya a Sistema> Gestión de caché. Seleccione todos los tipos de caché y en la esquina superior derecha, seleccione Habilitar y enviar.

En segundo lugar, debemos combinar 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. Establezca estos dos campos en Sí, y golpear Salvar.

Esta fusión de archivos CSS y JS reducirá el número 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 sola incluir camino para un mayor rendimiento. Esto reduce el tiempo de carga de la página en un 25% a 50%.. 

Para utilizar esta herramienta, el directorio incluye y el archivo incluye / config.php ambos deben ser de escritura. Para iniciar el proceso de compilación, vaya a Sistema> Herramientas> Compilación. En la esquina superior derecha, verá la Ejecutar proceso de compilación botón. Haz clic en él, y listo..

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

A través de .htaccess archivo, primero haremos la codificación del contenido, que comprimirá el archivo antes de enviarlo al agente solicitante. Esto reducirá el tiempo de descarga de archivos. En segundo lugar, agregaremos la duración del vencimiento a los encabezados. Esto significa que al descargar recursos, el navegador comprobará si los encabezados han caducado. Si no lo han hecho, entonces se utilizarán las versiones en caché..

Para habilitar la compresión, descomente esta línea de código en su valor predeterminado .htaccess archivo, es decir, eliminar el # antes de php_flag zlib.output_compression en:

############################################ # habilitar la compresión html resultante php_flag zlib.output_compression en ############################################

A continuación, para configurar la compresión gzip en acción, agregaremos estas líneas en el .htaccess expediente:

############################################ # Insertar filtro en todo el contenido SetOutputFilter DEFLATE # Insertando filtro solo en los tipos de contenido seleccionados AddOutputFilterByType DEFLATE text / html text / plain text / xml text / css text / javascript application / javascript # Abordando algunos problemas de Netscape 4.x BrowserMatch ^ Mozilla / 4 gzip-only-text / html # Abordar algunos problemas de Netscape 4.06-4.08 BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip # Escenario: MSIE se disfraza como Netscape BrowserMatch \ bMSIE! No-gzip! Gzip-only-text / html # Comando para no comprimir imágenes SetEnvIfNoCase Request_URI \. (?: Gif | jpe? G | png) $ no-gzip dont-vary # Controlando los proxies correctamente Encabezado adjuntar Vary User-Agent env =! Dont-vary ############# ################################

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

############################################  # En primer lugar, habilite los vencimientos ExpiresActive On # El vencimiento predeterminado ExpiresDefault "access plus 1 month" # Para el favicon ExpiresByType image / x-icon "access plus 1 year" # Establecer imágenes Expiry ExpiresByType image / gif "access plus 1 month" ExpiresByType image / png "access plus 1 mes" ExpiresByType image / jpg "access plus 1 mes" ExpiresByType image / jpeg "access plus 1 month" # Configurar CSS Expiry ExpiresByType text / css "access 1 month" # Para Javascript Expiry ExpiresByType application / javascript "access más 1 año "  ############################################

Una cosa muy importante a considerar para mejorar la velocidad de su tienda Magento es la elección del servidor. Este artículo de Tuts + explica muy bien los factores que debe considerar para garantizar que su elección de servidor sea una buena opción para Magento.

Implementando fragmentos enriquecidos

Ahora es el momento de diseñar una forma de implementar esquemas (o fragmentos enriquecidos) en nuestra tienda Magento. No solo harán que los resultados de su búsqueda se vean más profesionales y los ayudarán a destacar, sino que también aumentarán la tasa de clics en las páginas de búsqueda.. 

Los fragmentos enriquecidos que integraremos en este tutorial son producto, oferta y calificación agregada, y al final le daré algunos recursos sobre la implementación de migas de pan y esquemas de organización..

Por defecto, los resultados en las páginas de resultados del motor de búsqueda se ven así:

A través de la implementación de fragmentos enriquecidos, pueden destacarse y verse así:

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

Comenzaremos por implementar el esquema del producto. Abre este archivo en tu editor: app / design / frontend / [package] / [theme] /template/catalog/product/view.phtml y agregar el código resaltado en el vista del producto clase.

Ahora vamos a etiquetar el nombre del producto, la descripción y la imagen. Para etiquetar un nombre de producto, encuentre el h1 etiqueta que contiene el nombre del producto, y agregue el siguiente código en ella:

 productoAtributo ($ _ producto, $ _ producto-> getNombre (), 'nombre')?> 

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

 productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?> 

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

$ _img = ''; $ _img = '';

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

Reemplace el código completo de este archivo con el código que figura a continuación:

getReviewsCount ()):?> 
getRatingSummary ()):?> 
 
 
  
 getReviewsUrl ()?> ">__ ('% d Review (s)', $ this-> getReviewsCount ())?> | getReviewsUrl ()?> # review-form ">__ ('Add Your Review')?> 
    
 getDisplayIfEmpty ()):?> 
 getReviewsUrl ()?> # review-form "> __ ('Sé el primero en opinar sobre este producto')?>  
 

Ahora para mostrar el alcance de la oferta de productos, abra el siguiente archivo:

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

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

  isAvailable ()):?> 
  __ ('Disponibilidad:')?> __ ('En stock')?> 
  
  __ ('Disponibilidad:')?> __ ('Agotado')?> 
 

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

... 

 moneda ($ _ precio + $ _weeeTaxAmount, true, true)); ?>