Site optimization in PHP/CSS3/HTML5/Mysql

Question

I’m new here, I read about the rules, but I don’t know where to post this, I would like a help, on how to improve the loading of a site developed in PHP/CSS3/HTML5/Mysql, someone indicates a site or a library to integrate into the site that helps with Minify, as for example the library generate a version Minify in a directory from the original code, but keeping the original and reading the minified. The problem in generating static pages is that really the content of the site changes daily, the problem is not in reading the database at processing time when loading the page, because it is very agile, but still need to improve the loading of the site, already use images cache, Resized image generator as images are loaded for the first time, it generates the thumbnail, which reduces 70% without losing resolution, and then is reused, but would like more content to read or a flexible library to implement on the website. Grateful!

Answer 1

Firstly this answer does not address all the points that should be dealt with, it is based only on the Chrome Dev Tools as a tool for performance analysis and optimization.

I will use some images as an example, always notice the red markings (arrows, squares and lines) I made in the images. I’ll give you a basic explanation of each point you can use to treat performance based on what Dev Tools shows. Not that Dev Tools is the perfect option, not everything he accuses deserves or should be taken into consideration.

First in Aba Network, note that all that is after the red line is because the request took too long to return, everything that is there you can check the possibility to decrease the file size, minify, treat image or video, take a font-family etc. Note that you can filter only by IMG, JS or All (All).

---

Aba Performance here is similar to the Network tab, you can evaluate what percentage of your page size by file type. Note that on this page most of the rendering time is due to the scripts, maybe there you can treat something, or remove something. Also notice what’s beyond the red line.

---

Aba Coverage, this tab shows how much of your code you are actually using on the page, note that this page has Bootstrap, however only 10% of CSS is being used, 90% is there only occupied space, repairs tb that only 50% of jQuery is being used, only then you can save some 100kb. OBS: In the Source part where the red line is on the left shows what CSS is not being used!

---

Aba Audits here you can do a closer audit audit than Google’s search engine does. Everything accused there is because Google can take into account in the note of your site and consequently in your rankings in the searches. Note that it marks the critical part red, and provides a "dropdown" for you to see and check what can work best for the site’s note and its performance.

---

OBS 1: Besides, you can read about Lazy Loading in this issue, it can help you optimize page loading What is Lazy Loading and Eager Loading?

Lazy loading is a software design standard, commonly used in programming languages, to postpone the initialization of an object to the point where it is needed. This can contribute to the efficient operation of a programme, if used properly.

Source: https://pt.wikipedia.org/wiki/Lazy_loading

OBS 2: Deal exclusively with the "Above Fold" part of the code. This means that you should primarily optimize the content that comes before the first page fold, ie all the code needed to render the page before the user of the first scroll, because the content you see below the fold does not need to be rendered with priority.

Source: https://www.smashingmagazine.com/2015/08/understanding-critical-css/

You can read more about this in the Google Page Speed documentation: https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent