Improve the loading speed of my page with Bootstrap

2

Someone can help me with a performance theme, referring to the loading speed of a web page, since it is not constant.

To measure it I use link and in some cases it gives me values in the first load of 1,242 seconds and in others it exceeds 4 seconds. I have compressed and modified some parameters under the .htaccess file to improve the load but it is still not constant. I leave the code used in Apache.

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType text/javascript "access plus 1 week"
    ExpiresByType application/javascript "access plus 1 week"
    ExpiresByType application/x-javascript "access plus 1 week"
    ExpiresByType image/x-icon "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
    ExpiresByType application/font-woff "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
    ExpiresByType font/opentype "access plus 1 year"
    ExpiresByType font/ttf "access plus 1 year"
    ExpiresByType font/otf "access plus 1 year"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/x-font-otf "access plus 1 year"
</IfModule>
## EXPIRES CACHING ##

##HH: web
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE 
AddOutputFilterByType DEFLATE image/svg+xml
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
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf
</IfModule>
    
asked by HernanHuarcaya 08.01.2016 в 18:38
source

4 answers

2

If you use Chrome you can use the YSlow extension to do an analysis of the best practices, but I would recommend:

  • Use a CDN to improve the burden of geographical proximity
  • Use expires headers so that the browser can cache static files.
  • If you have control of the server, enable compression to decrease the weight of your HTML
  • Place your links to the CSS on the HEAD
  • Put your javascript at the end
  • As you mentioned, it minimizes your CSS and JS (although as you comment, this you already do)

If you can not use a CDN, at least in standard JS libraries you can take advantage of the Google CDN

    
answered by 09.01.2016 в 00:24
1

Make sure that bootstrap and other frameworks javascript and css you have are minified to reduce traffic considerably.

Minified versions are usually named .min.js and .min.css .

Once this is done it would be necessary to look more punctually at the site and rule out hosting problems which can affect a lot.

    
answered by 08.01.2016 в 18:42
0

In addition to making sure that you use the minified versions compress all your scripts to a single file. The same for styles. Make sure your server uses gzip. Optimize images to reduce their size but not quality. Use sprites Etc, etc.

It would serve to have a link to your site to know what can be done. Do you have a pipeline implemented for the build?

    
answered by 08.01.2016 в 21:29
0

In addition to a minification of resources, the best thing you can do at the server level is to configure that the requests are compressed when sending them, for example through that way, you'll save up to 25% of the space they occupy, and apparently all the types of resources you quote they are candidates for such improvement.

Sort your resources in head based on the time it takes to load so that those that take less preference are loaded first and thus avoid unnecessary bottlenecks, as most browsers try to download at least two at the same time.

Also if you have

answered by 09.01.2016 в 01:24