El más grande y más popular de su sitio web se convierte, más probable será que la encontrarán desaceleración. páginas web deben cargar rápidamente, sin embargo, no sea que sus visitantes deciden unos pocos segundos extra no vale la pena la espera. técnicas de optimización del tiempo de carga de sitios web incluyen la redacción de un código más limpio, por lo menos peticiones de protocolo de transferencia de hipertexto (HTTP), el uso de hojas de estilo en cascada código (CSS) para sustituir las imágenes voluminosas y comprimiendo su archivos CSS y JavaScript. Puede utilizar todas estas técnicas en conjunto para disminuir sus tiempos de carga de las páginas web y mantener a los visitantes impacientes de volver a su sitio.
Instrucciones
1 Consolidar el CSS en un archivo CSS sola, externa. Hacer esto reduce las peticiones HTTP, que son las peticiones realizadas al servidor cada vez que un navegador carga un nuevo archivo. Abrir todos los archivos CSS - a excepción de las específicas de Internet Explorer (IE) - y luego copiar y pegar en un solo archivo. Guarde el nuevo archivo CSS y luego editar sus etiquetas <link> para reflejar los cambios. Usted debe terminar con una sola etiqueta <link> como este, además de las necesarias para la IE:
<Rel = "stylesheet" type link = "text / css" href = "ruta / a / stylesheet.css" />
2 Utilizar cargadores de JavaScript condicionales para cargar sus retrocesos de JavaScript. Fallbacks crean efectos en los sitios web para los navegadores antiguos que no soportan de forma nativa CSS3 y HTML5. Algunos buenos, libre y de código abierto de JavaScript cargadoras incluyen YepNope.js, Head.js y Require.js. Descargar el que más le guste y lo incluye en el código HTML donde quiera que prefiere poner su JavaScript, ya sea en la cabeza o por debajo del pie de página.
3 Vuelva a colocar gráficos de las esquinas torpe e imágenes de gradiente con técnicas CSS3, tales como radios bordes y relleno de gradiente. "Smashing Magazine" hizo un estudio de referencia de la velocidad y la eficiencia de CSS2 frente técnicas CSS3 en abril de 2011 y se encontró que la página Web de prueba cargado 1,5 segundos más rápido cuando estará con CSS3 para reemplazar gráficos. Proporcionar retrocesos para efectos CSS3 cuando sea necesario, pero cargarlos condicional para evitar la ralentización de los navegadores modernos.
4 Minimizar los archivos CSS y JavaScript después del desarrollo. Cuando Minify un archivo, se quita todo el espacio blanco - espacios y saltos de línea - a partir del código, y esto reduce el tamaño del archivo. Descargar e instalar un Minifier, como JSMin o YUI Compressor. También puede descargar la plancha de caldera de HTML5 por Paul irlandesa, desarrollar su sitio sobre la base de sus archivos y utilizar su script de construcción de minify todos los archivos automáticamente.
5 Escribe limpiador de código CSS. selectores de la cadena para no tener que escribir el mismo código una y otra vez. Aquí está un ejemplo de un selector de cadena:
h1, h2, h3, h4, h5, h6 {text-transform: mayúsculas;}
El CSS anterior selecciona todos los seis etiquetas de título y luego establece su propiedad "text-transform" a "mayúscula".
Consejos y advertencias
- Diseño y desarrollo de los navegadores modernos primero y luego probar y proporcionar correcciones para las versiones anteriores de Internet Explorer.
- Al proporcionar retrocesos, considerar si el efecto que desea apoyar en los navegadores más antiguos es absolutamente necesario para la experiencia del usuario. No todos los visitantes tiene que ver esquinas redondeadas.
- Realizar copias de seguridad de su sitio web antes de editarlos.