All geek questions in one place

Suggestions on why the site is slow / how to speed up the work?

I know that the site is very image-based, I have limited plugins as far as I can, and concise CSS and style. It should not be as slow as it is. Any reason why this is or what I can do to speed it up? Thanks

0
source share
2 answers

in my opinion

1- you use too much css and javascript
2 - Eliminate JavaScript and CSS rendering blocking in higher content
3- you have to optimize your image
4- you can upgrade your server to a faster server
5- Enable browser compression and caching
and.....

EDIT: how to improve the above steps:

1- for best performance, it’s better to keep the page size up to 600 kbps, usually because of the theme or plugin that we use, and then, if possible, change your template to an optimized version and reduce unnecessary plugins. on the other hand, there are some functions that can handle only a few codes, but we rather install a new plugin, so the new plugins have their own javascript and css

2-put all your javascript codes in the befoter </body> ( help ) footer and create a javascript loader for your css that inserts your css on the head. ( help ) a simple example of rendering blocking

 <!DOCTYPE html> <html> <head> <title>Title</title> <!-- do not insert css or javascript here --> </head> <body> <!-- ################# contents ################# --> <script type="text/javascript" src="/dis/cssloader.js"></script> <script type="text/javascript" src="/dis/scripts.js"></script> </body> </html>

and your cssloader

 //cssloader.js var version = "?v1"; var cb = function() { var styles = [ "/dist/custom1.min.css", "/dist/custom1.min.css", ]; var h = document.getElementsByTagName('head')[0]; for (var i = 0; i < styles.length; i++) { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = styles[i]+version; h.appendChild(l); } }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) raf(cb); else window.addEventListener('load', cb);



3 - image optimization means reducing the image scale as you can, and saving images on the Internet (if you have Photoshop, he has the opportunity to do this, it is obvious that it reduces the quality of your images)

4-sometimes just some kind of configuration on the server, improve its performance 5, if you use apache, you must add some line of codes in your apache configuration in order to enable it and perform caching, you can also do this with .htaccess (( help )

+1
source

It suffers from a grotesque amount of Javascript and CSS. Minimizing them into one file, each, or at least sequentially using its own minified versions, will help, but at 7.1 MB for one page, including a 1.1 MB image, you might think that you are doing something fundamentally wrong with respect to page design and image use. Even on a fast desktop, this happens slowly, and even with miniature styles and scripts (and resized, not just “optimized” images) on a mobile device, it will (still) be unusable.

Edit: this size is with ghostery enabled, so it is probably a bit on the low side and they won’t do anything to help your load time.

+1
source

Source: https://habr.com/ru/post/1245069/

More articles:


All Articles