Пропускная способность Интернета становится все шире и шире, что, похоже, привело к качественному скачку в скорости загрузки веб-страниц. На самом деле это не так, поскольку с увеличением пропускной способности на веб-странице появляется все больше объектов, поэтому увеличение скорости открытия веб-страниц по-прежнему остается важным вопросом. Есть три способа ускорить открытие веб-страниц: один — увеличить пропускную способность сети, другой — оптимизировать локальный компьютер пользователя, а третий — до определенной степени оптимизировать веб-страницу с помощью дизайнера веб-сайта. Эта статья написана с точки зрения веб-дизайнера и содержит несколько советов по оптимизации скорости загрузки веб-страниц.
1. Оптимизируйте изображения.
Практически не существует веб-страницы без изображений. Если вы пережили эпоху 56К котов, вам не понравятся сайты с большим количеством картинок. Потому что загрузка такой веб-страницы займет много времени.
Даже сейчас пропускная способность сети значительно улучшилась и коты 56К постепенно исчезают. Оптимизировать изображения для ускорения веб-страниц по-прежнему необходимо.
Оптимизация изображений включает в себя уменьшение количества изображений, снижение качества изображений и использование соответствующих форматов.
1. Уменьшите количество картинок: удалите ненужные картинки.
2. Уменьшите качество изображения. Если в этом нет необходимости, попробуйте снизить качество изображения, особенно в формате jpg. Снижение качества на 5 % может показаться незначительным изменением, но изменение размера файла относительно велико.
3. Используйте соответствующее форматирование: см. следующий пункт.
Поэтому вам необходимо отредактировать изображение перед его загрузкой. Если вы считаете, что Photoshop — это слишком сложно, вы можете попробовать некоторые онлайн-инструменты для редактирования изображений. Вам лень редактировать, но вы хотите добавить к своим фотографиям специальные эффекты? Вы можете попробовать вызвать JavaScript для достижения эффектов изображения.
2. Выбор формата изображений
Обычно на веб-страницах используются три формата изображений: jpg, png и gif. Конкретные технические показатели трех форматов не входят в содержание этой статьи. Нам нужно только знать, какой формат следует использовать, чтобы сократить время загрузки веб-страницы.
1. JPG: обычно используется для отображения фотографий пейзажей, людей и художественных фотографий. Иногда используется в компьютерных скриншотах.
2. GIF: он обеспечивает меньше цветов и может использоваться в местах, где требования к цвету не высоки, например, логотипы веб-сайтов, кнопки, смайлы и т. д. Конечно, важное применение gif – это анимированные картинки. Как изображение отражения, сделанное с помощью Lunapic.
3. PNG. Формат PNG обеспечивает прозрачный фон и представляет собой формат изображения, специально разработанный для отображения веб-страниц. Обычно используется на веб-страницах, требующих прозрачного фона или высоких требований к качеству изображения.
3. Оптимизация CSS
Каскадные таблицы стилей CSS повышают эффективность загрузки веб-страниц и удобство просмотра. С помощью CSS можно отказаться от макета таблицы.
Но иногда при написании CSS мы используем более многословные выражения, например это предложение:
margin
-top: 10px;
margin
-right: 20px
;
margin-left: 20px;
10px 20px 10px 20px;
или это предложение:
<p class="decorated">Абзац декорированного текста</p>
<p class="decorated">Второй абзац</p>
<p class= ”decorated”>Третий абзац </p>
<p class="decorated">Четвертый абзац</p>
может быть включен в div:
<div class="decorated">
<p>Абзац оформленного текста</p>
<p>Второй абзац </p>
<p>Третий абзац</p>
<p>Четвертый абзац</p>
</div>
Упрощение CSS может удалить избыточные атрибуты и повысить эффективность работы. Если вам лень упрощать CSS после его написания, вы можете использовать некоторые онлайн-инструменты для упрощения CSS, такие как CleanCSS.
4. Добавьте косую черту после URL-адреса.
Для некоторых URL-адресов, например «www.kenengba.com/220», когда сервер получает такой запрос адреса, требуется время, чтобы определить тип файла этого адреса. Если 220 — это каталог, вы также можете добавить дополнительную косую черту после URL-адреса, чтобы сделать его www.kenengba.com/220/ , чтобы сервер мог сразу понять, что он хочет получить доступ к индексу или файлу по умолчанию в каталог, тем самым экономя время загрузки.
5. Разметка высоты и ширины
очень важна, но многие из-за лени или других причин всегда игнорируют это. Когда вы добавляете изображения или таблицы на веб-страницу, вам следует указать их высоту и ширину, то есть параметры высоты и ширины. Если браузер не находит эти два параметра, ему необходимо рассчитать размер при загрузке изображения. Если изображений много, браузеру необходимо постоянно корректировать страницу. Это не только влияет на скорость, но и влияет на удобство просмотра.
Ниже приведен понятный код изображения:
<img id="moon" height="200" width="450" src="" <p class="pictext">alt="moon image" />
</p>
When браузер знает параметры высоты и ширины, даже если изображение временно невозможно отобразить, он освободит место для изображения на странице и продолжит загружать следующий контент. В результате время загрузки сокращается, а просмотр становится удобнее.
6. Уменьшите http-запросы.
Когда зритель открывает веб-страницу, браузер выдает множество запросов к объектам (изображениям, сценариям и т. д.). В зависимости от задержки в сети загрузка каждого объекта будет задерживаться. Если на странице много объектов, это может занять много времени.
Поэтому необходимо снизить нагрузку на http-запросы. Как снизить нагрузку?
1. Удалите несколько ненужных объектов.
2. Объедините две соседние картинки в одну.
3. Объедините CSS.
Взгляните на следующий код. Необходимо загрузить три CSS:
<link rel="stylesheet" type="text/css" href="/body.css" />
<link rel="stylesheet". ” type= ”text/css” href=”/side.css” />
<link rel=”stylesheet” type=”text/css” href=”/footer.css” />
Мы можем объединить его в один:
< link rel= ”stylesheet” type="text/css" href="/style.css" />
Таким образом сокращаются HTTP-запросы.
7. Другие советы
1. Удалите ненужные дополнения.
2. Если на веб-страницу встроены виджеты с других веб-сайтов, если у вас есть выбор, обязательно выберите тот, который имеет высокую скорость.
3. Попробуйте использовать картинки вместо flash, что тоже хорошо для SEO.
4. Если какой-то контент можно сделать статическим, сделайте его статическим, чтобы снизить нагрузку на сервер.
5. Статистический код размещен в конце страницы.