Simple way to speed up your site
- Thread starter brandonbaker
- Start date
IMHO having <li> instead of <img> tags allover the code might upset a panda or might be rated negatively from the Google algorithms in terms of onpage seo.
Using <li> tags as a design element just seems somewhat wrong to me.
But at the end, only an A/B test would eventually tell.
Page speed. One of my favorite subjects 
TinyPNG Rawx, I use pngyu now (open source windows prog). I've noticed alot of people dont know when to use PNG/JPG. Use JPG for photos snapped with a camera, PNG when you need transparency or digital images with limited colors. If you have an image with 1-10 colors you get a huge benefit using png. When using tiny-png/pngyu go ahead and save as png-24.
For JPG's make sure to save as progressive and in photoshop the quality changes at qualities ending in 1 or 6 for some reason. Huge JPG's can sometimes go down to 21 quality. Sometimes adding a 4-pixel (black, transparent,\n(ewline), transparent, black) as a screen-overlay will give you the ability to lower your JPG quality even more without looking shitty.
Progressive JPG's usually don't make your jpg's smaller, it makes the JPG's appear to load quicker to the user, which is far more important than the seconds you measure for page-load.
Another great tool that is surprisingly difficult to find anything that works like it, is Dust-me-selectors (firefox addon). One of the main issues with this tool is that I have to run it on Ubuntu in a VMWare to get it to work, but it will crawl a site and remove all the unused CSS. It's a great way to remove all the Bootstrap CSS etc that you're not using, and there is a shitload of it. Because CSS is essential to render pages, its a high priority issue and a huge benefit to do do this.
Another easy win for page speed is to utilize the CDN's for concurrent loading of course and order your <head> like this
1) CDN Css / Fonts
2) Local CSS
3) Favicon
4) JS just before the </body>, not blocking the render. (sometimes you need to make exceptions)
This won't improve your page-load speed, but it will improve your render speed which is far more important to users.
If you need a CDN and cant find/rely on one, you can actually make your own concurrent downloads just like a CDN by using subdomains.
Not having a favicon or robots.txt do actually impact page speed (or did), 404 errors are costly...
Other quick and easy wins for page speed are in your apache config file:
And .htaccess:
Make sure you don't gzip images, this will slow your site. Ive seen large retarded ecommerce hosts gzip your images by default like n00bs. If you minify everything, gzip is still a benefit as it is lossless compression.
W3C validate your sites. Once you've done this 10 times you tend to write W3C valid script for the most part. If your shit is valid, the browser will render your pages in Compliance mode instead of Quirks mode which reduces a shitload of math the browser is required to do to render a page. Compliance mode understands that your page meets standards and it knows what to expect, Quirks mode - which all of your competition and most sites in general are subject to, assumes some things are done wonky and as a result does lots of recalculation to place elements around the page. This usually isnt a fast process, do it last. At the very least, give your images a width and height attribute. BTW - This will only give you milliseconds on a desktop computer, idk about mobile.
I've met a ton of careless, reckless people that don't think milliseconds matter. I don't know what they base that assertion on. If you're not convinced via your own logic, this is a good read:
Research Blog: Speed Matters
Think of it this way. Your biggest whale could be getting a 1g connection on 1/3rd battery in a rural area 5000 miles from your server in a lightning storm. "On this team we claw with our fingernails for those inches, because we know in the end, thats going to make the fucking difference between winning a losing" - Any Given Sunday
TinyPNG Rawx, I use pngyu now (open source windows prog). I've noticed alot of people dont know when to use PNG/JPG. Use JPG for photos snapped with a camera, PNG when you need transparency or digital images with limited colors. If you have an image with 1-10 colors you get a huge benefit using png. When using tiny-png/pngyu go ahead and save as png-24.
For JPG's make sure to save as progressive and in photoshop the quality changes at qualities ending in 1 or 6 for some reason. Huge JPG's can sometimes go down to 21 quality. Sometimes adding a 4-pixel (black, transparent,\n(ewline), transparent, black) as a screen-overlay will give you the ability to lower your JPG quality even more without looking shitty.
Progressive JPG's usually don't make your jpg's smaller, it makes the JPG's appear to load quicker to the user, which is far more important than the seconds you measure for page-load.
Another great tool that is surprisingly difficult to find anything that works like it, is Dust-me-selectors (firefox addon). One of the main issues with this tool is that I have to run it on Ubuntu in a VMWare to get it to work, but it will crawl a site and remove all the unused CSS. It's a great way to remove all the Bootstrap CSS etc that you're not using, and there is a shitload of it. Because CSS is essential to render pages, its a high priority issue and a huge benefit to do do this.
Another easy win for page speed is to utilize the CDN's for concurrent loading of course and order your <head> like this
1) CDN Css / Fonts
2) Local CSS
3) Favicon
4) JS just before the </body>, not blocking the render. (sometimes you need to make exceptions)
This won't improve your page-load speed, but it will improve your render speed which is far more important to users.
If you need a CDN and cant find/rely on one, you can actually make your own concurrent downloads just like a CDN by using subdomains.
Not having a favicon or robots.txt do actually impact page speed (or did), 404 errors are costly...
Other quick and easy wins for page speed are in your apache config file:
And .htaccess:
Make sure you don't gzip images, this will slow your site. Ive seen large retarded ecommerce hosts gzip your images by default like n00bs. If you minify everything, gzip is still a benefit as it is lossless compression.
W3C validate your sites. Once you've done this 10 times you tend to write W3C valid script for the most part. If your shit is valid, the browser will render your pages in Compliance mode instead of Quirks mode which reduces a shitload of math the browser is required to do to render a page. Compliance mode understands that your page meets standards and it knows what to expect, Quirks mode - which all of your competition and most sites in general are subject to, assumes some things are done wonky and as a result does lots of recalculation to place elements around the page. This usually isnt a fast process, do it last. At the very least, give your images a width and height attribute. BTW - This will only give you milliseconds on a desktop computer, idk about mobile.
I've met a ton of careless, reckless people that don't think milliseconds matter. I don't know what they base that assertion on. If you're not convinced via your own logic, this is a good read:
Research Blog: Speed Matters
Think of it this way. Your biggest whale could be getting a 1g connection on 1/3rd battery in a rural area 5000 miles from your server in a lightning storm. "On this team we claw with our fingernails for those inches, because we know in the end, thats going to make the fucking difference between winning a losing" - Any Given Sunday
You use <li> tags when defining a list. You actually use the <i> tag for indicating the fontawesome icons which is perfectly acceptable. If you're using SVGs, sprites or otherwise, you're going to want to use <object> in your HTML as <img> is less versatile anyway http://css-tricks.com/using-svg/. This is pretty much the norm now and I really can't see this having any negative impact on your search results.
There are other ways to insert the icons in classes using content: "\f006"; to make a star for example, which you could put in a span, or use before: or after: to position the icon in front of or behind another element, which works pretty good in some scenarios. See the examples here Font Awesome Examples
Essentially, using bitmap graphics for things like icons is going the way of the dodo bird with preference towards SVGs, since they tend to be smaller and can be scaled without any loss of quality, which makes them more appropriate for responsive site design.
not good enough, google still complain after kraken.io it, plus they set free file upload limit to 1 mb
if you want google to stop complaining, use jpegtran, however it is command line base and you need to write a script if you want to compress everything in a folder