С увеличением пропускной способности на веб -странице все больше и больше объектов, так что это все еще важная тема для ускорения открытия веб -страниц. Есть три способа ускорить открытие веб -страниц: один из них - увеличить пропускную способность сети, второй - оптимизировать пользователя на локальной машине, а третье - оптимизировать веб -страницы дизайнерами веб -сайтов. Эта статья основана на перспективе дизайнера веб -сайта и разделяет несколько советов по оптимизации скорости загрузки веб -страницы.
1. Оптимизируйте картинки
Там почти нет веб -страницы без фотографий. Если вы испытали возраст 56 тыс. Кошек, вы определенно не будете любить веб -сайты с большим количеством фотографий. Потому что загрузка такой веб -страницы займет много времени.
Даже сейчас пропускная способность сети значительно улучшилась, и 56K CAT постепенно исчезла, и все еще необходимо оптимизировать изображения для ускорения веб -страниц.
Оптимизация изображений включает в себя уменьшение количества изображений, снижение качества изображения и использование соответствующих форматов.
1. Уменьшите количество изображений: Удалите ненужные картинки.
2. Уменьшите качество изображения: если это не очень необходимо, попытаться снизить качество изображения, особенно формат JPG.
3. Используйте соответствующий формат: см. Следующий пункт.
Поэтому перед загрузкой фотографий вам нужно отредактировать фотографии. Вы слишком лень, чтобы редактировать, но хотите, чтобы фотографии имели спецэффекты? Вы можете попытаться использовать вызов JavaScript для реализации спецэффектов изображения.
2. Выбор формата изображения
На веб -страницах обычно используются три формата изображений, а именно JPG, PNG и GIF. время веб -страницы.
1. JPG: фотографии, которые обычно используются для отображения ландшафтов, персонажей и художественных фотографий. Иногда это также используется на скриншотах компьютера.
2. GIF: предоставляется меньше цветов и может использоваться в некоторых местах, где нет высокого спроса на цвет, например, логотипы веб -сайта, кнопки, выражения и т. Д. Конечно, важным применением GIF является анимационные картинки. Как отражение, сделанное с лунапическим.
3. PNG: формат PNG может обеспечить прозрачный фон и представляет собой формат изображения, специально изобретенный для отображения веб -страницы. Обычно он используется на веб -страницах, которые требуют прозрачного фонового отображения или требуют высокого качества изображения.
3. Оптимизировать CSS
Листы в стиле наложения CSS делают веб -страницы более эффективными для загрузки и улучшения опыта просмотра. С помощью CSS метод макета формы может быть на пенсии.
Но иногда, когда мы пишем CSS, мы используем более многословные предложения, такие как это предложение:
маржинальная версия: 10px;
Право маржи: 20px;
маржинальный бат: 10px;
Полевая левая: 20px;
Вы можете упростить это до:
Маржа: 10px 20px 10px 20px;
Или это предложение:
＜ p class = "украшен"> абзац украшенного текста ＜/p>
＜ p class = "украшен"> второй абзац ＜/p>
＜ p class = "украшен"> третий абзац ＜/p>
＜ P Class = "Decored"> Форт -абзац ＜/p>
Вы можете использовать Div, чтобы включить:
＜ div class = "украшен">
＜ P> абзац украшенного текста ＜/p>
＜ P> Второй абзац ＜/p>
＜ P> Третий абзац ＜/p>
＜ P> Форт -абзац ＜/p>
＜/div>
Упрощенные CSS могут удалить избыточные атрибуты и повысить эффективность работы. Если вы слишком ленивы, чтобы упростить после написания CSS, вы можете использовать некоторые онлайн -инструменты CSS, такие как CleanCSS.
4. Добавьте черту на заднюю часть URL
Некоторые URL -адреса, например, когда сервер получает такой адресный запрос, требуется время, чтобы определить тип файла адреса. Если Интернет является каталогом, вы можете также добавить дополнительную черту в URL -адрес, чтобы сделать его / чтобы сервер мог четко знать, чтобы получить доступ к файлу индекса или по умолчанию в каталоге, сохраняя тем самым время загрузки.
V. Укажите высоту и ширину
Это важно, но многие люди всегда игнорируют это из -за лени или других причин. Когда вы добавляете изображения или таблицы на веб -странице, вы должны указать их высоту и ширину, то есть параметры высоты и ширины. Если браузер не находит эти два параметра, ему необходимо рассчитать размер при загрузке изображения. Это не только влияет на скорость, но и влияет на опыт просмотра.
Вот относительно дружелюбный код изображения:
＜ Img id = "moon" height = "200" ширина = "450" src = " />
Когда браузер знает параметры высоты и ширины, даже если изображение не может быть отображено на время, изображение будет освобождено на странице, а затем последующее содержание будет продолжать загружаться. Следовательно, время загрузки быстрее, а опыт просмотра лучше.
6. Уменьшите HTTP -запросы
Когда браузер открывает веб -страницу, браузер выпустит много запросов объектов (изображения, сценарии и т. Д.). Если на веб -странице есть много объектов, это может занять много времени.
Поэтому нам нужно сократить бремя на HTTP -запросы. Как уменьшить бремя?
1. Удалите несколько ненужных объектов.
2. Объедините две близлежащие картинки в одну.
3. Merge CSS
Посмотрите на следующий код, и вам нужно загрузить три CSS:
＜ Ссылка rel = "styleSheet" type = "text/css" href = "/body.css"/>
＜ Ссылка rel = "styleSheet" type = "text/css" href = "/site.css"/>
＜ Ссылка rel = "styleSheet" type = "text/css" href = "/cooler.css"/>
Мы можем синтезировать его в один:
＜ Ссылка rel = "styleSheet" type = "text/css" href = "/style.css"/>
Это уменьшает HTTP -запросы.
7. Другие советы (добавлены переводчиком)
1. Удалите ненужные надстройки.
2. Если вы встраиваете виджеты с других веб -сайтов на веб -странице, если у вас есть место для выбора, вы должны выбрать быстрый.
3. Попробуйте использовать изображения вместо Flash, что также полезно для SEO.
4. Если какой -то контент может быть статичным, он будет статичным, чтобы уменьшить бремя на сервере.
5. Статистический код размещается в конце страницы.