I can’t count how many times I’ve visited sites through Google search that seem to take forever to load. Usually I end up leaving the page and looking for information elsewhere. This is a serious issue! If it irritates me, then what’s to make me think it wouldn’t irritate others. Let’s face it, No one wants to wait for a half an hour while your webpage loads! You need a fast, well functioning, simple to navigate website these days, otherwise your traffic will drop to nothing, and search engines will rank you accordingly. In fact, Google has now stated that “page speed” is considered a factor in ranking your site and pages altogether.
What can you do to speed up your site? First we need to clear up some old myths about web design that can negatively affect how fast, and how well you do your job as a web designer, as well as what is considered to be best practices, and what is not. I’ve been hearing for years how web designers and others swear that CSS must be placed in an external file and linked to from your HTML page. The thought was, “never place CSS directly in your webpage’s!” I couldn’t’ disagree with this more. Pages that have their CSS included in the head section of the document are going to load faster, no matter how you look at it, since the browsers preprocessor doesn’t have to fetch an external file.
Sure, there are some cases where you may want to link to an external CSS file, such as having a website with various sections, in which each sections pages have the same underlying layout. In this situation it would make more sense to link to an external CSS file. However, just because you have a section of your site in which each page has the same layout, the content of those pages may vary, and some pages may require differentiated style information in order to place your content properly within those pages. Let’s say you have 10 pages in one section, but 2 of those pages require additional formatting because of fonts, images, charts, etc. What would you do?
Simply put, if your site is very large (say 500+ pages), then yes you should consider external CSS for your pages, but if your site is only 10 or 20 pages, using external CSS could make your job as a web designer a whole lot harder than it needs to be. Theres one more benefit to using internal over external CSS, pages are easy to edit since all the code for the entire page is all in one place, within the page itself! Imagine trying to edit 500 web pages, along with 45 external CSS files that link to these pages. In order to edit a single page you would have to edit 2 documents instead of just one in many cases, and risk breaking every other pages formatting. In my opinion its always best to place CSS directly in your files for those smaller sites, not externally.
Even if you are using media queries to develop adaptive web design properties for your pages, each page will load faster having the queries embedded directly on the page, vs linking to them externally with "@import". This website has multiple sets of media queries per page and scores as being 94% faster than other websites on the internet as measured by Google "page speed insights". Using "@import" on the other hand will slow things to a crawl when parsing your pages if you are using multiple declarations of them. "@import" allows for a minimal amount of code on the page (just the resolution and link to the external file associated with that resolution), unfortunately the "@import" is slower than dirt, and so is using the link tag as well. To get your pages to load the fastest, put all your code directly on the page.
What about graphics? Graphics are cool, but they can also be your enemy. We all want to put cool graphics in our webpage’s, but we all need to understand that large image files can really slow things down. First its best to figure out the original size and resolution of the image files you are working with. In windows just right click the file and select properties, then select details and scroll down to view resolutions and dimensions for your files. The information will include the dimensions in width and height of your image files, as well as your current resolution measured in DPI (dots/pixels per inch). An image file that is 96 pixels per inch is a lower resolution file that will load faster in web pages as compared to higher resolution image files.
Image files that are upwards of 300 pixels per inch are generally going to be much higher quality, but will also take longer to load. Honestly, 96 DPI images look choppy on screen and tend to strain the eyes. If you want to change the size and resolution of your images, you can do this easily with "Pain.net", which is a totally free graphics editing program that has even more plugins than Adobe’s photoshop. Infact, I find it to be much easier to work with than photoshop altogether. Open an image file in paint.net, click image, and you will see a drop down menu appear. Now click resize, and you can see the current DPI and resolution for the image you are currently viewing. From here you can change your DPI and resolution settings to what is necessary for you given webpage. If you want to load images faster, then select .jpg when saving your image files. Jpegs are by default 16 bit graphics files, and are the standard on the net today. If you need better quality graphics you can save your image files as .png which are higher quality graphics, but at the cost of more loading time. Portable Network Graphics (.png), are 24 bit graphics by default, and converting them to jpeg will truncate them down to 16 bits, creating a smaller file size, and are better for displaying graphics quickly to users as your pages load.
What else can I do with images to speed up page load times? You can compress your graphics files down to a smaller size using various utilities available for free on the internet. Consider using PNG Gauntlet , this image compression program is the easiest to use of all of them. You can also use Jpegclub.org a lossless jpeg file compression utility to compress your files making them much smaller, while not losing any quality since it is lossless! For portable network graphics files try Optipng, which compresses .png image files also with lossless encoding. Now you have smaller image files that will load faster with your pages.
What about website apps? Sure, RSS feeds, social networking buttons and applications, animated graphics, and interactive menus all look cool, but then can also slow things down to a crawl. The trick here is don’t over do it! RSS isn’t necessary unless you plan on streaming duplicate content to your pages ( you should be creating your own content), in which search engines are going to give you an F grade for not producing authentic content anyway. Animated flash graphics are cool, but keep in mind, the use of flash files requires the Adobe flash plugin to be installed and working on the user’s PC. If flash isn’t functioning properly for any reason, those flash files will not render at all! Its best to stick with static images, and never use flash for banners or buttons! Also, flash files can be quite large, and they do tend to slow down page load times. Don’t use a content management system to create your pages! Sure, there are times when a CMS is a better choice, but they tend produce bloated and unnecessary code that will slow things down to a crawl! CMS's use a variety of techniques to produce webpage's, sometimes they create php or jsp pages that have "dynamic URL's" that are difficult for both humans and search engines alike to read and interpret, since they are usually riddled with percent symbols and other nonesense. Just know when it's necessary to use and when it's not.
If you do plan on using a CMS like wordpress or Joomla, make sure you create a sitemap so search engines can effectively crawl your site and find your links. Or, instead, you can use standard coding practices and learn HTML and CSS, then you can create more refined code for your pages that is simple for search engines to index, as we have done here at PCTECHAUTHORITY. Also, using standard coding you won't need a sitemap, since your pages aren't built on scripts and don't have any dynamic URL's. You can insert the apps and scripts you need directly into your pages, without all the bloated code! CMS’s get hacked constantly anyway, especially Joomla and Wordpress. They also tend to use “cookie cutter designs”, that everyone else and their grandmother has already used, nothing original about that. And last but not least, don’t put full blown social networking apps into your pages! I am not referring to facebook like, of Google plus one buttons either. I am referring to people attempting to basically install a full blow social networking program into their sites! Bad idea!
Whateverlife.com recently redesigned their entire website to include larger than life social networking applications that interact with god knows how many databases, and users. Too keep a long story short, their site has crashed several times in the last few months, and the fastest I’ve seen a page load was about over a minute, and in some cases almost 2 minutes to load a single page! Last I checked, their site is completely down now. Looks like they realized it wasn’t going to work out with all those programs running in the background. Lesson here? Build static pages! Search engines index HTML and CSS primarily, they care nothing about any scripts at all. Static in this sense means, just HTML and CSS, and a minimal amount of small scripts, say for a search engine or something built into your pages. Static pages load fast! They are your friend, and search engines love them too, because they’re easy to read for both engines and people. Stay away from CMS’s if you can and just stick to static.
Last, but very much not the least, what about hosting? Does this affect how fast my pages will load? Yes, it does! Shared hosting is usually fine for most websites, but larger sites should definitely consider a dedicated server to handle traffic, especially if you’re getting over 25,000 visitors a day. If the server can’t handle requests because its loaded to the core, your visitors could be dropped from the site altogether, pages could load very slowly for others, and your site could crash. Keep an eye on your sites traffic and everything will be fine!
Take into consideration the effects of having higher quality graphics on your site. Do you want better looking pages, or ones that load faster. Consider dropping the quality of page backgrounds, and raising the quality of say banner images, etc. Add functionality to your site, but don’t over do it. A few social networking plugin’s and maybe a search engine are fine and won’t kill your pages. Consider what effect your daily traffic has on your server’s resources, and upgrade to a better server when necessary. Once again, very important, “build static pages!” Stay away from content management systems if you can. We will be writing updated articles in the near future with other cool ways to speed up your website, thanks for reading, and check back soon.