主页 / 问题 / 639423
Accepted
Shadow33
Asked:2020-03-14 22:27:55 +0000 UTC2020-03-14 22:27:55 +0000 UTC

如何提高前端站点的速度？

  • 772

在现场，后端在 50ms 内完成，而前端需要花费大量时间。结果，半秒显示使用缓存的页面，不使用缓存700毫秒。是否有提高显示速度的规则和方法？

用于背衬Laravel。

php

6 个回答

  1. Best Answer

    js优化是热门话题之一。你能做什么：

    1) 您可以使用内置的 Chromium 分析器http://prntscr.com/ejumdm并分析您加载最多的脚本/方法并进行优化。

    1.1) 有例如Google的PageSpead机制

    2) 脚本的最小化。好吧，您可以使用grunt和gulp构建工具缩小脚本和样式。

    3）即使最小化没有帮助。您可以使用AMD异步加载模块。为此，您可以使用例如webpack

    • 20

  2. 我建议您优化网站上的所有静态内容。

    图形压缩

    对于您的情况，除了压缩样式和脚本外，我建议您也压缩图形。例如，只需删除 exif 数据即可轻松压缩图片而不会降低质量。在真实网站上，您可以将图像的大小平均减少 70%，在现代网站上平均约为 4 MB。示例gulp：

    var
    gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    imageminJR = require('imagemin-jpeg-recompress'),
    imageminSvgo = require('imagemin-svgo');

// Optimizing images
gulp.task('imagemin', function() {
    gulp.src('./img/**/*')
        .pipe(imagemin([
            imageminJR({
                method: 'ms-ssim'
            }),
            imageminSvgo({
                plugins: [
                    {removeViewBox: false}
                ]
            })
        ]))
        .pipe(gulp.dest('./public/img/'))
});

    对于理解轻量级格式webp（该格式由 Google 开发）的浏览器，您还可以制作此版本的图像：

    var
    gulp = require('gulp'),
    webp = require('gulp-webp');

// Generate Webp
gulp.task('webp', function() {
    gulp.src('./img/**/*')
        .pipe(webp())
        .pipe(gulp.dest('./public/img/'))
});

    脚本优化

    首先，将所有脚本合并到一个文件中并缩小它们。这是一个减少 HTTP 请求数量和文件大小的垃圾：

    var
    gulp = require('gulp'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify');

// Concat JS
gulp.task('js', function(){
    gulp.src([
        './js/jquery.js',
        './js/wow.js',
        './js/menu.js',
        './js/scrollspy.js',
        './js/main.js',
        './js/temp/contact.bundled.js',
        './js/owl.carousel.js'
    ])
        .pipe(concat('script.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./public/js/'))
});

    风格优化

    除了通常的样式缩小之外，您还可以使用高级样式 - 组合重复类和@media。gulp来自我的web-starter-kit 的示例：

    var
    gulp = require('gulp'),
    stylus = require('gulp-stylus'),

    // Минифицирует CSS, объединяет классы. Не ломает CSS, в отличие от cssnano, который, к примеру, может неправильно выставлять z-index
    csso = require('gulp-csso'),

    // Объединяет все @media
    cmq = require('gulp-combine-mq'),

    // Сокращает CSS-селекторы    
    gs = require('gulp-selectors'),

    // Проставляет вендорные префиксы
    autoprefixer = require('gulp-autoprefixer'),

    livereload = require('gulp-livereload'),
    nib = require('nib');

// Compiling Stylus in CSS
gulp.task('css', function() {
    gulp.src('./styl/*.styl')
        .pipe(stylus({
            use: nib()
        }))
        .pipe(cmq())
        .pipe(csso())
        .pipe(autoprefixer('last 3 versions'))
        .pipe(gulp.dest('./public/css/'))
});

    如果绝对无事可做，那么您还可以缩短选择器：

    // Minify selectors
    gulp.task('gs', function() {
        var ignores = {
            classes: ['active', 'menu', 'nav', 'slide', 'error', 'form-control', 'loader', 'showLoader', 'fadeLoader', 'webp', 'wow', 'owl-*', 'i-*'],
            ids: '*'
        };
        gulp.src(['./public/**/*.css', './public/**/*.html'])
            .pipe(gs.run({}, ignores))
            .pipe(gulp.dest('./public/'))
    });

    顺便说一下，你可能有通过 JS 添加的类，所以你应该首先将所有这些类放入一个变量ignores中。

    用户端静态缓存

    我还建议您在用户端缓存脚本和样式，以防止它们在未更改的情况下被重新加载：

    <FilesMatch ".(flv|gif|jpg|jpeg|png|ico|svg|swf|js|css|pdf|woff2|woff|ttf|eot)$">
  Header set Cache-Control "max-age=2592000"
</FilesMatch>

    并在服务器上启用 gzip 压缩：

    # сжатие text, html, javascript, css, xml:
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>
    • 10

  3. 您需要在 DevTools / Timeline 中查看特定案例的详细信息，并着眼于它使用每种方法，因为特定案例中的一般优化技巧只会造成伤害。我可以在上面的提示中添加以下内容：

    • 在时间轴中查看关键渲染路径的详细信息。尽量保持它尽可能短：

      1. 从中删除阻塞 CSS。例如，选择对第一个屏幕使用关键样式并将它们内嵌在<head>→中<style>。CSS 的其余部分使用loadCSS异步加载。
      2. defer使用/属性加载脚本async。

    • 积极使用<link rel="preload">- 在现代浏览器中，速度的提高非常显着，但您需要明智地使用它并遵守时间线。

    • 准备多种尺寸的图片并使用标签<picture>；将 WebP 格式的图像提供给可以使用相同标签读取的浏览器。

      1. 不要内联通过 base64 解码器传递的图像（也在 CSS 中）。
      2. 如果图片很多，那么懒加载它们，例如使用lazysizes（好朋友<picture>）。
      3. 如果有大量使用透明度的 PNG，请考虑将此类 PNG 转换为 JPG + SVG。

    • 如果使用自定义字体，那么我也建议异步加载它们，例如，使用fontfaceobserver。

    资料来源：

    关于一般优化的文章：https ://dev.to/sanjsanj/optimising-the-front-end-for-thebrowser

    关于<link rel="preload"> https://medium.com/reloading/a-link-rel-preload-analysis-from-the-chrome-data-saver-team-5edf54b08715

    WebP https://css-tricks.com/using-webp-images/

    Base64 https://csswizardry.com/2017/02/base64-encoding-and-performance/ , https://csswizardry.com/2017/02/base64-encoding-and-performance-part-2/

    PNG → JPG + SVG（透明 JPG）https://css-tricks.com/transparent-jpg-svg/

    • 6

  4. 首先，通过 Google PageSpeed Insights 运行几个关键页面。Google大概会给你以下问题和建议：

    1. 设置静态资源（css、js、图片）的缓存。这可以使用 nginx 设置来完成。如果您有虚拟主机 - 请联系技术支持。他们通常是免费的。
    2. 压缩站点上的所有图像。https://optipic.io/ru/有助于自动执行此过程- 它只需连接到 php 中的任何站点，而无需任何“手鼓跳舞”。将脚本下载到您的站点，服务本身会找到所有图片并压缩它们。
    3. 将所有css合并为一个css文件，将所有js合并为一个js文件。
    4. 尽可能将所有的css和js移到html代码的底部。
    5. 摆脱所有返回 404 错误的资源（或修复它们的链接）。

    另外，通过https://tools.pingdom.com/运行站点的关键页面。该服务将了解哪些资源会减慢页面加载速度。例如，经常会发现某些第三方小部件会降低站点速度或大型（繁重）资源（视频、大型 js 等）。对于第三方小部件，您可以尝试使用异步或与他们的技术支持聊天（他们应该对尽可能快地加载他们的小部件感兴趣）。如果两者都没有帮助，那么看看加载速度更快的替代第三方服务。

    • 5

  5. 您需要对图片、脚本、所有资源进行压缩、合并和缓存。

    .htaccess 用于懒惰（gzip，缓存）：

    <IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    RewriteEngine On

    #GZIP
    AddEncoding gzip .gz
    RewriteCond %{HTTP:Accept-encoding} gzip
    RewriteCond %{REQUEST_FILENAME}.gz -f
    RewriteRule ^(.*)$ $1.gz [QSA,L]

    RewriteCond %{HTTPS} off
    RewriteCond %{HTTP:X-Forwarded-Proto} !https
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)/$ /$1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]

    #GZIP
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

ServerSignature Off

<ifModule mod_headers.c>
    #кэшировать html и htm файлы на один день
    <FilesMatch "\.(html|htm)$">
        Header set Cache-Control "max-age=43200"
    </FilesMatch>
    #кэшировать css, javascript и текстовые файлы на одну неделю
    <FilesMatch "\.(js|css|txt)$">
        Header set Cache-Control "max-age=604800"
    </FilesMatch>
    #кэшировать флэш и изображения на месяц
    <FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">
        Header set Cache-Control "max-age=2592000"
    </FilesMatch>
    #отключить кэширование
    <FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
        Header set Cache-Control "no-store, no-cache, max-age=0"
    </FilesMatch>
</IfModule>

<ifModule mod_expires.c>
    ExpiresActive On
    #по умолчанию кеш в 5 секунд
    ExpiresDefault "access plus 5 seconds"
    #кэшировать флэш и изображения на месяц
    ExpiresByType image/x-icon "access plus 2592000 seconds"
    ExpiresByType image/jpeg "access plus 2592000 seconds"
    ExpiresByType image/png "access plus 2592000 seconds"
    ExpiresByType image/gif "access plus 2592000 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
    #кэшировать css, javascript и текстовые файлы на одну неделю
    ExpiresByType text/css "access plus 604800 seconds"
    ExpiresByType text/javascript "access plus 604800 seconds"
    ExpiresByType application/javascript "access plus 604800 seconds"
    ExpiresByType application/x-javascript "access plus 604800 seconds"
    #кэшировать html и htm файлы на один день
    ExpiresByType text/html "access plus 43200 seconds"
    #кэшировать xml файлы на десять минут
    #ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
    • 3

  6. 为什么没有人更深入一点？）让Apache做后端，Nginx做前端的反向代理，这样速度就快了！

    • 3

相关问题