Ускоряем свой сайт с помощью Page Speed

Автор [Константин], 22-01-2012, 20:52:58

« назад - далее »

Alf91

wordpress со всеми рекомендациями дает 45 баллов(


fox-fox

92% сайт на wordpress. Еще поднажать можно и 98% сделать.
  •  


davidExl

Думал написать свой пост по поводу PageSpeed, но раз он есть - просто добавлю свои наработки. Скажу что мой сайт на платформе статических страниц, без базы данных, на IIS 7.5, и оценка которую я получил - зеленый 87. Тут стоит заметить что есть некоторые ограничения в доступах, и некоторые файлы я править не могу, так же есть мелкие правки до которых не дошли руки... вопрос приоритетов.

Поехали.

1. Включите сжатие
Тут Константин указал как сделать эту настройку для серверов с apache
Но есть еще IIS (windows) - тут вам стоит обратиться к файлу web.config (стоит это делать осторожно)
nginx - В моём случае с одним из сайтов я просто обратился к хостеру, и он через консоль включил gzip. (так же для данной конфигурации сервера существует нечто, при включении этого сервер начинает читать файл .htaccess)

2. Optimize images - очень важный пункт, при решении данной проблемы в случае если за каритнками не следили, и если их много, результат был +17 баллов
Как я это делал? Очень простой путь без использования фотошопа или сложных программ.
Сделал фото -> открыл через paint -> изменил размер в пикселях до нужного -> открыл через paint.net -> Ctrl+Shift+S -> изменить качество до 65-70 ориентируясь на превьюшку.

3. Minify CSS
Wordpress позволяет сделать это плагинами, но в моём случае без движка выход был такой.
Сервис - http://mabblog.com/cssoptimizer/compress.html
Радость сервиса в том что стили я пишу сам и руками, и после сжатия очень сложно дописывать, НО этот сервис имеет возможность сделать uncompress - http://mabblog.com/cssoptimizer/uncompress.html. Единственный нюанс с CSS - при наличии комментариев файле он после компрессии может нарушиться. Я долго не думал и просто удалил их. (естественно с сохранением бекапа :)

4. Отложите синтаксический анализ javascript или Eliminate render-blocking JavaScript and CSS in above-the-fold content
Тут все интересно. в общем я отложил загрузку JS до момента отрисовки страницы. Это делается легко, у вас есть:

<head>
<script type="text/javascript" src="new.js"></script>
</head>

чтоб отложить загрузку нужно просто добавить атрибут defer для сайтов с DOCTYPE html и defer="defer" с DOCTYPE xhtml

будет это выглядеть так:
<script type="text/javascript" defer src="new.js"></script>

в данном варианте если вы добавили ко всем скриптам данный атрибут вы говорите браузеру клиента или роботу - пропусти этот скрипт и дочитай до конца страницы а потом вернись и выполни скрипт. Так же при добавлении этого параметра к нескольким скриптам, порядок их загрузки полностью сохраняется.
есть 2 проблемы в данном подходе:
1. если внутри кода в боди или в футере есть скрипт который выполняет действия на основании скрипта в хеде, то он не сработает.
2. такие скрипты как jquery-1.11.1.min.js имеют внутри метод document.write, Google говорит: "Если в ресурсах JavaScript используется метод document.write, использовать асинхронную загрузку небезопасно. Рекомендуется переписать скрипты с использованием других средств."

В общем на сегодня все.

[Константин]Topic starter

Цитата: davidExl от 16-04-2015, 11:51:18Единственный нюанс с CSS - при наличии комментариев файле он после компрессии может нарушиться. Я долго не думал и просто удалил их. (естественно с сохранением бекапа
Вообще, перед любой оптимизацией надо его делать.
Иначе не отредактировать потом код и не вернуть изображения.
  •  

Andrewk74

По поводу оптимизации сайта на NGINX - долго мучался, но сделал все - сжатие, кеширование. Хостер - NIC.ru.
Файл конфига обычно называется сайт.site.conf, обычно лежит тут /etc/nginx. Привожу начало файла ту, которую изменил.

server {



location ~* ^.+\.(jpg|jpeg|gif|swf|png|ico|mp3|css|zip|tgz|gz|rar|bz2|doc|xls|exe|pdf|dat|avi|ppt|txt|tar|mid|midi|wav|bmp|rtf|wmv|mpeg|mpg|mp4|m4a|spx|ogx|ogv|oga|webm|weba|ogg|tbz|js)$ {
        root   /home/itl-1/ваш путь/docs;
        access_log  /home/itl-1/ваш путь/logs/access_log  combined;
        error_page 404 = @fallback;
        log_not_found off;
        expires max;
        add_header Pragma public;
        add_header Cache-Control "public, must-revalidate, proxy-revalidate";
        # 1
        accel_htaccess_switch on;
       
    }


gzip on;
gzip_buffers 16 8k;
gzip_comp_level 9;
gzip_min_length 10;
gzip_types text/plain text/css application/x-javascript;
gzip_http_version 1.0;
gzip_vary on;


Sky-fi

Andrewk74, было бы отлично, если бы вы создали отдельный топик и описали, что именно изменялось, и чем это может грозить, в случае чего. Тогда я лично и сам попробовал бы применить.

[Константин]Topic starter

Можно и в этот, надо обновить первый пост, советов много было уже хороших
  •  

Sky-fi



davidExl

А у кого-то была проблема с "Optimize CSS Delivery" у меня на одном из сайтов оценка 87, и есть эта проблема в желтых приоритетах... может кто нашел решение?


Clever

Заметил что алгоритм изменился у Pagespeed по отношению к iframe. Раньше можно было второстепенные скрипты (например от соцсети, виджеты и тд) вызывать в отдельном файле и затем через ифрейм выводить.

Теперь на все внешние скрипты ругается, мол мало времени на жизнь кеша у них. Вывод через js тоже ничего не дает, все определяется. Выход пришлось искать через присвоение атрибута src по клику, только так удалось кнопки (подписаться  гугл+, твиттер, вк, фейсбук) вывести без замечаний со стороны pagespeed.

То же самое и счетчиков касается. Но тут проще. Например насчет метрики я задавал вопрос поддержке, можно ли скрипт на сервере хранить. Ответ положительный. Теперь у меня php по крону  раз в неделю берет скрипт от метрики и сохраняет на сервере.

В общем чего не сделаешь ради Pagespeed ..    :)