5 советов по HTML для создания быстрой загрузки бесплатного сайта

Реклама

мой ЧАСYperTвн Markup LНавыки anguage (HTML) наверняка заржавели, но, возможно, это подходит мне для этой статьи. Назад в тот день, когда друзья все еще был на ТВ, и AOL ежедневно рассылал бесплатные подставки и мини-фрисби, я создавал сайты для загрузки по модемам. Время шло, у меня хватило смелости подумать, что есть еще много людей с неширокополосными (коммутируемыми) соединениями, и я продолжал разрабатывать веб-сайты на основе этого.

Наконец я сдался веб дизайн и разработка Хотите узнать веб-дизайн? 7 каналов YouTube для начала работыНа YouTube есть тысячи видео и каналов для начинающих веб-дизайнеров. Здесь мы рассмотрим некоторые из лучших для начала. Читать далее когда качество контента стало вытесняться количеством контента. Flash-сайты, множество изображений, всплывающие окна, всплывающие окна, ползунки и т. Д. Доверьтесь качественному контенту, и вам не нужен этот пух. Доверьтесь своему контенту, и вы сможете сделать свой сайт невероятно быстрым.

С веб-сайтом, размещенным на бесплатном сервисе, быстрее

определенно лучше. Почему? Потому что «бесплатно», как правило, привлекает много людей, и сервер должен заполнить вашу страницу плюс тысячи страниц других людей, которые не оптимизированы. Это все равно что пытаться передать конвой из логов Кенворта с вашими свиньями Джимми Хаулина. Но если у вас есть маленький Porsche, это сделать намного проще.

Вот несколько советов, чтобы обрезать жир, в произвольном порядке.

1. Используйте таблицы экономно

Столы подвох-22. Вначале они использовались для разметки дизайна, а также для размещения контента в табличном формате. По мере того, как макеты дизайна усложнялись, таблицы становились все больше и глубже встраивались, а это всегда означает замедление времени загрузки.

Сascading Sмозоль SХиты (CSS) пришли и действительно помогли проблему использования таблиц для разметки. К сожалению, создатели браузеров, похоже, не могли сосредоточиться на идее стандартов - и все еще не могут. То, что выглядело великолепно в CSS в Firefox, выглядело как собачий завтрак в IE и, возможно, даже не отображалось в Safari. Не заводи меня на IE5 на Mac. Я все еще нахожусь в терапии по этому поводу.

Пожалуйста, используйте только таблицы для размещения содержимого, которое должно быть в табличный формат Tableizer: создание HTML-таблицы из электронной таблицы Excel Читать далее - как прайс-лист или хоккейная статистика. Это уменьшает количество таблиц и глубину вложенности, что означает более быстрое время загрузки. Изучение CSS 5 лучших сайтов для изучения CSS онлайн Читать далее будет иметь большое значение, если вы должны иметь причудливый макет.

2. Используйте HTML для создания цвета

Да, я канадец, так что это цвет с «ты» для меня. Я знаю, что HTML ориентирован на Америку, поэтому атрибут «цвет». Узнай свой шестнадцатеричные цветовые коды и использовать их для оживления контента вместо изображений.

Попробуйте добавить атрибут color к вашим элементам HTML, чтобы оживить его. Это особенно хорошо работает в таблицах или теге body, например:

Если бы вы были браузером, вы бы быстрее загружали простые 7 символов #FF00FF или 10х10 пиксельное изображение цветной фуксии несколько тысяч раз? Это риторический вопрос, ты в заднем ряду. Положи руку вниз.

3. Ссылка на скрипты / таблицы стилей

Если вы используете определенный JAVAScript (JS) или CSS несколько раз по всему вашему сайту, подумайте о создании своего собственного файла и его вызове, вместо того, чтобы размещать его на каждой странице. Поскольку браузер имеет тенденцию кешировать файл и вызывать этот файл, прежде чем проверять его на сервере, в вашем браузере уже будет готов этот скрипт или CSS. Это значит меньше ЧАСYperTвн Transfer пrotocol (HTTP) вызовы, что означает более быструю загрузку страницы.

Как вызвать внешний JavaScript:

–>

Почему я поместил эти теги комментариев вокруг вызова JavaScript? Потому что не каждый браузер настроен на чтение скриптов. Добавление тегов комментариев делает браузеры с отключенными сценариями просто пропускающими их, вместо того, чтобы выдавать надоедливые сообщения об ошибках.

Как вызвать внешнюю каскадную таблицу стилей:

Это так просто. Атрибут href - это место, где вы устанавливаете местоположение таблицы стилей. Остальные атрибуты сообщают браузеру, что это за файл, поэтому он знает, что с ним делать.

Некоторые разработчики могут использовать @Импортировать метод для вызова таблицы стилей. В Internet Explorer это похоже на тег в нижней части вашего файла, заставляя его загружать всю страницу, а затем отображать стили на нем. Фигово.

4. Объедините ваши обычно используемые сценарии в один файл

Многие веб-разработчики будут использовать одни и те же сценарии снова и снова. Возможно, есть сценарий часов и сценарий календаря и, возможно, какой-то сценарий спецэффектов, который они будут использовать на каждой странице. Вместо 3-х отдельных файлов с 3-мя отдельными HTTP-вызовами поместите сценарии в один файл и вызовите его один раз. Это сокращает ваши HTTP-вызовы на 66%, и это также кэшируется. Ты скоростной демон, ты! Прежде чем снова поднять руку, да, вы можете сделать то же самое с файлами CSS.

5. Не используйте HTML для изменения размера ваших изображений

Если вы хотите использовать изображение размером 1000 × 1000 пикселей на своей веб-странице, но хотите, чтобы оно было только 250 × 250 пикселей, измените его в редакторе изображений. Некоторые люди «уменьшают» изображение, используя HTML, например:

Если размер изображения 1000 × 1000 пикселей составляет 2 МБ, изменение его размера с помощью HTML не уменьшит размер файла! На самом деле загрузка может занять больше времени, потому что теперь браузер должен поместить 10 фунтов корма в мешок весом 2 фунта, так сказать. Задача не из легких.

Надеюсь, эти советы помогут вам. Напишите мне в комментариях, если вы их используете или у вас есть другие идеи по оптимизации HTML.