По мере увеличения пропускной способности на веб-страницах появляется все больше и больше объектов, поэтому ускорение открытия веб-страниц по-прежнему остается важной проблемой. Есть три способа ускорить открытие веб-страниц: один — увеличить пропускную способность сети, другой — оптимизировать локальный компьютер пользователя, а третий — до определенной степени оптимизировать веб-страницу с помощью дизайнера веб-сайта. Эта статья написана с точки зрения веб-дизайнера и содержит несколько советов по оптимизации скорости загрузки веб-страниц.
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;
поле справа: 20 пикселей;
нижнее поле: 10 пикселей;
Margin-left: 20px;
вы можете упростить его до:
Margin: 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-адреса, чтобы изменить его на /, чтобы сервер мог сразу понять, что он хочет получить доступ к индексу или файлу по умолчанию в каталоге, тем самым сохраняя время загрузки.
5. Разметка высоты и ширины
очень важна, но многие из-за лени или других причин всегда игнорируют это. Когда вы добавляете изображения или таблицы на веб-страницу, вам следует указать их высоту и ширину, то есть параметры высоты и ширины. Если браузер не находит эти два параметра, ему необходимо рассчитать размер при загрузке изображения. Если изображений много, браузеру необходимо постоянно корректировать страницу. Это не только влияет на скорость, но и влияет на удобство просмотра.
Ниже приведен относительно удобный код изображения:
<img id="moon" height="200" width="450" src=" />
Когда браузер знает параметры высоты и ширины, даже если изображение не может быть отображено. временно страница также освободит место для изображений, а затем продолжит загрузку следующего контента. В результате время загрузки сокращается, а удобство просмотра улучшается.
6. Уменьшите количество HTTP-запросов,
когда средство просмотра открывает файл
.веб-странице браузер будет выдавать множество запросов объектов (изображений, скриптов и т. д.), в зависимости от задержки в сети каждый объект будет задерживаться. Если на веб-странице много объектов, это может занять много времени. времени.
Итак, какуменьшить
нагрузку на http-запросы?
Несколько ненужных объектов.2. Объединить два соседних изображения в одно.
3. Объединить CSS.
Необходимо загрузить три CSS.
＜ссылка rel="stylesheet" type="text/css" href="/body.css" />
＜ссылка 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. Статистический код размещен в конце страницы.