Page Speed


Importance of Page Speed

Page speed is critical if a website is to be successful. Page speed is one of the top ranking factors that all the Search Engines uses. Good page speed is also essential for creating a good user-friendly experience. No one wants to wait for a page to load, And those spinning icons while your page loads are another bad idea. Slow page speeds mean high bounce rates as well as low average time on the pages. This will lower the websites conversions. Statistics show that for every second that a webpage delays, 20 views are lost, conversion are missed by 17%, and user-friendliness decreases by 25%. This means that if the page delays for just 3 seconds you could potentially lose 40% of new customers. These are alarming numbers that could have a tremendous negative impact on your business. That is why you must maintain a high page speed load time for your website

What is Page Speed?

Most of the time people confuse Page Speed with Site Speed. Site speed refers to the time it takes for the first byte of the information to show from the Web Server to your web browser. This is why a good hosting provider is also very important. Page speed or page load time is described as the time taken to display all the elements to the page. This includes scripts, images, files, and all content. Below are some of the ways you can increase page speeds and realize better page ranking

web site speed

Shrink and Combine Files

Minimizing and combining your websites files (CSS, JavaScript, and HTML) is also very helpful for increasing webpage speed. This is because reducing and combining files leads to lesser HTTP requests, which in turn means higher page speeds. You should consider eliminating any spaces, unnecessary commas and indentations from your HTML file. A thin webpage ensures fewer elements in a website and increases the speed of the page load. With code optimization you can increase page speed as well, This is combining files such as having only one or maybe two Java script and CSS files, formatting and removing all unused codes
We have listed a few programs that can help with this:
CSS Compressor - CSS compression
JS Compress - The JavaScript Compression Tool
JavaScript Compressor - Online JavaScript Compressor
CSS Nano - CSS compression
JavaScript Minifier - Online JavaScript Minifier/Compressor
CSS Minifier - CSS compression

Defer JavaScript Loading

To defer a file is to prevent it from loading until a later time. The larger the JS file, the slower the page speed. And most java scripts are very large. When the JS file is loaded last - other elements of a page such as CSS scripts and HML content will begin to display almost immediately. Making it appear that your site is indeed fast. The easiest way to do this is just move your JS coding tags from you "Head" to the bottom of your HTML page right before the ending tags:

<script src="/js/jquery.min.js"></script>
</body>
</html>

Optimize Images

For good page performance you need to consider the size of your images. They should not be larger than what they need to be. A newer but common web designing trick is to have a image twice as large as needed then with coding reduce the displayed sized. This has the effect of a very high resolution image, but greatly slows the page from loading. Is it worth sacrificing the loading time? We do not feel it is. Nether does Google. Ensure they are cropped to reliable size and are put in the right file format and compress them for the web. PNGs are the best option for graphics with less than sixteen colors. JPEGs are selectively best for photographs. CSS sprites are necessary for image template creations for individual sites such as buttons and icons. It works by combining all your images into a single larger image that will be loaded just once. This will automatically reduce the HTTP requests. To reduce image size Programs like Adobe Photoshop or a free open source like GIMP where you can retain your control over the image quality are a good choice. There are also free online image reducing Websites which do a very good job at image reduction
We have listed a few of those here:
I Love Img.com Resize JPG, PNG, SVG or GIF
Tiny JPG - JPG images
Compress JPEG - JPG images
Tiny PNG - PNG images
Resize Image - Resizer, compressor, crop, resize, JPEG, PNG, GIF
Resize Pixel - Crop, resize, flip, rotate, convert, compress
CSS Sprites Tool - CSS sprites tool - CSS sprite generator
Code Shack CSS Sprite Generator - Create CSS sprites from a sprite sheet image

Enable Website Compression

Gzip is a software application that allows your Web Server to provide smaller file sizes which load faster for your Website users. Enabling gzip compression is a standard practice today. One of the easiest and most common ways to enable compression is via the ".htaccess" file. The code below is a common example to add to this file...

<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/.*
</ifModule>

Notice how the above code has "exclude mime image". Instead of using Gzip on images, consider reducing all image size by other means. See "Optimize Images" above

Reduce Redirects

A URL redirect is a Web Server function that sends a user from one URL to another. A Redirect may also be known as an HTTP code 3xx redirect, URL forwarding, domain redirection and domain forwarding. Redirects may be used for a variety of reasons including: Change of Businesses name. A merger of Websites. To direct traffic toward recently updated page content. A new Domain Name. Landing pages. Each additional redirect leads to slow page performance and this could lead to SEO penalties and reduced rankings

Leverage Browser Caching

This is a cache mechanism that operates between the Web Server and the Users Browser. Either with the Server or with the computer of the visitor, or both. It can store copies of files (like html/php/css/js files, images, etc.) or strings of code for faster page loading instead of having to constantly request files from the Web Server. For your Websites the most effective way to "Cache" files is to " Leverage Browser Caching". But there are other ways to use caching to your advantage as well. Using one or multiple cache mechanisms for your website can greatly improve the performance of your web pages. You can Leverage Browser Caching for Apache Web Servers by adding small pieces of codes to the .htaccess file. Edit the access time and file types to your liking:
Mod_Expires (most commonly used option)

<IfModule mod_expires.c>
ExpiresActive On
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
ExpiresByType application/vnd.ms-fontobject "access 1 year"
ExpiresByType application/x-font-ttf "access 1 year"
ExpiresByType application/x-font-opentype "access 1 year"
ExpiresByType application/x-font-woff "access 1 year"
ExpiresByType image/svg+xml "access 1 year"
ExpiresByType text/html "access 1 hour"
ExpiresByType text/css "access 14 days"
ExpiresByType text/x-javascript "access 3 weeks"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType image/gif "access 2 months"
ExpiresByType image/png "access 2 months"
ExpiresByType image/jpg "access 2 months"
ExpiresByType image/jpeg "access 2 months"
ExpiresByType image/gif "access 2 months"
ExpiresByType application/pdf "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

Improve Web Server Response Time

Server response time is most of the time influenced by the amount of traffic your site is receiving, the resources that are being used by different pages, and the hosting solution being applied. It's advisable in cases where you consider improving your server response time; to look for performance bottlenecks such as slow database queries, slow routing issues, and inadequate memory and proceed to fix them all. The optimum time for a fast Server is 200ms response time

Conclusion

The suggestion listed above may not seem like it would have a big impact, but those few extra seconds that you loose will make a huge difference. You should also enjoy better ranking on Search Engines
Page speed improvement may seem like a mystical process. And if you feel it is beyond your knowledge consider hiring a Professional

Looking for a Tune Up? Try RSH Web Services 17 Point Tune-Up

Comments, questions or leave a reply

Contact Us Anytime


COMMENTS

John Briggs
Great and just what i needed


Susan V
I have to say it is really good.Thanks for posting and that tune up looks real good


Karen A
Excellent, Thanks for sharing


Anna B
Thanks for sharing. Best page speed article on the Internet today!!


Tweet  Share  Pin  Tumble  Email

Recent Blogs and Articles