We are walking down the road to make your WordPress blog super speedy. So far we selected good looking as well as high performance themes and optimized images and videos. This will make your page size smaller and of course it will lead to better performance.
If you have already taken those steps, you must be already experiencing better page load time and smooth navigations. Today we are trying to take it further by optimizing JavaScript and CSS.
Every WordPress theme would be using JS and CSS to style it. With time JS and CSS has improved to give lots of styling options. So you can reduce the usage of images drastically. In a general situation CSS add style to HTML and JS add behavior.
Roadmap
Writing JS and CSS
When you are writing CSS and JS you have several best practices to follow. It will ensure maximum performance and better browser compatibility.
- Comment your code
- Make it organized with proper indentation
- Use consistent and meaningful naming
- Limit line length and lines of code
- Organize CSS properties in alphabetical order
Check your WordPress theme’s JS and CSS file whether they meet above requirements. If not, go to Dreamweaver, access your site through FTP and do necessary changes. As a result you will get optimum and smallest JS and CSS file.
Linking JS and CSS
Using inline and internal JS/CSS is not a very good practice. You have to include all of them in an external file and link them to required HTML file. The objective is better organization and ultimate separation of data and style.
If you have separate CSS/JS files, move all the code to one file and save it in your server. Then link CSS file in html head. Styles need to be loaded before HTML, if not during the page load time all your design will be out of place.
Your JS file needs to go as the last thing before HTML tag. If you link JS in you whole page loading will be blocked till JS file loads. However if you have JS image slideshow in your page, you have no option but link JS in tag.
This will minimize HTTP request you page will make. Lesser the HTTP request, higher the performance. And file size of CSS and JS should be lesser, because of the steps we have taken. As a result everything will load super speedy.
Minify and Compress
After writing JS/CSS and you are completely happy with it, make a back up and compress the deployed JS/CSS files. That means you have to remove all the spaces and line brakes. It will reduce the file size further since line breaks and spaces consuming. You can minify your HTML code too. Make sure you make a back up before you minify them, or it will be very difficult to edit minified code.
Finally you have to compress your JS/CSS and even HTML code. The best way to do this is by editing .htaccess. Go to Dreamweaver, access remote website, open .htaccess. Then put the below code there.
# BEGIN GZip AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript # END GZip
Checklist
- JS/CSS code is well written following best practices
- You have one external CSS file and once JS file
- Inline or internal JS/CSS not used
- CSS file is linked in Header.
- JS file is linked in footer.
- JS/CSS/HTML files are minified and compressed.
Now you have highly optimized JS and CSS files in your WordPress themes. If you try to compare the size and number of JS/CSS files before and after you will see the difference.
If you don’t want total control and if you like to automate the process you can install wp-minfy plug-in. It will automatically do all the below work for you. Manual full controlled way or plugin, choice is up to you.
Our next step is browser caching which is letting the browser to load static content from local cache without making request to server.
Contact me @MalindaOnline to claim your Free Website Performance Review. I’m giving you a detailed report with identified performance bottlenecks and optimum cost effective solution.
Subscribe to my FeedBurner to get latest articles right in to your inbox, follow us @NotesOfGenius to get latest updates in NOG. Stay tuned!
Tags: #Blog #Performance #SEO