Меню
Что нового?

Уменьшение времени загрузки сайта. оптимизация изображений

Danon_13

Новичок
Приветствую, снова речь пойдет про Google Page Speed

мой сайт somanyhorses.ru показывает плохие показатели по скорости загрузки, хотя сервер отдает все данные быстро,
но если наблюдать скорость загрузки сайта через панель инструментов без кэширования, то время загрузки страницы будет более 3х секунд
а гугл рекомендует уменьшить изображения
https://developers.google.com/speed/pagespeed/insights/?url=http://somanyhorses.ru/

кто сталкивался с подобными проблемами?
какие методы решения посоветуете?
заранее благодарю
 

Danon_13

Новичок
antson написал(а):
Картинки сжимать лучше. 3 сек не то. Гугл про время самого HTML страницы.
Нажмите для раскрытия...
каким образом сжимать?
сайт на Bootstrap вывод 3 картинки в ряд на странице вывода новостей
ширина картинки 700px делаем
но опять же через tinypng ужимаем картинки без потери качества
 
grigori

grigori

( ͡° ͜ʖ ͡°)
Команда форума
мы сделали lazy load картинок неделю назад - при загрузке вывод только видимых фото, остальные подгружаются при скролле
https://developers.google.com/speed/pagespeed/insights/?url=https://sdaminfo.ru/voronezh/
и да, гугл оценивает все ресурсы страницы, не только про html

забавно, как гугл рекомендует увеличить время кеширования скрипта своей аналитики
 
Последнее редактирование:

Danon_13

Новичок
grigori написал(а):
мы сделали lazy load картинок неделю назад - при загрузке вывод только видимых фото, остальные подгружаются при скролле
https://developers.google.com/speed/pagespeed/insights/?url=https://sdaminfo.ru/voronezh/
и да, гугл оценивает все ресурсы страницы, не только про html

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

спасибо за информацию сейчас попробую внедрить
 
grigori

grigori

( ͡° ͜ʖ ͡°)
Команда форума
пока что не очень оптимизируем, но планирую написать специальный сервис, который ресайзит фотки, отдает в нужных форматах, и хранит оригиналы в облаках
 

Danon_13

Новичок

Danon_13

Новичок
правильно я понимаю что вы берете оригиналы изображений и в зависимости от размера дисплея выдаете пользователю нужную ему фотографию?
 

AnrDaemon

Продвинутый новичок
Я никогда не смотрю на "рекомендации", только на актуальные цифры.
Так проще игнорировать откровенный бред.
 

Danon_13

Новичок
AnrDaemon написал(а):
Я никогда не смотрю на "рекомендации", только на актуальные цифры.
Так проще игнорировать откровенный бред.
Нажмите для раскрытия...
увы
не могу не смотреть на эти цифры
новый "сеошник" требует чтоб было всё хорошо по этим цифрам, а то что гугл рекомендует сделать картинки 120px по высоте - никого не волнует
 

Danon_13

Новичок
antson написал(а):
И свои же шрифты ему не нравятся .
Малой кровью попробуй заменить картинки на их половинку . а полные по is в случае видимого размера больше 360 пикселей. И поправь сетку sm4 md3 lg2
Нажмите для раскрытия...
спасибо, попробую

а саму скорость загрузки сайта могли бы проверить?
я тестировал в разных сервисах в том числе проверял скорость загрузки элементов в барузере но проблем не нашел
вдруг у вас получится
 

AnrDaemon

Продвинутый новичок
AnrDaemon написал(а):
только на актуальные цифры.
Нажмите для раскрытия...
Danon_13 написал(а):
не могу не смотреть на эти цифры
Нажмите для раскрытия...
Danon_13 написал(а):
новый "сеошник" требует чтоб было всё хорошо по этим цифрам
Нажмите для раскрытия...
Danon_13 написал(а):
гугл рекомендует
Нажмите для раскрытия...
Для слепых и не шибко умных повторяю - "рекомендации" это не цифры, это слова.
 
grigori

grigori

( ͡° ͜ʖ ͡°)
Команда форума
@AnrDaemon, экспериментально определено, что скорость загрузки страницы влияет на позиции в поисковиках и трафик

@Danon_13, у тебя один из самых медленных сайтов твоей тематики
https://screenshots.firefox.com/jfZKSCzSMjDyrZ4H/testmysite.thinkwithgoogle.com
https://screenshots.firefox.com/Ek3gJawUh0NbpD4m/testmysite.thinkwithgoogle.com

https://testmysite.withgoogle.com/intl/en-gb
 

Danon_13

Новичок
grigori написал(а):
@AnrDaemon, экспериментально определено, что скорость загрузки страницы влияет на позиции в поисковиках и трафик

@Danon_13, у тебя один из самых медленных сайтов твоей тематики
https://screenshots.firefox.com/jfZKSCzSMjDyrZ4H/testmysite.thinkwithgoogle.com
https://screenshots.firefox.com/Ek3gJawUh0NbpD4m/testmysite.thinkwithgoogle.com

https://testmysite.withgoogle.com/intl/en-gb
Нажмите для раскрытия...
спасибо, выкатил новую версию главной страницы путем GET запроса но сервис не реагирует на GET переменные
 

Danon_13

Новичок
Ребят спасибо за наставление
удалось поднять скорость загрузки

Если интересно что я делал, то:
  1. использовал данный скрипт для определения размера экрана и подмены изображений https://ruseller.com/lessons.php?rub=32&id=2187
  2. после установки запустил скрипт для изображений, которые находятся в базе данных (анонсовые картинки) и сделал эти картинки в 3х размерах к сожалению не могу вставить кодом
  3. т.к. всё равно гугл показывал низкую скорость загрузки (поднялся до 60) я решил протестировать верстку и заменил вывод элементов из полного экрана на часть экрана т.е. в верстке Bootstrap стал использовать <div class="container">
На этом я получил свои 90 и 96 "баллов"
но т.к. с телефона скрипт не срабатывает я по умолчанию поставил вывод максимального разрешения т.к. по верстке с телефона осуществляется вывод 1 элемента на строку

А lazy load в моем случае не помог (либо я криворукий)



Скрипт для редактирования фото
Код: 
function imageresize($outfile, $infile, $neww, $newh, $quality) {
            //Определяем размер фотографии — ширину и высоту
            $size=GetImageSize ($infile);
            //Создаём новое изображение из «старого»
            $src=ImageCreateFromJPEG ($infile);
            //Берём числовое значение ширины фотографии, которое мы получили в первой строке и записываем это число в переменную
            $iw=$size[0];
            //Проделываем ту же операцию, что и в предыдущей строке, но только уже с высотой.
            $ih=$size[1];
            //Ширину фотографии делим на 150 т.к. на выходе мы хотим получить фото шириной в 150 пикселей. В результате получаем коэфициент соотношения ширины оригинала с будущей превьюшкой.
            $koe=$iw/$neww;
            //Делим высоту изображения на коэфициент, полученный в предыдущей строке, и округляем число до целого в большую сторону — в результате получаем высоту нового изображения.
            $new_h=ceil ($ih/$koe);
            //Создаём пустое изображение шириной в 150 пикселей и высотой, которую мы вычислили в предыдущей строке.
            $dst=ImageCreateTrueColor ($neww, $new_h);
            //Данная функция копирует прямоугольную часть изображения в другое изображение, плавно интерполируя пикселные значения таким образом, что, в частности, уменьшение размера изображения сохранит его чёткость и яркость.
            ImageCopyResampled ($dst, $src, 0, 0, 0, 0, $neww, $new_h, $iw, $ih);
            //Сохраняем полученное изображение в формате JPG
            ImageJPEG ($dst, $outfile, $quality);
            imagedestroy($src);

        }
    
        imageresize(str_replace('.jpg', '-sm.jpg', $_POST['adres']), $_POST['adres'], 456, 304, 75);
        imageresize(str_replace('.jpg', '-md.jpg', $_POST['adres']), $_POST['adres'], 358, 239, 75);
        imageresize(str_replace('.jpg', '-lg.jpg', $_POST['adres']), $_POST['adres'], 551, 333, 75);





 
Последнее редактирование:

AnrDaemon

Продвинутый новичок
Интересно, а почем JPEG, а не Jpeg ? И почему "imagedestroy", а не "ImageDestroy"?…
 
Войдите или зарегистрируйтесь для ответа.
Сверху