Как я могу улучшить загружающиеся времена относительно статического сайта HTML?
Так как это репозиторий Ubuntu, я думаю, у вас есть www-data пользователь. Запустите эти 2 команды:
// For setting ownership
chown -R www-data:www-data /var/www/laravel
// For setting permissions
chmod 775 -R /var/www/laravel
Кроме того, я думаю, что ваши конфиги nginx могут потребовать немного больше:
location ~ \.php$ {
try_files $uri =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/run/php/php7.2-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
#fastcgi_read_timeout 1800; // this line maybe
}
9 ответов
Они загружаются медленный, потому что они огромны. 200 КБ являются очень большим файлом изображения. Я не знаю точно, что идущая рекомендация для веб-изображений, но это - очень хорошая идея сохранить их под 50K.
Изображения GIF не очень эффективны для фотографических изображений. Необходимо экспериментировать с другими форматами как JPG и PNG, чтобы видеть, можно ли получить то же качество с меньшим размером файла. Необходимо смочь уменьшить размер файла вполне немного при сохранении качества.
Другой прием: используйте миниатюры. Сохраните две версии каждого изображения, 25% размер (разрешением) другого. Ваши посетители сайта могут нажать миниатюру, если они хотят видеть больше. Это ускорит загружающиеся времена и уменьшит Ваш счет пропускной способности.
Прочитайте следующую статью под названием Лучшие практики для Ускорения Вашего веб-сайта:
Ваши изображения правильно измерены? Если Вы отображающий их на Вашей веб-странице как 300x300 пикселей удостоверяетесь, что исходное изображение является тем же размером.
Это помогает вдвое, его меньше данных загрузить, и 2 они не требуют, чтобы дополнительная вычислительная мощность для браузера изменила размер. Кроме того, изображение будет выглядеть более свежим, если это будет точный размер.
До различия между GIF и JPG, (за исключением прозрачности, которую не поддерживает JPG), он сводится к тому, что содержит Ваше изображение. GIF использует таблицу цветов и карту к той таблице цветов для хранения изображения, в то время как JPG использует сжатие algorith. Так, если Вы отображаете, содержит, немногие окрашивают изменение, Вы получите меньший размер файла от GIF. Conversly, если у Вас есть фотография с большим цветным изменением, Вы захотите использовать JPG.
Также смотрите на YSlow
Это проанализирует Ваш сайт для Вас и скажет Вам, где узкие места могли бы быть.
Позвольте кэшироваться для файлов изображений (пример ниже также добавляет CSS и js, кэширующийся), который гарантирует, чтобы пользователи не загружали файлы дважды. Если Вы используете апачские 1.3 или 2:
ExpiresActive On
<FilesMatch "\.(ico|gif|jpe?g|png|js|css)$">
ExpiresDefault "access plus 1 year"
</FilesMatch>
Это - вероятно, разумная идея включить gzip сжатие для HTML и CSS. В апачских 2:
SetOutputFilter DEFLATE
и в апачских 1.3:
mod_gzip_on Yes
Это зависит от того, насколько большой изображение при отображении изображений размера обоев на уровне 100 КБ это не слишком плохо. Если Вы отображаете миниатюры этого размера, то у Вас есть проблема.
Изображения JPEG с потерями, но могут быть сжаты легко. В зависимости от того, сколько сжатия Вы выбираете, можно действительно уменьшить размеры изображения с JPEG.
Необходимо указать атрибуты высоты и ширины для тега img, видеть ниже для объяснения Школ W3C того, почему необходимо сделать это. И для дальнейшей информации см. http://www.codinghorror.com/blog/archives/000807.html для дальнейших более радикальных методов.
Подсказка: Это - хорошая практика для определения и атрибутов высоты и ширины для изображения. Если эти атрибуты установлены, пространство, требуемое для изображения, резервируется, когда страница загружается. Однако без этих атрибутов, браузер не знает размера изображения и не может зарезервировать соответствующее пространство к нему. Эффект будет состоять в том, что макет страницы изменится во время загрузки (в то время как изображения загружаются).
Подсказка: не повторно масштабируйте изображения с атрибутами высоты и ширины! Уменьшение большого изображения с атрибутами высоты и ширины вынуждает пользователя загрузить большое изображение (даже если это выглядит маленьким на странице). Корректный метод должен повторно масштабировать изображение с программой, перед использованием его на странице.
Это копируется с http://www.w3schools.com/tags/att_img_height.asp
Самый быстрый загруженный ресурс всегда является ресурсом, который не должен быть загружен вообще. Т.е. кроме уменьшения Ваших изображений к разумным размерам необходимо читать о кэшировании HTTP.
Необходимо дать веб-серверу команду поставлять ответы с надлежащей информацией о кэшировании так, чтобы агенты пользователя могли снова использовать локальные кэшированные версии.
Mark Nottingham записал учебное руководство о кэшировании HTTP. Это - хорошая начальная точка. И это - учебное руководство об апачской конфигурации на HTTP chaching.
Изучите бесплатный инструмент: Smush Это!
Это совместно разрабатывается Stoyan Stephanov, Nicole Sullivan (Yahoo!) и включает каждый лакомый кусочек для изображений от YSlow (от Yahoo!) и результаты Сети разработчиков Yahoo.
Это проанализирует Ваше изображение (изображения) и определит от ряда серверных инструментов, что оптимальный тип изображения (например, PNG8, PNG24, GIF, JPG, и т.д.), и также создайте оптимизированное изображение..., например, даже если Вы подадите его изображение PNG, то это найдет, что лучший метод сжимает его, и "Smush Он" к его самому маленькому размеру файла.
Затем возьмите выходное изображение и затем подайте его от (домен cookie меньше), если Вы можете, предпочтительно на CDN, с далеким будущим истекает заголовки, с gzip сжатием.