The Keys to A Lightning Fast Web Site
If Your Web Site Loads Faster Than the Competition, You Can Climb Up the Google Rankings
Pay close attention to this one. A lot of websites are coded in Word Press. Word Press is a popular program because it essentially allows a person with no HTML skills to "click and build" a website, choosing colors, fonts, layouts, images, background, etc, and it's all automated. Word Press also has different types of templates, each with different formats. Some formats have different sizes of columns, or size of masthead, or footer links vs sidebar links, top navigation vs navigation below the masthead, etc.
Any Automated Website Builder is Likely Slow Loading
Because more than 50% of your site's traffic may be coming from mobile phones, this is why it is extremely important that your website load quickly. On a mobile browser, or even a desktop computer on a slower connection, if your site doesn't load within a short period of time, a user is likely to hit the back button on their phone to return to the search results and then click on a different site that shows up in the rankings.
Wow, just like that you just lost a possible customer. What if that's happening to 80% or more of your visitors trying to access your site from a mobile phone? While you might see traffic to your site, and assume it's ok, it's possible that those traffic numbers are only people on desktop computers and you're missing a good portion of those on mobile phones who may be your best customers.
Dangers in Google -- Your Ranking Can Drop If Your Site Loads Slowy
Finally, if Google sees that people are hitting the back button when clicking on your listing in the search results, Google may conclude that your site isn't serving up good content, thus the reason people are hitting the back button so quickly rather than staying on your website.
Are You Experienced With HTML? It's Time for Mobile Optimization
Tips for Web Designers for Boosting Google Rankings
This next bit is only going to make sense to people who have a grasp of HTML and have some experience building web pages from scratch. Though it's not a complicated process, what I say next may seem like Chinese to people who have never coded before. If that's you, and all you know is automated "click and build" website programs, then the thing to do is to find a professional HTML designer, preferably a freelancer vs a professional company (unless you have the money to spend), who can show you several samples of attractive, mobile optimized websites that they have designed.
Test Web Page Load Times Using Free Online Tools
Then, take one of those website URLS and go to these two websites to test how fast they actually load on browsers as measured by Google's Page Speed Test Tool
Test If A Web Page is Coded to "Best Standards" to Ensure It Loads on the Most Browsers
If you test some of these sample websites you've been shown, and they come back with extremely fast ratings, then you may have found a good web designer who knows how to code fast sites. Though these speed ratings are a good indication you may have found your guy or girl for the job, there is one more test you should do to see if your web person is coding to "best standards." This free HTML tool is a Code Checker
, and will tell you if there are any errors within your coding.
Even with some minor errors, a website may work ok. But, to be on the safe side, and because it's impossible to test your site on every smart phone and desktop browser on the market, it's best to fix all reported errors in a web page's code. Once you've done that, your site now stands (or should now stand) on the greatest chances of successfully loading on every browser out there.
Use Simple, Clean CSS For Fast Loading Web Pages
My advise is to use the absolutely simplest CSS coding as possible, using div widths that automatically stretch with each browser so that your site is "mobile optimized" even though it's designed for a full size desktop computer. The less "media queries" you use in your CSS, that hide or change the shape of divs, fonts, and images, the better. (Media queries are add-ons to CSS coding to make a website "responsive" and that typically are found at the bottom portion of a CSS; they tell the webpage to do different things based on different screen sizes.)
Use Short Class and ID Names within Your CSS
At the same time, when naming divs
, give them super short names such as class="b1" rather than class="top-masthead-15." By the time you've completed the CSS for a webpage, it will be a lot shorter and cleaner with short class or id names.
Use classes as much as possible instead of using ids. That way you can effectively reuse the same classes elsewhere on the page without the need to create additional CSS commands, shortening the amount of code needed for your web page -- and ultimately, being one more tool to help your web page load faster. (There are several tools that are available to speed up a web page's load time; if you use every tool available, now you can have a truly-lightning fast loading web site. Further down I discuss additional tools I use, and how you can too.)
According to web standards, "best practices" HTML coding calls for only 1 id per page. So if that is the case, then for coding "best practices" we should use classes, and then repeat the use of those classes as much as possible in the code, rather than create a new id for every portion of your page.
Have an Extremely Long Article? Compress the "White Space" Within the Code
If you look at the HTML code of a webpage, and see a lot of white spaces, line breaks, etc., even though it's not a lot of data it still adds to the size of the web page in bytes that a browser has to load over a mobile or land-base line. If you have an HTML editor, learn how to use the "Find / Replace" feature that allows you to tell the editor what to look for in the code, and what to replace it with.
You can do this across an entire website with "Extended Replace", if your HTML editor has that feature (for me, and the extremely large sites I have worked on over the years, "Extended Replace" is an invaluable tool for being able to make updates across an entire website in just a few short minutes).
"Extended Replace" is a lot more than just a tool for deleting white space. You can use it to find entire blocks of code and change these blocks across the website into new blocks of code. Before you know it, the content may be the same, but the entire look and format of your website has been updated and changed entirely.
Want Fast Web Design? Learn How to Code From Scratch
How do you learn how to code from scratch if you've been using HTML software that does a lot of the coding for you? Get yourself an inexpensive HTML Editor like "Coffee Cup" and practice, practice, practice building web pages from scratch. You will have full control over the layout of your web page and be able to do things that give you more ability to enhance a web page's speed then otherwise.