By increasing your website speed, you can: increase user experience, have higher conversions, promote engagement, and generate even higher search rankings.
Things to consider
1) Eliminate render-blocking JavaScript and CSS in above-the-fold content2) Optimize images
3) Leverage browser caching
4) Reduce server response time
5) Minify CSS
6) Minify HTML
7) Minify JavaScript
Eliminate render-blocking JavaScript and CSS in above-the-fold content
This means that your HTML references a blocking external JavaScript file in the above-the-fold portion of your page.JavaScript needed to render the above-the-fold region should be inlined, and JavaScript needed to add additional functionality to the page should be deferred until after the above-the-fold content has been delivered.
Generally, the bulk of the JavaScript code handles user-initiated events occur after the page is loaded.
In order to defer loading of these JavaScripts insert a JavaScript event listener in the head of the containing document that forces the external file to be loaded after the onload event.
I recommend adding a very simple scripted DOM element. Here’s an example code that Google recommends.
<script type="text/javascript">
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
If you are using a JavaScript library (like jQuery) it can be safely added after the above-the-fold content is rendered.
Optimize images
Keep your image sizes to a minimum to reduce the amount of time a person waits for it to load. Formatting and compressing images can save many bytes of data. You can use Compress Now, an online image compressor.Leverage browser caching
Use .htaccess to cache files.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
Reduce server response time
Load your CSS first and your JavaScript last.
<!DOCTYPE html>
<html>
<head>
<title>RRpowered.com</title>
<style type="text/css">
/*CSS goes here*/
</style>
<script type="text/javascript">
/*JavaScript*/
</script>
</head>
<body>
Body content here
</body>
</html>
Use Gzip to compress files
How to enable Gzip on your server:
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
Make Fewer HTTP Requests and avoid CSS Expressions.
Minify CSS, HTML, JavaScript
- For minifying HTML, you can use an online compressor called HTML Compressor
- For minifying CSS and JavaScript, use YUI Compressor
Source From: http://www.rrpowered.com
No comments:
Post a Comment