To be completely honest it is very hard to find all the fast website in the world and compare them to figure out which one is the fastest but I can guarantee you that this one is surely one of them if not the best one.
Just reload the page and see, but don't blink or you will miss it.
This website is as fast as the fighter jet above and makes sonic boom when it breaks the average website speed barrier. What? didn't you hear the sonic boom when it was loaded on your browser :) that's because I attached a suppressor at the end of the engine muffle so you don't get disturbed by all that noise (see I told you it will be user friendly too).
You don't have to trust blindly. I insist you check the performance of this site on various website speed meter out there. Or do whatever research you wanna do to find out. Here, let me save you some time which you will otherwise spend searching on google.
This is how most average people make their website fastest.
Buy a really cool wordpress theme with lots of image slider, custom fonts, background images, parallax and lot's of other cool graphic design and animation effects.
Modify it to their needs and add all the contents, images and animation effects they can find for their site.
Add all the plugins they can find that works with wordpress.
Add all sort of analytics and tracking technology available to collect viewers personal info, record their behavior and treat them like a lab rat.
Put third party advertisement and adlinks all over their webpage (sometime more than actual content).
Make their webpage weight at least 5MB or more.
Activate the WP ROCKET plugin and their website fly like a rocket (hence the name WP ROCKET).
So what do you think. Am I right or am I wrong?
I am going to explain step by step how to make a website really fast.
Don't bother using cms like wordpress, joomla, drupal or any others.
Start from scratch. Don't use any template or boilerplate.
Create a new txt file, name it and change the extension to .html to make your nice and clean website.
Open the html file on your favourite text editor and start coding. If you want some awesome code editor here is the link: VS Code, Atom. If you don't know how to code then learn here: W3schools, Tutorialspoint or MDN.
Start writing all the html tags that is necessary to put you content and then put your content in it. Don't write a single tag that can be removed and make the site work.
Think of a clean and straight forward code structure for your website which will save space and help you make the site responsive for all the devices.
Then start writing css to style your website and don't write css code that overwrite each other unnecessarily.
Don't use any unnecessary images as your background.
If you have a lot of images which is absolutely necessary then you should not use base64 string method to embed your images rather you should use webp converter tools like Webp-converter or Jpg-to-webp to convert your previously resized and compressed image to even more compressed .webp version and link it to your html file. Then take ImageOptimization test.
If it is possible use svg instead of image and png icon. Here is an awesome svg editor that I used to create the jet plane above, Inkscape.
If your svgs are too big in size and there's no way you can compress it anymore you should not embed it into your html file rather link it to your html file.
Use default font if it doesn't hamper your sites beauty and legibility. Some nice default fonts: Segoe UI, Helvetica, Arial, Ubuntu, Tahoma, Verdana.
But if you must use any custom font choose the font file with only the required glyph and use .woff2 or the most compressed format available.
Use Fontforge to edit your font file as required or make your own font.
If the font you choose are small enough then convert it to base 64string with GiftOfSpeed and embed it into your html file otherwise link to your file.
If you have any problem hosting and using font then you may use these external font delivery service in exchange of a bit delay and dependency. These are fastest and free: Google Fonts and Online webfonts.
Make your site responsive by using media query and html css code structure.
If you use favicon then embed it into your html file as base64 string.
Try to make as few HTTP request as possible by reducing extra files linked to your html file.
Make the size of the page as lightweight as possible (even 1KB counts!).
Use gzip compression to serve files from your server. Check if your site use Gzip Compression.
If it's proper, use a high quality domain and hosting service, it will make a very fast server response time and decrease the delay of the time to first byte and increase overall performance.
Use a quality CDN service to serve your static assets faster.
Everything of your website needs must go from your own server and do not use any third party elements. It will slow down your website speed a lot and poses a security threat (by injecting scripts).
Must not use any kind of analytics or advertisement (But if your site depends on it then put it on the side separated from the actual content, make it less obtrusive and load it after the main content loads).
If you site is a webapp then write the backend code NodeJs or PHP yourself and don't use any framework. Also implement a fast and straigth forward database structure.
Do not use element that are tend to change and break your site like bootstrap or fontawesome icon cause when they will change version or class name there will be element or icon missing from your site. Use CSS Shape Icon to make simple icon and svg editor Inkscape to make complex icon.
Upload your final html file to your server to make it live and check if everything is working or not.
And the last check the speed of all the pages on your site with Experte to make sure that your site performs excellent!
Thats all. This is how you make your website fastest.
Here are the steps you should follow to make your site user friendly.
Don't use the whole width of the display for desktop. Instead center it a little bit so the user don't have to rotate their head or eyes and can read comfortably. And for mobile, use the whole screen.
Choose a little bit dim background color cause you maybe thinking that white paper and black text looks best, that's true but it's a bit different on display. White paper doesn't emit lights rather reflect lights that falls onto it. But display makes the light itself so when it is completely white it emits so much light that may feel harsh to your eyes.
You can use texture as your background to make your site more user friendly. But choose carefully otherwise it may look ugly or make your site heavier. My favourite: Transparenttextures.
Choose a clear and highly legible font. You should give more importance to readability than fancy design to give your viewer a nice comfortable reading experience. My favourite: Muli, Montserrat, Red Hat Display, Open Sans, Mukta, Roboto, Droid Sans(condensed).
Use proper gap between heading, pragraph, lists and other elements (not too much and not too less).
Use a line height on which every line will be seperate from each other and looks beautiful. Use letter spacing and word spacing if it make things more beautiful than the default.
Use white space carefully to make a comfortable reading environment.
Do not bother viewers by advertisement and popups.
Some people like to read in dark environment, so check your site on Dark Reader and make everything works.
Make your site responsive so mobile and tablet user can use it too.
This is how you make your site user friendly.
To let the plople know that they are changing the purpose of websites. Like they make their site in a way that they think people visit any website to see cool graphic design and not to get the information they need. Question: how many time did you search for 'website filled with graphic design' or 'most beautiful website'?
This site has almost everything that an average website has like: heading, subheading, lots of paragraph, hyperlink, ordered list, unordered list, button, picture, icon, it even uses a highly legible custom font (Muli), optimized for Dark Reader, fully responsive that it will fit any kind of device not just mobile while weights only under 50KB and loads completely under 300 millisecond average. I can even add a sticky menu with logo and menu items on top with just 5KB more (but this page doesn't need them). How about I use bootstrap to make this page? Then I thought I can make 4 of this page under the weight of bootstrap.min.css (118KB) and bootstrap.min.js (36KB) total 154KB (so just to add the framework I have to waste 154KB of space and bandwidth and 2 extra http request).
This proves that if the owners or developers of all those site which weight more than 5 or 8 megabyte (wordpress site in most case), wanted to make their site faster then they could cause theres a lot of room for that but they just don't care about the speed and user friendliness, they only care about fancy graphic design and fill their website with lot of completely unnecessary background images, graphic stuff, amimation effects and lot's of frameworks.
And even if a framework can save development time should you use it then? What do you value more? Your developers time whom you hired by spending your own money or the visitors (customers) time who actually spend money on your site and make you money? Cause If you are going to save develpment time by using framework that will make extra delay on the users side and force them to wait before they can actually see your content and buy them. Does that make sense? How about some calculation. If your site gets 10000 views everyday and you make 3 second delay on each time your site loads then how much time are spend on a year? It is more than 126 days! And how much development time did you save by using framework? I guess it's not more than a day or two, right? So you see where the visitors time should be given more value your are doing the exact opposite.
Just think about those cool looking loading icon spinning round and round and round and round . . .
This site was built with the intention of being the fastest website in the world while contains an amount of content that an average website has. And this site will also tell you how you can make your site fast and user friendly too (but please do a bit research about your requirment and situation before applying these technique to be on the safe side).
While I made this site to be the fastest, I still cannot guarantee that this is the fastest for some reason. Although the speed and performance of this site can still be improved by a lot, like spending a lot of money and buying premium domain, dedicated server, cdn and more. But this is as far as I could go without spending money (by hosting on this awesome Neocities).
All the links that are in this site are just for showing you some definition or helping purpose and none of them are paid links or advertisement links. This site will not run any analytics on you and will not collect your personal info or install any cookies on your device or force you to agree with tons of rules and conditions.
Hi, I am Ibnul Alam. I am a professional web developer. This site is designed, developed and published by me and I reserve all the rights.
If you have found any error and want to notify me or have any questions, suggestions or want to hire me for your work please contact me, or if you like to see my other works then visit my portfolio website.
Thanks for visiting. Thats all folks!
Made by Ibnul Alam. Copyright © 2020 All right reserved.