I'm new here, I read about the rules, but I do not know where to post this, I'd like some help on how to improve the loading of a site developed in PHP / CSS3 / HTML5 / MySQL, someone indicates a website or library for integrate in the site that helps with minify, such as the library generate a minify version in a directory from the original code, but keeping the original and reading the minified. The problem with generating static pages is that the content of the site changes daily, the problem is not to read the database at the time of loading the page, because it is very agile, but I still need to improve the loading of the site. use image cache, image generator resized as the images are uploaded 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. Thanks!
Website optimization in PHP / CSS3 / HTML5 / MySQL
1 answer
First, this answer does not address all of the points that should be addressed, it is based only on 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) that I made in the images. I'll give you a basic explanation of each point you can use to handle performance based on what Dev Tools shows. Not that Dev Tools is the perfect choice, not everything it accuses deserves or should be taken into account.
First in Aba Network , note that everything after the red line is because the request took too long to return, everything that is there you can check the possibility of decreasing file size, minify, treat image or video , take out a font-family etc. Note that you can only filter by IMG, JS or All (All).
AbaPerformancehereissimilartotheNetworktab,youcanevaluatethepercentageofyourpagesizeperfiletype.Notethatonthispagemostoftherenderingtimeisonthescripts,maybeyoucanhandlesomethingthere,orremovesomething.Alsonoticewhatisbeyondtheredline.
AbaCoverage,thistabshowshowmuchofyourcodeyouareactuallyusingonthepage,noticethatthispagehasBootstrap,howeveronly10%ofCSSisbeingused,90%isonlytherebusyspace,notethatonly50%ofjQueryisbeingused,onlythenyoucansaveabout100kb.NOTE:IntheSourcepartwheretheredlineontheleftshowswhatCSSisnotbeingused!
AbaAuditshereyoucandoanauditclosertotheauditthatGoogle'ssearchenginedoes.AllthatisaccusedthereisbecauseGooglecantakeintoaccountinthenoteofyoursiteandconsequentlyinyourrankingsinthesearches.Notethatitmarksthecriticalpartasred,andprovidesadropdownforyoutoseeandseewhatworksbestforyoursite'sgradeandperformance.
OBS1:Inaddition,youcanreadaboutLazyLoadinginthisquestion,itcanhelpyouoptimizepageloadingWhat is Lazy Loading and Eager Loading?
Lazy loading is a software design pattern, commonly used in programming languages, to delay the initialization of an object to the point where it is needed. This can contribute to the efficiency of a program, if used properly.
Source: link
OBS 2: Uniquely treat the "Above of Fold" part of the code. This means that you should optimize mainly the content that comes before the first page fold, that is all the code needed to render the page before the user of the first scroll, since the contents that see below the fold do not have the need to be rendered with priority.
Source: link
You can read more about this in the Google Page Speed documentation: link