anonyco/Faster_Websites_With_Minification_And_GZIP_And_Brotli
A general guide to how to set up and develop faster websites with Minification and GZip
Faster_Websites_With_Minification_And_GZIP_And_Brotli
- Before minifying, please manage your files as follows:
a. Please make sure that you have created a clone of the files that exist on the server on your own machine (this clone will cause them all to be placed in the same directory in case they are not presently).
b. This cloned directory will become the source files from this point forward
c. Next, Create a copy of the new source files and label this copy "Release files"
- Minify the "Release files"
a. Minify the images via https://www.compressor.io
b. Minify the xhtml files. Since pretty much all HTML minifiers will break the file, download notepad++ and open up the file in notepad++. Then open up the search/replace box and set it for regular expressions. Now, replace "\s+(?=<|\s)" with "" (both without the quotes). The file size will reduce by 20% using this method. Make sure you do not compress the original file. You may have to go back and change the file. Instead, have a separate dev site which contains the source files. Then, when uploading the dev site to the live site, transfer over all the files, minify the files, and upload the minified files to the live site.
c. Minify the CSS. Also note that XHTML CSS is the exact same as HTML CSS, so you can use an online minifier like refresh-sf.com.
- robo_gzip the minified "release files"
a. The following steps must be performed exactly as described, or they will not work. They must be performed on your PC, not on the server, or they will not work. More specifically, these steps must be performed on a Windows PC because the following steps will not work on any other operating system.
b. Download this entire repository. You will find the robo_gzip folder inside the production_release folder.
d. After unzipping, make sure there are no duplicate nested folders: there should not be a "robo_gzip" folder inside the "robo_gzip" folder. If there is a "robo_gzip" folder inside the "robo_gzip" folder, then go into the "robo_gzip" folder inside the "robo_gzip" folder, cut all the files from there, then maneuver to the outer "robo_gzip" folder and paste all the files here then delete the "robo_gzip" folder inside the "robo_gzip" folder that you are currently in.
e. Do NOT move files into or out of this folder. This folder MUST exist exactly as is
f. Do NOT rename this folder.
g. Do NOT rename the files within the folder.
h. Place this folder in the Release folder (not subfolders);
i. You should now have a ReleaseFolder/robo_gzip folder and a file at ReleaseFolder/robo_gzip/compress.cmd.
j. Now, run (usually by double-clicking) the "robo_gzip/compress.cmd" executable Batch file every time you make updates to the websites structure. Then, the batch file will compress all the XHTML and CSS files in the directory and subdirectories of "robo_gzip" that have changed since the last time it ran. The original XHTML and CSS files will not be modified. Rather, new ".gz.xhtml", ".br.xhtml", ".gz.css", and ".br.css" will be generated.
-
Upload the minified robo_Gzipped files
-
From this point forward, New changes will now be made to the source files.
a. As you are editing the source files (in the future) you may view the website generated by server by dragging and dropping the desired xhtml files from your file browser/explorer to the new tab button in your browser. Doing so will make the browser load the file from your local hard disc.
b. To upload these changes to the live site:
ii. Then, find the files that you have changed since the last live site update:
iii. then overwrite the "release files" with the updated source files;
iv. then minify the xhtml and css files
v. then robo_gzip by running the robo_gzip/compress.cmd
vi. then upload.
vii. There is no need to delete the compressed flies because robo_gzip will overwrite the compressed files when the minified files have changed. robo_gzip will only compress the files that you have changed.