Как оптимизировать картинки и css, js файлы?

Question

[Artem Pavliienko]

Всем привет. Есть сайт vlasna.000webhostapp.com в гугл спид показывает 44/48. В файл .htaccess записал срок хранения файлов.
Гугл рекомендует оптимизировать изображения. Сжать и изменить размер. Через tinypng сжимал несколько раз. Некоторых фотографиях уменьшал размер. И все равно пишет:


Так же пишет "Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы". Я не пойму как это исправить.


Так же рекомендовал сжать html, я сжал с помощью npm html-minifier, в итоге он убрал "кавычки", на что w3c валидатор ругнулся. Подскажите пожалуйста как это все исправить?

Answer 1

[dadster]

Там внизу ссылочка, где можно скачать уже оптимизированное.
puu.sh/xLGdB/f8c4482d3f.png

Answer 2

[amorphine]

База.
1. Стили в шапку (в <style></style>)
2. Скрипты в подвал

За PS замечено, что если скорость отклика от сервера низкая, он начинает ругаться на все подряд, в т. ч. будет бесконечно требовать жать картинки, пока от них мыло не останется.

Алсо, помогает прятанье картинок в background.

Answer 3

[WebDev]

Для оптимизации я всегда использую сервис optimizilla.com.
На стили в верхней части я бы забил.
А вообще, зачем вы этим занимаетесь? Минимизация html внучную - это дикость. Или используйте какой-нибудь вебпак, который будет вам все компилировать и сжимать или забейте. Прироста от сжатия вы все равно практически не получите.

Comments

[Artem Pavliienko]

Я вручную и не сжимал)) через npm

Answer 4

[Froggyweb]

Картинки должны быть размера в котором они выводятся чем они сжаты вторично. Если у тебя в иконку грузится пнг 3 мегабайта сам видел такое то быстрой загрузки сайта тебе не видать ну и цифр от пейджспид тоже. Если используется php есть phpthumb. Для популярных cms есть модули с его реализацией

Answer 5

[Никита Петров]

Ну типа если запариться совсем, то нужно плясать от того где все это лежит.

1. nginx, apache - оптимизирует все на уровне сервера, выводит WebP если может и многое другое. Читай документацию.
2. Если сайт чисто статика без динамического изменения, то более тонкая настройка GULP или любого другого сборщика. (не знаю как вы npmом сжимали).
3. imagemagic + bash.
4. Самый первый ответ.