Hey guys! Today we have a guest post about some tips on how to speed up your website! He's currently working for an e-commerce website and one of his tasks is to make the site load fast. So enjoy reading below! ~ Mike
Website speed becomes an obsession of search engines like Google and one of the reasons is the rapid growth of mobile internet browsing. If you're working with the https://www.igloosoftware.com/product/integrations/org_chart_now/ (developers, designers, bloggers and students), it is now a requirement to have knowledge in making a website load fast, and our post for today will give you some ideas on why and how to achieve it.
1.0 A must read note from Google
"Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we've seen in our internal studies that when a site responds slowly, visitors spend less time there. But faster sites don't just improve user experience; recent data shows that improving site speed also reduces operating costs. Like us, our users place a lot of value in speed — that's why we've decided to take site speed into account in our search rankings. We use a variety of sources to determine the speed of a site relative to other sites."
2.0 Website Speed and Performace
2.1Pagespeed Insights - analyzes the content of a web page, then generates suggestions to make that page faster.
2.2Pingdom Website Speed Test - one of the most reliable website speed tester, you can test the load time of your page, analyze it and find bottlenecks.
2.3Yslow – is also a plugin that grades website and gives statistical information of your website performance.
2.4GTmetrix – provides result right away and suggest necessary improvement for your website
2.5Weboptimization - analyzes and gives detailed recommendations for site improvement as well as your web page speed report.
3.0 Image Optimization
3.1 Photoshop - when saving your photo choose the option "Save as for Web and Devices" (see Mike's post here for a more detailed instruction). Compare the result of your image to its original size; see also if the visual quality changed. In my example image, this is the result of my tests.
JPG, 60 quality - 32K
PNG-8, 256 colors - 37K
GIF, 256 colors - 42K
PNG-24 - 146K
3.2Yahoo Smush.It - "drag or paste your photo urls". It is a "lossless" tool, which means it optimizes the images without changing their look or visual quality.
Tip: Crop white spaces of images and other unnecessary pixels to reduce file size of your file.
4.1HTMLCompressor – is a small java library that minifies codes in html and xml by removing unnecessary characters and whitespaces without changing your codes.
4.3Prettydiff – Minify, beautify and compare your code online. This tool is used by W3.org and Travelocity.
Note: If you already use gzip, you don’t need to use some of the tools recommended above.
5.0 Performance Best Practices
tag. What it does is it loads the more important content of your page (like images, text, etc.) before the scripts, and that makes your page load faster.
5.2 Cache - Cache your web pages. This is very important specially to an e-commerce website and those sites that have a lot of visitors daily.
5.3 Comment Box – If you guys use comment box system, please lazy load it so that it will load only when the user reaches the lower part of your page.
5.4 CDN (content distribution/delivery network)
5.4.1 Some may not be familiar with Google CDN but take a moment to learn and take advantage to use the Hosted Libraries.
5.4.2Cloudflare - we used this in our ecommerce site and other sites for almost 3 years and so far, we are secured and it is free of charge but they also offer advance services with fee.
5.5 Use HTML5 codes that gives you a solution for faster page performance and integration
Our HTML5 sample:
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Note: Some tutorials for you to learn HTML5 are my favorite sites when I was starting w3schools and in advance learning html5 rocks tutorials.
6.0 Hosting Services
Check your Hosting Services if they provide you the best hosting solution and better web performance. You can test their website using the above tools. Shared hosting are usually the worst, especially if your website has a lot of visitors, you should have a dedicated server.
Thanks guys for reading my insights, I hope you get new techniques in improving your website speed or projects. Let’s help one another to become a better designer and developer.
Feel free to comment and subscribe to our tutorials.
https://www.codeofaninja.com/wp-content/uploads/2016/06/codeofaninja-logo-100x100-op-80x80.png00Mike Dalisayhttps://www.codeofaninja.com/wp-content/uploads/2016/06/codeofaninja-logo-100x100-op-80x80.pngMike Dalisay2013-11-10 13:06:002017-12-05 20:24:51Google said "The web should be fast": How to Optimize Your Website for Speed
Our website contains free web programming tutorials by Mike Dalisay.