ZorNet.Ru — сайт для вебмастера » HTML и CSS » Увеличиваем скорость загрузки сайта

Увеличиваем скорость загрузки сайта

Увеличиваем скорость загрузки сайта
Большинство пользователей своих ресурсов занимаются украшениями своих сайтов, запихивая в него все, что только считают нужным, не понимая даже о том что еще в первую очередь, сайт, должен быть еще и оптимизирован на скорость его открытия не только в ПК но еще и на мобильных ресурсах.

Например, если зашедший на ваш ресурс человек будет набл.дать на ней длительную загрузку, то он уйдет и не будет ждать, когда у вас там покрутятся какие-то колесики загрузки, тупо созданные для красоты. Но ладно это может быть красиво с ПК и можно смотреть на загрузку хроть минуту, а вот различных мобильных приложений, не очень есть хорошо, дабы человек на сайт заходит за ИНФОРМАЦИЕЙ, а не смотреть на красоту исполнения дизайна и разных загрузчиков.

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

Хочу обратить внимание: если вы проверяете свой сайт только в сервисе Google PageSpeed Insights, то в процессе изучения поймете, что большое количество параметров там скрыто и не показывается, несмотря на то что все равно влияет на скорость загрузки сайта.

Под понятием "Рамки оптимизации скорости сайта" я понимаю такой объем CSS, JS, картинок и других файлов, которые загружаются на вашем сайте.

Итак, разберемся для начала к оптимизации изображений

Используйте изображения именно того разрешения, которое необходимо на странице.

Часто встречаются ситуации, когда используются изображения, у которых разрешение большое (например, 800x600px), а на странице используется лишь миниатюра (например, 300x225px). Особенно часто встречается данная ошибка при создании фотогалерей. Используйте только то разрешение изображения, которое необходимо в конкретной ситуации.

Оптимизировать изображения: PNG, JPG можно с помощью данного сервиса

Научитесь уменьшать количество запросов

Объедините все CSS файлы в один это уменьшит количество запросов к серверу. Плагины для сборщиков gulp-concat-css, grunt-concat-css, css-concat-loader

Объедините все доступные вам JS файлы в один по возможности gulp-concat-js, или этим сервисом Конвертер HTML в PHP, JavaScript, ASP

Оптимизируйте CSS и JS

Сжать CSS файлы можно сжать вот этим сервисом, кстати им постоянно пользуюсь и я сам hammga, или cssminifier

Сжимайте все доступные для вас JS файлы

Предлагаю также воспользоваться такими сервисом которым работаю и оптимизирую сам, это JavaScript Compression Tool

Загружайте все CSS и JS файлы в самом конце вашей страницы, по возможности в нижнюю часть сайта.

Между тегами на страницах вашего сайта
Код
<style> и </style>
вставить самые важные CSS свойства.

Самое важное, это если вы берете скрипты с сторонних сайтов, то обязательным условием - удалите из адресов JS и CSS файлов все строки, которые указывают версию скрипта или стиля и т.д. Особенно если там стоят ссылки на авторство, дабы будет идти подгрузка ссылки на другой сайт через скрипт или файл CSS

Ну на этом практически и все. У кого какие имеются добавления, то рады будем видеть данное в ответах к данной теме.
Будем вместе делиться полезными материалами и вместе сделаем наши сайты, еще быстрее и комфортнее! 09a
19 Октября 2017 Просмотров: 1724 Комментариев: (16)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 16
workman
workman 19 Октября 2017 17:321
0
Вот когда практически вы все сделали на своем ресурсе, то можно сжать CSS как я сжал для ускорения страницы на сайте который делал. Если же прописать неожиданно решили какие-то стили или что-то поправить, то можно также вернуть стили в исходный вид
Kosten
Kosten 19 Октября 2017 18:282
0
По сути в CSS стили нужно прописывать а не style в код.
workman
workman 19 Октября 2017 18:383
0
Нет. Немного не правильно. На отдельных страницах лучше привязать стили именно к самой странице именно так, чтобы было меньше запросов.
Ну или закрыть в ФМ, в robots.txt тогда вообще папку, например
Код
Disallow: /css/
workman
workman 19 Октября 2017 18:454
0
как у тебя на новостях стоит к примеру картинка .. Сам наверное знаешь и видишь. А можно просто было сделать и так
Код
<div class="article_image bw"><a href="/_ld/82/47859168.jpg" class="ulightbox"><img src="/_ld/82/47859168.jpg" alt="Увеличиваем скорость загрузки сайта"  title="Увеличиваем скорость загрузки сайта" class="novost"></a></div>

Код
.novost{
padding:1px;
border: 3px solid #FCFCFC;  
border-radius: 5px;  
-webkit-border-radius: 5px;  
-moz-border-radius: 5px;  
width:95%;  
height:250px;
box-shadow: 0px 0px 1px 1px rgba(139, 139, 139, 0.57);
}
workman
workman 19 Октября 2017 18:505
0
И я бы сделал вместо title поставил бы еще и alt="zornet.ru"
workman
workman 19 Октября 2017 18:456
0
как у тебя на новостях стоит к примеру картинка .. Сам наверное знаешь и видишь. А можно просто было сделать и так
Код
<div class="article_image bw"><a href="/_ld/82/47859168.jpg" class="ulightbox"><img src="/_ld/82/47859168.jpg" alt="Увеличиваем скорость загрузки сайта"  title="Увеличиваем скорость загрузки сайта" class="novost"></a></div>

Код
.novost{
padding:1px;
border: 3px solid #FCFCFC;  
border-radius: 5px;  
-webkit-border-radius: 5px;  
-moz-border-radius: 5px;  
width:95%;  
height:250px;
box-shadow: 0px 0px 1px 1px rgba(139, 139, 139, 0.57);
}
Kosten
Kosten 19 Октября 2017 19:037
0
На новости пора вид материала ставить, хорошо что адаптивные есть.
workman
workman 19 Октября 2017 19:098
0
Удали некоторые тут повторяющиеся коды мои а то немного подзависло и накидало ))
Kosten
Kosten 19 Октября 2017 19:129
0
А на яндекс есть проверка скорости?
workman
workman 19 Октября 2017 19:4910
+1
Нет на Яше нет,но есть круче сервисы которые покажут даже то что тормозит на сайте WebPagetest и GTmetrix
VIP36RUS
VIP36RUS 19 Октября 2017 20:3111
0

С учётом того что у меня не ucoz
Kosten
Kosten 19 Октября 2017 20:4212
0
Почему с учетом, что не конструктор? Что на нем постоянно включен ручник?
VIP36RUS
VIP36RUS 19 Октября 2017 20:4813
0
Движок с огромным функционалом
На скрине это только список CSS от одного стиля
workman
workman 19 Октября 2017 20:5914
0
А вот мои показатели
workman
workman 19 Октября 2017 21:0015
0
1 2 »
avatar