Большинство пользователей своих ресурсов занимаются украшениями своих сайтов, запихивая в него все, что только считают нужным, не понимая даже о том что еще в первую очередь, сайт, должен быть еще и оптимизирован на скорость его открытия не только в ПК но еще и на мобильных ресурсах.
Например, если зашедший на ваш ресурс человек будет набл.дать на ней длительную загрузку, то он уйдет и не будет ждать, когда у вас там покрутятся какие-то колесики загрузки, тупо созданные для красоты. Но ладно это может быть красиво с ПК и можно смотреть на загрузку хроть минуту, а вот различных мобильных приложений, не очень есть хорошо, дабы человек на сайт заходит за ИНФОРМАЦИЕЙ, а не смотреть на красоту исполнения дизайна и разных загрузчиков.
Промониторив интернет и тем более когда я сам для себя занимаюсь созданием сайтов, прочитав несколько статей по оптимизации понял, что красота красотой, а вотоптимизация на скорость загрузки еще никому не помешает. На данный момент существует огромное количество сервисов для анализа скорости загрузки сайта и выявления проблемных мест, но несмотря на это, большинство сайтов все еще не оптимизированы надлежащим способом.
Хочу обратить внимание: если вы проверяете свой сайт только в сервисе Google PageSpeed Insights, то в процессе изучения поймете, что большое количество параметров там скрыто и не показывается, несмотря на то что все равно влияет на скорость загрузки сайта.
Под понятием "Рамки оптимизации скорости сайта" я понимаю такой объем CSS, JS, картинок и других файлов, которые загружаются на вашем сайте.
Итак, разберемся для начала к оптимизации изображений
Используйте изображения именно того разрешения, которое необходимо на странице.
Часто встречаются ситуации, когда используются изображения, у которых разрешение большое (например, 800x600px), а на странице используется лишь миниатюра (например, 300x225px). Особенно часто встречается данная ошибка при создании фотогалерей. Используйте только то разрешение изображения, которое необходимо в конкретной ситуации.
Оптимизировать изображения: PNG, JPG можно с помощью данного сервиса
Сжать CSS файлы можно сжать вот этим сервисом, кстати им постоянно пользуюсь и я сам hammga, или cssminifier
Сжимайте все доступные для вас JS файлы
Предлагаю также воспользоваться такими сервисом которым работаю и оптимизирую сам, это JavaScript Compression Tool
Загружайте все CSS и JS файлы в самом конце вашей страницы, по возможности в нижнюю часть сайта.
Между тегами на страницах вашего сайта
Код
<style> и </style>
вставить самые важные CSS свойства.
Самое важное, это если вы берете скрипты с сторонних сайтов, то обязательным условием - удалите из адресов JS и CSS файлов все строки, которые указывают версию скрипта или стиля и т.д. Особенно если там стоят ссылки на авторство, дабы будет идти подгрузка ссылки на другой сайт через скрипт или файл CSS
Ну на этом практически и все. У кого какие имеются добавления, то рады будем видеть данное в ответах к данной теме. Будем вместе делиться полезными материалами и вместе сделаем наши сайты, еще быстрее и комфортнее!
Сообщение отредактировал workman - Четверг, 19 Октября 2017, 15:35
Дааааа... Хотя некоторые не понимают что все это старо как .... мамонта )) и запуливают кучу ненужных скриптов а потом не понимают откуда появляется тормоз на сайте ))
Привык пользоваться вот этим сервисом - Доступно только для пользователей, что там сразу можно на одной странице оптимизировать, кодировать\декодировать. Ну и стили и скрипты подключаются в таком приоритете, как они используются: когда какой-то модуль отдельно или страница использует эти ресурсы дополнительные, то вполне есть смысл не подключать стили в общую таблицу стилей (или скрипты все в один заливать, что от сайта идут), а подключить отдельно в этот модуль или страницу. Стилизацию можно запаковывать вместе со скриптом, когда от стилей "проку нет" (ввиду того, что какой-то элемент дизайна выводиться этим скриптом, вот и выходит, что отключают поддержку js в браузере - стилям не к чему крепиться, тогда всё скопом в один файл можно запаковать, ведь без js стили будут уже как довесок). Еще выводят полноразмерные изображения в качестве превью - вообще жесть, ведь в виде материалов по приоритету выводить нужно уменьшенную копию изображения (ясное дело, что от вида материалов зависит, но в большинстве случаев - визуально делают через стили уменьшение полноразмерных изображений, а в некоторых случаях - вообще постер выводиться из поля скриншот). Я про это говорю:
Тут мы видим, что визуально вывод будет уменьшенной копии изображения идти, а не так, что полноразмерное изображение стилем уменьшается до размеров уменьшенной копии - в ПУ размеры настраиваются, чтобы добиться оптимальных настроек (когда соотношение веса\искажения внешнего вида будет оптимальным).
В дополнение, когда вы видите стили, которые в комке, то есть онлайн оптимизатор CSS, что раскидает их по полочкам. Но если только там какой то эффект установлен, то его лучше не прогонять.
