[Recomendaciones] para la optimizacion de tiendas prestashop: PageSpeed y Yslow

[apositivo]

Buenas !  saludos comunidad , a continuación un debate que esperemos sea productivo y de interambio de informacion, tecnicas y recomendaciones para hacer nuestra tienda más rapida !

 

A mediados del 2009, Google empezó su iniciativa de acelerar el internet “Let’s make the web faster” (“Aceleremos la web”). Con esto surgió el fundamento para otro factor (nuevo) de clasificación.

 

Enfocamos la velocidad como un requisito principal del desarrollo de producto e infraestructura porque nuestras investigaciones señalan que la gente prefiere aplicaciones más rápidas y responsivas.

 

En lugar de enfocarse única y exclusivamente en sus propios productos y servicios, Google alentó a webmasters a nivel mundial, a reflexionar sobre su PageSpeed, la velocidad de carga de un sitio web. Apenas un año después, confirmaron que el PageSpeed sería agregado como parte de los casi 200 factores de clasificación.

 

 

Aunque el factor de clasificación “PageSpeed” solamente influencia menos de 1% de las solicitudes de búsqueda a nivel mundial, según Google.

 

[…] la implementación actual menciona que menos de 1% de las consultas de búsquedas cambiarán como resultado de la integración de velocidad de un sitio en nuestra clasificación […]

–

Matt Cutts

, Ingeniero Distinguido de Google

 

Los webmasters deben poner atención a la rápida entrega de contenido de sus sitios web para el beneficio de sus propios usuarios y asíoptimizar los tiempos de carga en sus propios sitios.

 

Nosotros te incentivamos a comenzar a observar la velocidad de tu sitio web – no solo para mejorar tu clasificación en los motores de búsqueda, sino que también añadirá al mejoramiento de experiencia en el internet de todos los internautas.
– Equipo de Calidad de Búsquedas de Google

 

 

 

Hay investigaciones que revelan que la satisfacción del usuario disminuye 16% por cada segundo de tiempo de carga transcurrido. Con un tiempo de carga (del sitio) de 4 segundos, 25% de los usuarios inmediatamente dejarán el sitio web otra vez.

 

Parte del infográfico realizado por kissmetrics, basado en una investigación de gomez.com y akamai.com

 

Por consiguiente, es recomendado mantener la atención en la velocidad PageSpeed de tu sitio web y optimízalo si es preciso.

 

Cómo se mide la velocidad PageSpeed de un sitio web?

 

Google principalmente utiliza los datos de la barra de herramientas de Google para medir el PageSpeed. De esta manera, pueden utilizar la conectividad promedio de un sitio web para todos los usuarios con diferentes tipos de conexiones de internet y velocidades. Un sitio web no necesariamente obtiene velocidad inferior de carga debido a imágenes grandes o varias líneas de código de fuente HTML, la conexión del servidor web también puede ser un factor crucial, entre otros. Con el fin de también incluir influencias posibles, Google utiliza los datos de la barra de herramientas.

 

Adicionalmente, a la hora de determinar tiempos de carga, Google no solo tomará en cuenta los archivos HTML, CSS y JavaScript, sino que también indagará el tiempo que lleva la carga de las integraciones de imágenes e ignora las especificaciones de la memoria caché de un sitio web.

 

Navegar por la web debe ser tan rápido como hojear la página de una revista, para así permitir la próxima generación de aplicaciones web enriquecidas.

 

Fuente:  https://www.sistrix.es/preguntale-a-sistrix/pagespeed-de-google-la-velocidad-de-carga-de-un-sitio-web/

 

[APORTES y RECOMENDACIONES]:

 

hacer tuning de HTACCESS !

 

Optimizar las imágenes

Las imágenes en los sitios web suelen ser la principal razón por la que estos tardan en cargar. Existe algunas herramientas que nos permiten optimizar las imágenes de manera que podamos reducir su peso sin perder demasiada calidad.

Por ejemplo, Photoshop tiene una opción específica para esto y la puedes encontrar haciendo clic en “Archivo” y luego en “Guardar para la web y dispositivos”. Esta opción nos permitirá escoger el formato y la calidad con la que deseamos guardar la imagen; encontrar una buena relación peso/calidad no resulta muy difícil y los resultados hacen que valga la pena el par de clics adicionales.

 

Una alternativa a Photoshop, es Smush.it, una herramienta que nos permite comprimir y optimizar imágenes removiendo de éstas bytes de información innecesarios sin afectar su calidad. Más allá de este para de opciones, reducir el tamaño de las imágenes manualmente puede ser un buena solución para casos puntuales.

 

CSS en lugar de imágenes

Generar bordes redondeados, sombreados y fondos degradados, son algunos ejemplos de cosas que solían hacerse empleando imágenes, pero en la actualidad es posible conseguir los mismos resultados con unas simples lineas de código CSS, ahorrándote algunos KB al final del proceso.

Para ayudarte con esto puedes emplear algunas de las herramientas para generar código CSS que presentamos días atrás en otro de nuestros artículos.

 

Comprimir ficheros JavaScript y CSS

Minify es una útil y poderosa herramienta que nos ayudará a reducir el peso de los ficheros CSS y JavaScript que integran nuestro sitio web, eliminando espacios en blanco y comentarios innecesarios, para luego comprimir todo mediante gzip.

Este procedimiento no solo reduce el peso de los ficheros, sino que además reduce el número de llamadas que hace el cliente al servidor para solicitar los archivos. Sin duda una herramienta indispensable, a la que además recomiendo que dediques algunos minutos de aprendizaje para aprovechar al máximo sus beneficios.

Utilizar servicios de almacenamiento alternativos

Si en tu sitio web ofreces descarga de archivos muy pesados, deberías considerar almacenarlos en lugares distintos a tu propio servidor, ya que cada descarga afectara el limite de ancho de banda establecido por tu servicio de hosting.

Los sitios más grandes y de mayor tráfico utilizan Redes de Distribución de Contenido o CDN -por Content Delivery Network- para, precisamente, garantizar y asegurar la distribución de contenido. Esta opción puede resultar costosa, pero existen alternativas gratuitas que podemos considerar, sobre todo si se trata de un pequeño sitio o un blog personal.

Usar Dropbox como fuente de los archivos CSS, JavaScript e imágenes de nuestro sitio puede ser una forma de improvisar una CDN, pero no es recomendable para sitios grandes o con mucho tráfico, ya que Dropbox tiene un límite de 10 GB de transferencia diaria. También existe una infinita cantidad de servicios para hospedar y compartir archivos de gran tamaño de forma gratuita.

Uso de .htaccess

Gracias a los ficheros .htaccess, en los servidores Apache es posible establecer configuraciones para prevenir el hotlinking, así como también implementar un método para almacenar en cache los archivos que no se actualizan de manera regular.

Los códigos necesarios para implementar estas configuraciones los puedes encontrar en un post que publicamos recientemente, junto a otro grupo de útiles códigos .htacces

Para finalizar, es recomendable medir la velocidad de carga de los sitios web antes y después de realizar los cambios, para así poder establecer comparaciones y decidir si es necesario efectuar nuevos ajustes e identificar otros posibles problemas.f

 

Fuente: https://hipertextual.com/archivo/2012/08/recomendaciones-para-acelerar-sitios-web-y-optimizar-servidor/

 

 

Forzar la descarga de tipos de fichero específicos

Si en nuestro sitio web ofrecemos acceso a diferentes tipos de archivos como .mp3, .pdf, .xls, etc, podemos establecer una configuración para que estos se descarguen de manera forzada en lugar de permitir al navegador elegir que hacer con ellos. El código para realizar esto es el siguiente y solo debemos modificar la extensión del tipo de archivo que deseamos forzar.

<files *.mp3> ForceType application/octet-stream Header set Content-Disposition attachment</files><files *.xls> ForceType application/octet-stream Header set Content-Disposition attachment</files>

Prevenir el Hotlinking

En el artículo anterior aprendimos lo que significa Hotlinking (o Hotlink) y que es posible prevenirlo gracias a .htaccess. Con el siguiente código evitaremos que otros consuman nuestro valioso ancho de banda.

RewriteEngine On#Cambiamos ?mysite.com/ con la url de nuestro sitioRewriteCond %{HTTP_REFERER} !^http://(.+.)?mysite.com/ [NC]RewriteCond %{HTTP_REFERER} !^$#Cambiamos /images/nohotlink.jpg con una imagen que indique que no toleramos los hotlinksRewriteRule .*.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

Fuente: wprecipes

Utilizar el cache para aumentar la velocidad de nuestro sitio

Probablemente este sea uno de los códigos más valiosos de esta lista, ya que nos permitirá acelerar de manera considerable la velocidad de carga de nuestro sitio utilizando el cache. Cada bloque de código a continuación sirve para definir los tipos de archivo que se almacenarán en cache y la cantidad de tiempo -en segundos- que permanecerán allí.

# 1 Año<filesMatch ".(ico|pdf|flv)$">Header set Cache-Control "max-age=29030400, public"</filesMatch># 1 Semana<filesMatch ".(jpg|jpeg|png|gif|swf)$">Header set Cache-Control "max-age=604800, public"</filesMatch># 2 Días<filesMatch ".(xml|txt|css|js)$">Header set Cache-Control "max-age=172800, proxy-revalidate"</filesMatch># 1 Minuto<filesMatch ".(html|htm|php)$">Header set Cache-Control "max-age=60, private, proxy-revalidate"</filesMatch>

Fuente: AskApache

Crear una lista negra de direcciones IP

Como bien explicaba nuestro compañero JJ, con .htaccess podemos combatir el SPAM de manera agresiva. Una forma de hacerlo es bloqueando las direcciones IP identificadas como fuente de comentarios basura. Copia y pega el siguiente código en el fichero .htaccess de tu servidor y reemplaza las direcciones IP por las que deseas bloquear.

<limit GET POST PUT>order allow, denyallow from alldeny from 123.123.123.1deny from 555.555.555.5deny from 000.000.000.0</limit>

Fuente: Paulund

Crear un registro de errores de PHP

Mientras desarrollabas tu sitio usando PHP o quizá navegando por red, es probable que te hayas encontrado con una página que imprimía algún error de PHP como parte de la “decoración”. Estos errores, además de ser desagradables para el usuario común, puede brindar información sensible que puede ser aprovechada por un visitante malintencionado. Para evitar que se impriman en pantalla y, por el contrario, se registren en una bitácora dentro del servidor podemos usar el código a continuación.

# evitar que los errores se muestren al usuariophp_flag display_startup_errors offphp_flag display_errors offphp_flag html_errors off# registrar errores en la bítacoraphp_flag log_errors onphp_value error_log /logs/php_error.log

Fuente: css-tricks

Si les ha parecido poco, para mañana estamos preparando otra serie de snipets .htaccess, para complementar tu caja de herramientas de códigos útiles.

 

 

 

 

Fuente: GiveGoodWeb

Comprimir el contenido y usa GZIP
<ifModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
  AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
  AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
  AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
  AddOutputFilterByType DEFLATE font/truetype font/opentype
</ifModule>

Enable browser cache

# BEGIN Expire headers
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 5 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers

Cache-Control headers:

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "private"
  </filesMatch>
  <filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers

Disable HTTP ETag header

# BEGIN Turn ETags Off
FileETag None
# END Turn ETags Off

y tú estimado forista, cual tecnica usas para acelerar tus sitios ?, puedes compartir con la comunidad ?