As I said in my optional HTML primer I consider it the best and most important tool for HTML optimization. When it comes to html-minifier, I think Juriy (aka kangax) has done extraordinary work with it. For me this makes for a good mix for honing my skills while not wasting too much time when the code base is rather large. ❧ I work with these setups in a mostly manual fashion because for some projects, like or The World’s Highest Website, I intentionally manage everything manually, whereas in others, like HH Kaffee, it’s completely automated. file-ext html -input-dir / -output-dir / Here’s the full command I use in my structure, if that’s useful: html-minifier -collapse-boolean-attributes -decode-entities The following setup, for example, I’ve recently used to “polish” the in good parts static files of : collapseBooleanAttributes: true,įor the command line: -collapse-boolean-attributes -decode-entities Occasionally I’d use a less aggressive, more “stable” configuration to optimize HTML code. You can use query parameters when referencing an image in HTML, CSS, or. All of these methods support constraints on parameters during the optimization process (see below). (As you can tell I’m assuming some knowledge about using html-minifier.) Defensive Optimization Parcel supports resizing, converting, and optimizing images. where the options and output arguments are structures. sort-attributes -sort-class-name -trim-custom-fragments In addition, HTML-Optimizer can also encode your mailto tags, reducing the risk of spammer harvesting, and add missing image width and height tags. remove-script-type-attributes -remove-style-link-type-attributes You can customize the optimization settings and choose which options should be applied, exclude folders, specify file extensions to be processed and more. remove-optional-tags -remove-redundant-attributes remove-attribute-quotes -remove-comments -remove-empty-attributes prevent-attributes-escaping -process-conditional-comments Also, get rid of your inline attributes like valign/align/style and offload all of that stuff into external CSS. Just load a small part of the table to begin with, and when the user scrolls to the bottom of the page, load another small part, and so on. minify-js -minify-urls -no-include-auto-generated-tags An alternative to pagination is lazy loading or on-demand loading. conservative-collapse -decode-entities -minify-css collapse-inline-tag-whitespace -collapse-whitespace It translates to the following parameters in the command line: -collapse-boolean-attributes It’s this, which I’m just going to throw over the fence: collapseBooleanAttributes: true, In my own projects, however, I work with a different, more ambitious setup. Jad (Joubran) asked me about my configuration for html-minifier the other week, and in a hurry I pointed him to the config I had worked out for sum.cumo. Post from Decem(↻ May 28, 2021), filed under Web Development. An HTML Optimizer’s Config for html-minifier
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |