Killer Tips to Improve Website PageSpeed Performance and Optimization ~ Coding Savvy
Coding Savvy FB Twitter Google

Killer Tips to Improve Website PageSpeed Performance and Optimization

PageSpeed is the amount of time it took web server to respond to the requests of the browser and how long it takes for it to serve all page Resource(Images, Audio, Videos, Flash Animations, e.t.c.), Content (HTML, CSS and Texts) and Meta Information (HTTP info i.e Author, Content-Type, e.t.c) to be fully downloaded and rendered by the web browser. Modern browsers have been optimized to handle page loading efficiently with time, They do have their own drawbacks but not as expensive as a slow webpage. A slowly loading webpage is not good for user experience, most users just click away or close the tab before the loading completes, These can make any potential buyer leave before the get to see any product on the website. PageSpeed improvement is a way of gaining more power above market competitors, People can browse through contents faster, make payments and review / comments. It encourage them so browse around more categories and purchase more items.
Killer Tips to Improve Website PageSpeed Performance and Optimization
Don't code today what you can't debug tomorrow.

This article of focuse on Improving and Optimizing PageSpeed Performance of your website, I am going to be sharing with you how fast loading webpages get users to stay and read / view more web pages of their website. Nobody like a slowly loading page on their browser, I can make users loose interest in the web page content and affect the entire website.
The loading time of any webpage is determined by the Server Response Time and Page Contents. HTTP state header information contribute little to the weight of page resource , Therefore it will not in the scope of this article.

How Loading Speed is Calculated?

Page loading speed is measured by the resource, contents and server response time of the website, There are other factors added as a way of making sure that your page loads on time and it's visible and appealing to users.
Some of these is the prioritization of the above the fold contents, Above the fold contents are the contents that are seen before the browser-cut( before scrolling down ) by user immediately the page is visible on user browser, This contributes a lot to user experience, Your page will look very different and unfamiliar to users when the CSS and JavaScript are not fully loaded, Only HTML elements are visible in this situation. The presentation of the above the fold contents of any webpage encourages users to stay and continue on that page.

How to Improve Page Loading Speed?

Loading speed improvement has many approach but the most popularly practiced and effective ways are:

Resource Compression, Minification & uglification

Minification is a method of compressing source codes mostly JavaScript, CSS and HTML by reducing the variable lengths, remove empty spaces and removing necessary semi-colons, spaces and new lines. Uglification is more like a security / compression in one package, It joins sentences in source code using comma, changes property access to dot-notation(object.property) instead of square bracket method (object['property']), All these to reduce number of characters, remove dead code and remove console logs. It also simplifies conditional statements (if) to negation method ( condition ? true : false), Boolean operations, constants, function declarations.
All these make source codes extremely difficult to read in return for better performance. Image can be compressed by shrinking images to use less bandwidth and load faster.
This is better done on PNG files, It is recommended to use PNG images in your web pages because it’s the only widely supported format that can store partially transparent images. In PNG (Portable Network Graphics) file, similar colors in your image are combined.
This technique is called “quantization”. By reducing the number of colors, 24-bit PNG files can be converted to much smaller 8-bit indexed color images. All unnecessary metadata can also be stripped. This is exactly what TinyPNG does, You can use TinyPNG to compress your images before upload to your webpage, They are no limited to PNG file JPG file are also compressible.
Gzip compression is enabled via webserver configuration, it's a method of compressing files for faster network transfers(between client and server).
 Enabling Gzip makes web server to provide smaller file sizes which load faster for your website clients (user browsers).
Gzip compression can be apply via .htaccess file, If you're no familiar with this read : Secure your web applications through .htaccess file

Asynchronous Resource Loading

Loading web resource asynchronously popularly known as async method is a way of importing web resource after page contents has been fully loaded, Using this method allow the importand parts of the page to load before they async resource kicks in. Not all resource can be loaded asynchronously but most resource can be loaded using this method. Part of things that slows down page loading are banners, images and JavaScript files.
Google AdSense and most popular ads company have their default loading style asynchronous.
To stop Scripts from consuming loading time make sure the are placed at the bottom of the page and are loaded asynchronously. Like weight JavaScript Libraries can be loaded in no time if their minified version are imported but there are some plugins that import necessary scripts, If your page has such plugin make sure they are loading resource with async method.
These can be done for audio, video and Images as well.

Lazy Loading

An alternate method is known as Lazy Loading method, Special thing about lazy loading is that contents are no loaded until they are needed.
Lazy loading is the same method Facebook timeline utilized.
 It works by loading contents as user is scrolling through them, This way loading time is reduced ad contents are not downloaded from the server until they are required.

Resource Caching

Caching is used in speeding up dynamic web applications by alleviating database load. It is treated as a temporary storage area for page contents, to avoid duplicate data query from the database. Cache store contents in the memory thereby making it easily accessible by the server. Resource like Scripts (JS, CSS) and database result can be cached for a certain period of time to make the page load faster for web server.
Most popular caching engine is memcached

Reduction of Page HTML Tags & Elements

Making use of less tags in pages is part of making the page portable and lite to deliver to clients, Large page contents will leade to more page tags.
It is recommended to paginate the webpage or add "redmore" button for longer contents so that page loading and navigation will be easier for visitors.

Use CSS above Images

CSS is liter than images, Try to use CSS instead of image whever possible. Things like background image, button image can take time to load. Try using CSS background style or color instead of images. If it necessary to use an image make sure it is compressed.

Conclusion

These recommendations is not a silver bullet, There are lots of thing that affect page loading speed, These are just the most common and recommended methods.  Try to test and understand things that are really slowing down your page then use one of the methods above to solve the problem.
Was this article helpful?
Thanks! Your feedback helps us improve tutorials.

You May Also Like...

No comments:

Post a Comment