Скорость широкополосного доступа улучшается, но вес страницы все еще имеет значение . Если ваши веб-страницы стали немного раздутыми, подумайте о тех людях, которые используют медленные соединения или используют мобильные устройства. Будут ли они покупать ваши услуги, если вы заставите их подождать несколько минут до вашего 5 МБ чудовища?
Можно создавать версии вашего сайта для мобильных устройств или с низкой пропускной способностью, но лишь немногие из нас имеют время или ресурсы для создания и тестирования нескольких версий контента. Но нет никаких оправданий тому, что вы не в форме, особенно когда Google может понизить ваш рейтинг . Страницы Leaner появляются быстрее, снижают ваши расходы на хостинг, сохраняют здоровье вашего клиента и не наносят вреда окружающей среде!
Вот 9 причин, по которым ваш сайт может набирать вес …
1. Поверхностная реклама
Нам всем нужно немного заработать, но реклама может стать основной причиной увеличения пропускной способности. Большинство из них графические, и многие используют анимацию или видео, чтобы привлечь внимание.
Существует несколько способов борьбы с нежелательным рекламным ожирением:
- Не переусердствуйте. Реклама отвлекает, и хотя большинство пользователей сети ожидают нескольких, не бомбардируйте людей десятками мигающих изображений. Меньше рекламы может получить больше кликов, если ваша страница не выглядит как рекламная рвота.
- Удалить рекламу, которая не работает. Если за 5 лет огромная реклама принесла 0,03 доллара, возможно, вы сможете лучше использовать это пространство.
- Попробуйте текстовые объявления.
2. Неправильное использование плагинов
Давайте будем откровенны — я говорю о Flash. Несмотря на то, что думает Apple , у Flash есть свои плюсы. Но текстовое содержимое, эффекты прокрутки и простые навигационные меню — не лучшее использование этой технологии.
3. Не оптимизировать изображения
Если есть одна вещь, которую я ненавижу, это изображения, которые не были изменены для Интернета! Разрешения цифровых камер достигли смехотворно высокого уровня, но никто не хочет загружать фотографию вашей собаки размером 2 000 пикселей. Изменение размеров высоты и ширины в теге img
При сохранении не забудьте использовать лучший формат и максимально возможное сжатие. В целом, фотографии лучше в формате JPG, а графика лучше в формате PNG или GIF. Однако вам нужно будет поэкспериментировать с форматами и степенями сжатия, чтобы максимально эффективно использовать изображения.
Наконец, следите за масштабируемой векторной графикой (SVG) . Они могут революционизировать производство изображений и размеры файлов, если Microsoft выполнит свое обещание добавить SVG в IE9 .
4. Не использовать спрайты изображений
Множество маленьких изображений обычно дают большую пропускную способность, чем одно большое изображение. Каждое изображение требует отдельного HTTP-запроса / ответа, и большинство браузеров загружают не более 4 файлов одновременно. Помещение множества изображений в один файл с последующим разделением их с помощью свойства background-position У Amazon.com есть отличный пример .
5. Чрезмерная зависимость от JavaScript-фреймворков
Я ничего не имею против jQuery и подобных библиотек, но будьте осторожны, если будете слишком зависимы от них. Использование двух или более библиотек для эффектов также может быть расточительным.
Веб- сайт W3C является ярким примером: он загружает файл размером 22 Кб, содержащий jQuery и плагин для обработки основных переключений таблиц стилей. Это могло быть написано в дюжине строк JavaScript с лучшей поддержкой браузера.
6. Неэффективный HTML
Лучший HTML — это простой, чистый и простой в обслуживании. Ваш код может выйти из-под контроля, если вы добавите 15 вложенных тегов div
Отчасти виноваты пакеты дизайна WYSIWYG. У них есть свое место, но не считайте себя веб-разработчиком, пока у вас нет достаточных знаний HTML!
Старые версии веб-форм Visual Studio и ASP.NET также могут создавать действительно шокирующую и многословную разметку. Visual Studio улучшена , но даже предыдущие версии могут генерировать чистый код. Будьте осторожны при перетаскивании элементов управления и проверяйте полученный HTML-код.
7. Встраивание CSS и JavaScript
CSS и JavaScript должны содержаться во внешних файлах, которые можно кэшировать и повторно использовать на каждой странице вашего сайта. Нет никакого оправдания для наполнения вашего HTML встроенными стилями и обработчиками событий.
Я также рекомендую размещать теги script</body> Затем страницу можно просмотреть, прежде чем какие-либо скрипты будут загружены и выполнены.
8. Не использовать CSS-каскады или сокращенную запись
Небольшое знание CSS может иметь большое значение. Начинающие кодеры часто применяют классы к каждому элементу HTML и устанавливают свойства, такие как font-family Небольшое фоновое чтение может значительно сократить время кодирования и размеры файлов таблиц стилей.
Не забывайте и сокращенную запись. Следующие фрагменты кода стилистически идентичны …
Избыточный вес CSS:
#element
{
margin-top: 0px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 20px;
background-color: #aabbcc;
background-image: url("myimage.png");
background-position: center center;
background-repeat: no-repeat;
}
Тонированный CSS:
#element
{
margin: 0 5px 10px 20px;
background: #abc url(myimage.png) 50% 50% no-repeat;
}
9. Не использовать сжатие
Ваш сервер может сжать файлы перед их отправкой в браузер. Файлы HTML, CSS и JavaScript могут быть сжаты путем удаления комментариев и лишних пробелов. Существует множество инструментов и приложений, которые помогут вам извлечь максимум из файлов перед развертыванием или автоматически во время выполнения.
Знаете ли вы о каких-либо других причинах ожирения веб-страницы? Комментарии приветствуются …