FIX MINIFIED JS AND CSS

Save to Favorites

WHAT'S WRONG

• There are 3 components that can be minified
  • https://www.haiti-now.org/wp-content/themes/ultra-child/js/jquery.picasa.js
  • inline tag #5
  • inline tag #9

KEY POINTS

The components a webpage includes are written by humans so include things that make the Javascript and CSS more readable. Spaces, comments describing the code and descriptive names used in programming (functions and variables) can be removed or changed to shorter names while still producing the same end result. The process of doing this is called minification.

HOW IT'S USED

• These extra bits of information are used to make it easier for developers to work on the code, they aren't required by web browsers to run it
• Minifying these components often results in a dramatic reduction in their file size meaning the component will download faster and your page will display faster

BEST PRACTICE

• Minify all CSS and Javscript: those in separate files and those included directly in the HTML
• Keep the original, non-minified component so that its code can be changed in future (it's very hard for humans to read and change minified code)
• Both minification and compression (GZIP) should be done: minifying changes the contents of the original file to make it smaller, compression further reduces the size of the minified file without changing its contents

FIX THIS YOURSELF It's likely your website platform doesn't minify Javascript and CSS automatically, but you might be able to do it yourself.

Making this change incorrectly can break features of your webiste, including add to basket, and break how your site looks. You should be confident working with Javascript and CSS to continue

1. Locate where in your website your Javascript and CSS is
2. Javascripts and CSS with filenames ending in .js and .css can be safely minified
3. Don't modify the .js and .css files directly: add a new file for each file type, suffixed .min.js/.min.css
   • So an original file example.js will have an accompanying file example.min.js that is its minified version
4. There are many online Javascript and CSS minification sites, search for one (Javascript and CSS minify differently, so you'll need one for each)
5. Follow their instructions (usually you'll paste the contents of example.js into them a press 'Minify')
6. Paste the minified example.js code into the example.min.js file you're creating
7. Locate where this component is included in your website HTML. It may be in a single template or multiple pages
8. Change example.js to example.min.js in your website HTML code
9. Repeat the steps above for every non-minified .js and .css asset in your theme