Optimizacion

Esta página recoge toda la información para optimizar las páginas web que se hagan

PREPARATIVOS

Google PageSpeed

Con el fin de demostrar al cliente el antes y el después de la optimización debemos de hacer algo de faena antes que nada:

1. Primero que todo tenemos que ir a la pagina de Google PageSpeed e introducir la URL de la página que estamos optimizando, esto habrá que hacerlo dos veces seguidas para que no se quede con el primer resultado ya que suele dar errores.
2. Una vez realizado el paso anterior deberemos de hacer capturas i documentar la información que nos da la página, lo suyo seria recabar toda la información pero con que nos quedemos con las puntuaciones y con los tiempos de carga servirá.

BackUp

Este es casi el punto mas importante, en caso de que algo falle deberemos de tener una copia de seguridad del sitio web por si tenemos que restaurarla, así pues ¡¡corre a hacerla!!

Wordpress

En este punto deberemos de actualizar en la medida de lo posible los plugins que dispongan de una nueva versión y en el caso que el plugin haya sido marcado como obsoleto deberemos buscar uno que cumpla la misma función en las nuevas versiones tanto de WordPress como de PHP.

1. Tendremos que actualizar los plugins solucionando los problemas que vayan saliendo a medida que avanzamos.
2. Si hay algún plugin que no tiene actualizaciones igualmente deberemos mirar en la pagina oficial del plugin si existe alguna.
3. Una vez actualizados los plugins deberemos de actualizar WordPress, pero antes deberemos mirar si los plugins son compatibles con la nueva versión de este, asi pues podemos descargar el siguiente plugin que nos ahorrará tener que comprobarlo nosotros. --> click aquí
4. Cuando actualizemos WordPress podremos subir la versión del php siempre y cuando el plugin de compatibilidad nos haya dado el Okey, sino deberemos solucionar los problemas antes.
5. Si hay algún plugin que no se usa se debe desinstalar, ¡no queremos basura en las webs de los clientes!

IMPORTANTE: AUNQUE LA VERSIÓN DEL PHP DE PLESK DIGA QUE NO ESTA OBSOLETO DEBEMOS MIRARLO EN LA PAGINA OFICIAL PUES A VECES PLESK NO ESTA ACTUALIZADO AL DIA

PESO, TAMAÑO Y FORMATO PARA IMÁGENES DE ALTO RENDIMIENTO Y OPTIMIZADAS

El peso de las imágenes dependerá obviamente del lugar que deberán de ocupar en la pagina en si pero, por regla general deberían de seguir el siguiente orden, ordenado de mas recomendado a menos recomendado: WEBP/WEBM -> JPG (Con compresión cercana al 100%) -> PNG EL TIFF no se recomienda para el mundo digital, pero si es preciso que los clientes se bajen una imagen de una calidad excelente y con mínima compresión/procesamiento es el que deberán usar. El tamaño máximo no debería de exceder nunca los 300KB o 400KB como mucho, y la media recomendada debería oscilar entre 50-150, en caso de slides, que no pasen de 200

INSTALAR WPROCKET

Se debe seguir el siguiente manual para optimizar las paginas, se actualizará esta pagina para albergar el manual, por ahora referir-se a este documento --> clic aquí

FICHERO DE NGINX

Esta parte en principio ya esta hecha ya que es a nivel de servidor, aun asi la dejo por aqui por si hiciera falta algún dia, simplemente entrar a /etc/nginx/nginx.conf i poner dentro de http i preferiblemente debajo de la linia "gzip on" lo siguiente:

MODIFICAR .HTACCESS

Se deben añadir las líneas de código siguientes al inicio del fichero .htaccess del dominio del cliente, esto lo que hace es habilitar la compresión del contenido antes de ser enviado, de esta manera conseguimos empaquetar todo antes de enviar i no inundamos el servidor a miles de peticiones.

1. JOSE AÑADIDO PARA MEJORAR CARGA

gzip on;
gzip_vary on;
gzip_min_length 10240;
gzip_proxied expired no-cache no-store private auth;
gzip_types
text/css
text/plain
text/javascript
application/javascript
application/json
application/x-javascript
application/xml
application/xml+rss
application/xhtml+xml
application/x-font-ttf
application/x-font-opentype
application/vnd.ms-fontobject
image/svg+xml
image/x-icon
image/jpg
image/png
image/webp
video/webm
application/rss+xml
application/atom_xml;
gzip_disable "MSIE [1-6]\.";

1. FINAL JOSE AÑADIDO
   

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE image/jpg
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE image/webp
AddOutputFilterByType DEFLATE video/webm
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType video/webm "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

PASOS FINALES

Ahora que ya hemos hecho todo esto debemos volver a analizar la pagina con la utilidad de Google PageSpeed y documentarlo juntamente con los resultados anteriores, si se han seguido los pasos y no ha ocurrido nada fuera de lo normal debería mejorar bastante.