×

Поздравления с юбилеем

Сценарии юбилея

Конкурсы на юбилей

Нужное к юбилею

Открытки

HTML,CSS - обучение "сайтостроению" новичков

Оцените материал
(0 голосов)

HTML и CSS: советов, чтобы сайт загружался быстрее

Самая важная часть в разработке сайта — это скорость его загрузки. Перед тем, как вы приступите к оптимизации своего сайта, стоит посмотреть насколько хорошо он работает, подробнее: курсы css, html

Один их способов отследить скорость загрузки — это использовать инструменты сторонних разработчиком, например, Make the Web Faster от Google. Так же вы можете воспользоваться двумя другими инструментами: Pingdom и Yslow. Любой из этих инструментов поможет вам справиться с задачей. Благодаря им вы сможете понять, что ваш сайт может работать быстрее.

Вот несколько наших советов, как ускорить работу сайта.

1. Минимизируйте HTML, CSS и JavaScript. Чтобы преуспеть в этом удалите ненужные комментарии, пробелы и лишний код. В этом вам помогут HTML Compress, YUI Compressor и CSS Compressor.

2. Пользуйтесь внешними CSS и JavaScript. Подгрузка файлов с внешних источников сделает сайт намного быстрее, потому что CSS и JavaScript файлы кэшируются браузером. Если вы используете CSS сразу в странице, расположите ваш код в HEAD. Это позволить внешнему виду страницы загружаться сразу, создавая видимость быстрой работы. JavaScript разметите внизу страницы.

3. Избегайте дублирования на страничке. Этот совет может показаться странным, но разработчики слишком часто забывают об этом. Дублирующиеся JavaScript и CSS файлы буду создавать лишние HTTP запросы и собственно этим и замедлять работу вашей страницы.

4. Оптимизируйте изображение. Сожмите размеры рисунков, используйте только эти форматы: GIF, PNG-8 или JPEG. Убедитесь, что заданный размер картинке соответствует вашим нуждам, пропишите эти размеры (длину и ширину) в коде на каждой странице. Не используйте масштабирование особенно, если вам нужно маленькое изображения из большого. Картинка может выглядеть как нужно на экране, но размер файла останется таким же. Используйте привилегии картинок с низким расширением. Сделать их визуально симпатичными, но при этом не проиграть в размере можно с помощью программ. Так же важно поэкспериментировать со всем указанными выше разрешениями.

5. Используйте GZIP сжатие. Если компания, которая предоставляет вам хостинг, поддерживает GZIP сжатие, обязательно воспользуйтесь им. Такой тип компрессии значительно ускоряет работу сайтов. Он позволяет сжать файлы на 70% при этом без потери качества картинок, без изменения их размеров. В интернете вы можете найти несколько тестеров, которые позволят проверить вам, поддерживается ли такой тип компрессии.

6. Избегайте CSS выражений. Подробно об этом вы можете узнать посетив курсы CSS, выражения (представленные в IE5) позволяют настраивать CSS свойства динамически. Это замедляет сайт, так как выражения инициализируются каждый раз, когда меняется размер сайта, скролится и когда пользователь водит мышкой по сайту.

 

Вывод

Как вы видите, чтобы улучшить производительность ваших веб-страниц, можно сделать многое. Некоторые решения могут быть простыми, в то время как другие могут занять время. Тем не менее, их реализация важна. Ведь, если ваши страницы очень долго грузятся — вы теряете посетителей и клиентов.

 

7. Expires headers. В зависимости от сложности странички, одновременно может быть запущено большое количество HTTP запросов, чтобы загрузить все компоненты. Expires headers кеширует необходимые компоненты, что позволяет избежать ненужных HTTP запросов. Сейчас Expires headers используются зачастую для картинок, но они отлично подходят и для работы со скриптами, силями и Flash.

 

Вывод

Как вы видите, чтобы улучшить производительность ваших веб-страниц, можно сделать многое. Некоторые решения могут быть простыми, в то время как другие могут занять время. Тем не менее, их реализация важна. Ведь, если ваши страницы очень долго грузятся — вы теряете посетителей и клиентов.

Полезные ссылки по курсам css:

  • курсы css и html - itvdn.com/ru/video/html-and-css-renewed
  • курсы css и html - edu.cbsystematics.com/ru/courses/description/html-css