Содержание
мой ЧАСYperTвн Markup LНавыки anguage (HTML) наверняка являются ржавыми, но, возможно, это подходит мне для этой статьи. Назад в тот день, когда друзья все еще был на телевидении, и AOL ежедневно рассылал бесплатные подставки и мини-фрисби, я создавал сайты для загрузки по модемам. Со временем у меня хватило смелости подумать, что есть еще много людей, которые не имеют широкополосных (коммутируемых) соединений, и продолжали разрабатывать веб-сайты на основе этого.
Наконец, я отказался от веб-дизайна и разработки
когда качество контента стало вытесняться количеством контента. Флэш-сайты, множество изображений, всплывающие окна, всплывающие окна, ползунки и т. Д. Доверяйте качественному контенту, и вам не нужен этот пух. Доверьтесь своему контенту, и вы сможете сделать свой сайт невероятно быстрым.
С веб-сайтом, размещенным на бесплатном сервисе, определенно лучше, чем быстрее. Зачем? Потому что «бесплатно», как правило, привлекает множество людей, и сервер должен заполнить вашу страницу плюс тысячи страниц других людей, которые не оптимизированы. Это все равно что пытаться передать конвой из логов Кенворта с вашими свиньями Джимми Хаулина. Но если у вас есть маленький Porsche, это сделать намного проще.
Вот несколько советов, чтобы обрезать жир, в произвольном порядке.
1. Используйте таблицы экономно
Столы подвох-22. Вначале они использовались для разметки дизайна, а также для размещения контента в табличном формате. По мере того, как макеты дизайна становились все более сложными, таблицы становились все больше и глубже встраивались, и это всегда означает замедление времени загрузки.
Сascading Sмозоль SХиты (CSS) пришли и действительно помогли проблему использования таблиц для разметки. К сожалению, создатели браузеров, похоже, не могли сосредоточиться на идее стандартов — и до сих пор не могут. То, что выглядело великолепно в CSS в Firefox, выглядело как собачий завтрак в IE и, возможно, даже не отображалось в Safari. Не заводите меня на IE5 на Mac. Я все еще нахожусь в терапии по этому поводу.
Пожалуйста, используйте только таблицы для размещения контента, который должен быть в табличном формате — например, прайс-лист или хоккейная статистика. Это уменьшает количество таблиц и глубину вложенности, что означает более быстрое время загрузки. Изучение CSS
будет иметь большое значение, если вы должны иметь причудливый макет.
2. Используйте HTML для создания цвета
Да, я канадец, так что для меня это цвет. Я знаю, что HTML ориентирован на Америку, поэтому атрибут «цвет». Изучите свои шестнадцатеричные цветовые коды и используйте их для оживления контента вместо изображений.
Попробуйте добавить атрибут color к вашим HTML-элементам, чтобы оживить его. Это особенно хорошо работает в таблицах или теге body, например:
Если бы вы были браузером, вы бы быстрее загружали простые 7 символов #FF00FF или 10х10 пиксельное изображение цветной фуксии несколько тысяч раз? Это риторический вопрос, ты в заднем ряду. Положи руку вниз.
3. Ссылка на скрипты / таблицы стилей
Если вы используете определенный JAVAScript (JS) или CSS несколько раз по всему вашему сайту, подумайте о создании собственного файла и его вызове, вместо того, чтобы помещать его на каждую страницу. Поскольку браузер имеет тенденцию кэшировать файл и вызывать этот файл перед проверкой на сервере, ваш браузер уже будет иметь этот сценарий или готовый к использованию CSS. Это значит меньше ЧАСYperTвн Transfer пrotocol (HTTP) вызовы, что означает более быструю загрузку страницы.
Как вызвать внешний JavaScript:
->
Почему я поместил эти теги комментариев вокруг вызова JavaScript? Потому что не каждый браузер настроен на чтение скриптов. Добавление тегов комментариев делает браузеры с отключенными сценариями просто пропускающими их, вместо того, чтобы выдавать надоедливые сообщения об ошибках.
Как вызвать внешнюю каскадную таблицу стилей:
Это так просто. Атрибут href — это место, где вы устанавливаете местоположение таблицы стилей. Остальные атрибуты сообщают браузеру, что это за файл, поэтому он знает, что с ним делать.
Некоторые разработчики могут использовать метод @import для вызова таблицы стилей. В Internet Explorer это похоже на то, как если бы ваш тег находился внизу файла, заставляя его загружать всю страницу, а затем отображать стили на нем. Нехорошо.
4. Объедините ваши обычно используемые сценарии в один файл
Многие веб-разработчики будут использовать одни и те же сценарии снова и снова. Возможно, есть сценарий часов и сценарий календаря и, возможно, какой-то сценарий спецэффектов, который они будут использовать на каждой странице. Вместо 3-х отдельных файлов с 3-мя отдельными HTTP-вызовами поместите сценарии в один файл и вызовите его один раз. Это сокращает ваши HTTP-вызовы на 66%, и это также кэшируется. Ты скоростной демон, ты! Прежде чем снова поднять руку, да, вы можете сделать то же самое с файлами CSS.
5. Не используйте HTML для изменения размера ваших изображений
Если вы хотите использовать изображение размером 1000 × 1000 пикселей на своей веб-странице, но хотите, чтобы оно было только 250 × 250 пикселей, измените его в редакторе изображений. Некоторые люди «уменьшают» изображение, используя HTML, например:
Если это изображение размером 1000 × 1000 пикселей имеет размер файла 2 МБ, изменение его размера с помощью HTML не приведет к уменьшению размера файла! На самом деле загрузка может занять больше времени, потому что теперь браузер должен поместить 10 фунтов корма в мешок весом 2 фунта, так сказать. Задача не из легких.
Надеюсь, эти советы помогут вам. Напишите мне в комментариях, если вы их используете или у вас есть другие идеи по оптимизации HTML, которыми вы можете поделиться.
