Привет ребят! Сегодня у нас есть гостевой пост о том, как ускорить ваш сайт! В настоящее время он работает на веб-сайте электронной коммерции, и одна из его задач — сделать так, чтобы сайт быстро загружался. Так что наслаждайтесь чтением ниже! ~ Майк
Скорость веб-сайта становится навязчивой идеей поисковых систем, таких как Google, и одной из причин является быстрый рост мобильного интернет-браузера. Если вы работаете с сетью (разработчики, дизайнеры, блоггеры и студенты), теперь необходимо иметь знания для быстрой загрузки сайта, и наша сегодняшняя публикация даст вам некоторые идеи о том, почему и как этого добиться. ,
1.0 A должен прочитать заметку от Google
«Ускорение веб-сайтов важно не только для владельцев сайтов, но и для всех пользователей Интернета. Более быстрые сайты создают счастливых пользователей, и мы видели в наших внутренних исследованиях, что когда сайт реагирует медленно, посетители проводят там меньше времени. Но более быстрые сайты не просто улучшают пользовательский опыт; Последние данные показывают, что повышение скорости сайта также снижает эксплуатационные расходы . Как и мы, наши пользователи придают большое значение скорости — поэтому мы решили учитывать скорость сайта в наших поисковых рейтингах. Мы используем различные источники, чтобы определить скорость сайта по сравнению с другими сайтами ».
2.0 Скорость сайта и производительность
- 2.1. PageSight Insights — анализирует содержимое веб-страницы, а затем генерирует предложения, чтобы сделать эту страницу быстрее.
- 2.2 Тест скорости сайта Pingdom — один из самых надежных тестеров скорости сайта, вы можете проверить время загрузки своей страницы, проанализировать ее и найти узкие места.
- 2.3 Yslow — это также плагин, который оценивает сайт и предоставляет статистическую информацию о производительности вашего сайта.
- 2.4 GTmetrix — предоставляет результат сразу и предлагает необходимые улучшения для вашего сайта:
- 2.5 Weboptimization — анализирует и дает подробные рекомендации по улучшению сайта, а также отчет о скорости вашей веб-страницы.
3.0 Оптимизация изображения
- 3.1 Photoshop — при сохранении фотографии выберите опцию «Сохранить как для Интернета и устройств» (более подробную инструкцию см. В сообщении Майка здесь ). Сравните результат вашего изображения с его оригинальным размером; посмотрите также, изменилось ли визуальное качество. На моем примере изображения это результат моих тестов.
- JPG, 60 качество — 32K
- PNG-8, 256 цветов — 37K
- GIF, 256 цветов — 42K
- PNG-24 — 146K
- 3.2 Yahoo Smush.It — «перетащите или вставьте URL-адреса своей фотографии». Это инструмент без потерь, который означает, что он оптимизирует изображения без изменения их внешнего вида или визуального качества.
- 3.3 Оптимизатор изображения — это также бесплатный инструмент, который может сжимать изображения в больших объемах.
Совет: обрежьте пробелы в изображениях и других ненужных пикселях, чтобы уменьшить размер файла.
4.0 Сжатие вашего HTML, CSS и JavaScript
- 4.1 HTMLCompressor — это небольшая java-библиотека, которая минимизирует коды в html и xml, удаляя ненужные символы и пробелы без изменения ваших кодов.
- 4.2 JSCompress — скопируйте, вставьте свой код JavaScript и сожмите его в Интернете, чтобы уменьшить количество ненужных символов или комментариев на 30-90%.
- 4.3 Prettydiff — Минимизируйте, украсьте и сравните ваш код онлайн. Этот инструмент используется W3.org и Travelocity.
- 4.4 MinifyCSS — имеет инструмент сжатия css и javascript . Это поможет вам чистить и сжимать коды, не манипулируя и не устанавливая другие приложения. Скопируйте и вставьте свой код онлайн, а затем получите тот же результат.
Примечание: если вы уже используете gzip, вам не нужно использовать некоторые из инструментов, рекомендованных выше.
5.0 Лучшие практические рекомендации
- 5.1 Сценарии
- 5.1.1. Положение скрипта — всегда ставьте свои скрипты Java в конце документа HTML, обычно перед конечным тегом </ body>. Он загружает более важный контент вашей страницы (например, изображения, текст и т. Д.) Перед сценариями, что ускоряет загрузку вашей страницы.
- 5.1.2. Использовать внешний CSS вместо встроенного CSS.
Хорошая практика:
1<linktype='text/css'rel='stylesheet'href='//www.yoursite.com/styles/main.css'/>Не рекомендуется включать в ваш HTML-документ:
0102030405060708091011<style>.myClass{padding:0 .5em;margin:1em;}#myId{padding:.5em;border:thin solid red;}</style>или же
1<divstyle='width:20em; border:thin solid #d1d1d1;'>Some div contents here.</div> - 5.1.3. Объедините правила и используйте их один раз в CSS.
Используйте этот образец в качестве руководства:
12h1 { color: blue; }p { color: blue; }Комбинированное правило:
1h1, p { color: blue; } - 5.1.4 Проверьте ваш скрипт на W3.Org Validator
- 5.2 Кэширование — Кэшируйте ваши веб-страницы. Это очень важно, особенно для сайта электронной коммерции и тех сайтов, которые ежедневно посещают много посетителей.
- 5.3 Блок комментариев — Если вы, ребята, используете систему блоков комментариев, пожалуйста, лениво загружайте ее, чтобы она загружалась только тогда, когда пользователь достигнет нижней части вашей страницы.
- 5.4 CDN (сеть распространения / доставки контента)
- 5.4.1 Некоторые могут быть не знакомы с Google CDN, но потратить некоторое время на изучение и использование размещенных библиотек.
- 5.4.2 Cloudflare — мы использовали это на нашем сайте электронной коммерции и на других сайтах в течение почти 3 лет, и до сих пор мы защищены, и это бесплатно, но они также предлагают предварительные услуги за плату.
- 5.5 Используйте коды HTML5, которые дают вам решение для более быстрой производительности страницы и интеграции
Наш пример HTML5:
1<!DOCTYPEhtml>Вместо:
1<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Примечание. Некоторые учебники для вас, чтобы выучить HTML5, — мои любимые сайты, когда я начинал w3schools и заранее изучал html5.
6.0 Услуги хостинга
Проверьте ваши услуги хостинга, если они предоставляют вам лучшее решение для хостинга и лучшую производительность в Интернете. Вы можете проверить их веб-сайт, используя вышеуказанные инструменты. Общий хостинг, как правило, худший, особенно если на вашем сайте много посетителей, у вас должен быть выделенный сервер.
Спасибо, ребята, за то, что прочитали мои идеи, я надеюсь, что вы получите новые методы для улучшения скорости вашего сайта или проектов. Давайте поможем друг другу стать лучшим дизайнером и разработчиком.