thomasjbradley
commented
9 years ago I think the problem is just that there are too many images and resources. They seem to be all compressed properly and stuff, but because there's so many of them it's taking too long to download.
For the SVGs, we could try inlining them to get better performance.
That means, actually copying all the code from inside the SVG file and pasting it into your HTML were the <img> tag is now.
You can check out these videos of what we're covering next year for some pointers: http://learn-the-web.algonquindesign.ca/topics/advanced-svg/
@thomasjbradley
Thomas, I have changed photographs to icons in my food section, I have smushed, I have adjusted the size of my photos. I cannot for the life of me get this below 1s. I'm worried that it might be because I have too much written in my css or html... which I have tried limiting the number of classes but it doesn't work. The layout changes for the worst. I hope you can help. I have supplied by html and css.
''' <!DOCTYPE html>
Pour Boy
The pub with
the $5 pint
and the $8 dish
Local craft beer no more than $5
and all food no more than $8.
All day. Everyday.
Food
Brunch
Starters & Apps
Soup & Salads
Burgers & Sandwiches
Entrees & Pasta
Dessert
Beer On Tap
Wellington
Special Pale ale
Mill St.
Tankhouse Ale
Mill St.
Original Organic
Beau's
Lugtread Lagered Ale
Steam Whistle
Pilsner
Creemore Springs
Premium Lager
Blanche
De Chambly
Amsterdam
Natural Blonde
Sapporo
filler text filler text
Mill St.
Cobblestone Stout
Events
Sapporo Saturdays
Live
Music
Trivia
Tues & Thurs
Open Mic Sundays
Contact
Where to find us
495 Somerset St. W
Ottawa, ON
K1R 5J7
(613) 695-7687
info@pourboy.com
When we're open
Mon – Thurs
4 PM – 2 AM
Fri – Sun
1130 PM – 2 AM
We are cash only.
ATM inside.
'''
CSS
html { box-sizing: border-box; }
, ::before, *::after { box-sizing: inherit; }
body { font-family: 'Open Sans', sans-serif; margin: 0; }
h1 { background-color: #240a00; font-weight: 800; color: #fff; text-transform: uppercase; padding-top: 0.5em; padding-bottom: 0.5em; margin: 0; text-align: center; font-size: 2em }
nav li { float: left; margin: 0; width: 30%; text-align: center; }
.li { width: 20%; }
nav { float: left; overflow: hidden; width: 100%; }
nav ul { padding: 0; margin: 0; list-style-type: none; overflow: hidden; }
nav a { margin: 0; color: #e68d24; text-decoration: none; font-size: 1rem; padding: 0.5em 0em 0.5em 0em; text-align: center; text-decoration: none; text-transform: uppercase; background-color: #b6511b; display: block; }
nav a:hover { color: #4c1d0a; background-color: #e68d24; }
.banner { background-image: url("../images/store-front.jpg"); background-repeat: no-repeat; background-size: cover; display: block; margin: 0; }
.banner p { padding-top: 6em; padding-bottom: 1em; padding-left: 0.5em; padding-right: 0.5em; text-transform: uppercase; color: #fff; width: 100%; text-align: left; font-size: 2em; line-height: 1em; margin: 0; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)); }
.sub-banner { background-color: #b6511b; }
.p1, .p2 { margin: 0; padding-left: 1em; padding-right: 1em; }
.p1 { padding-top: 1em; color: #240a00; line-height: 1.2em; }
.p2 { padding-top: 0.7em; padding-bottom: 1em; color: #fff; text-transform: uppercase; }
h2 { text-align: center; text-transform: uppercase; font-weight: 800; color: #4c1d0a; margin: 0; padding-top: 0.5em; font-size: 2em; }
.brunch, .salads, .entrees, .starters, .sandwiches, .desserts { width: 50%; float: left; padding: 0.5em; text-align: center; }
.brunch img, .salads img, .entrees img, .starters img, .sandwiches img, .desserts img { width: 100%; }
.entrees, .desserts { padding-bottom: 2em; }
h3 { margin: 0; text-transform: uppercase; font-size: 1em; color: #240a00; line-height: 1em; }
.beer-on-tap { clear: left; color: #e68d24; padding-bottom: 0.5em; background-color: #240a00; }
.millst-organic, .millst-tankhouse, .millst-cobblestone, .beaus, .steamwhistle, .wellington, .amsterdam, .creemore, .sapporo, .blanchedechambly { width: 50%; float: left; padding: 1em; margin: 0; background-color: #240a00; }
.millst-organic img, .millst-tankhouse img, .millst-cobblestone img, .beaus img, .steamwhistle img, .wellington img, .amsterdam img, .creemore img, .sapporo img, .blanchedechambly img { width: 100%; }
.millst-organic h3, .millst-tankhouse h3, .millst-cobblestone h3, .beaus h3, .steamwhistle h3, .wellington h3, .amsterdam h3, .creemore h3, .sapporo h3, .blanchedechambly h3 { color: #e68d24; font-size: 1em; line-height: 1em; }
.millst-organic p, .millst-tankhouse p, .millst-cobblestone p, .beaus p, .steamwhistle p, .wellington p, .amsterdam p, .creemore p, .sapporo p, .blanchedechambly p { color: #b6511b; text-transform: uppercase; font-size: 0.8em; margin: 0; line-height: 1.3em; }
.sapporo p { color: #240a00; }
.cobblestone { padding-bottom: 2em; }
.events { clear: left; padding-bottom: 0.5em; }
.beer, .music, .trivia, .mic { width: 50%; float: left; padding: 0.5em; text-align: center; line-height: 1em; }
.beer img, .music img, .trivia img, .mic img { width: 100%; }
.beer, .music { padding-top: 0; }
.trivia, .mic { padding-bottom: 2em; }
.contact { background-color: #e68d24; clear: left; color: #240a00; }
.contact-content { background-color: #e68d24; text-align: center; }
.contact-content h3 { color: #b6511b; padding-top: 1em; font-weight: 800; padding-left: 1em; padding-right: 1em; }
.address { color: #4c1d0a; margin: 0; padding-top: 0.5em; padding-left: 1em; padding-right: 1em; }
.phone { margin: 0; padding-top: 0.5em; padding-left: 1em; padding-right: 1em; }
.email a{ text-decoration: none; color: #fff; margin: 0; padding-top: 0.5em; padding-left: 1em; padding-right: 1em; }
.contact-content img { width: 100%; margin: 0; padding: 0; }
.contact-content h4{ color: #240a00; text-transform: uppercase; padding-top: 0.5em; margin: 0; padding-left: 1em; padding-right: 1em; }
.hours { color: #4c1d0a; margin: 0; font-weight: 800; padding-left: 1em; padding-right: 1em; }
.atm { text-align: center; color: #fff; text-transform: uppercase; margin: 0; padding-top: 1em; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; }
.social { background-color: #e68d24; display: inline-block; width: 100%; }
.social a{ float: left; margin: 0; width: 25%; background-color: #e68d24; display: inline-block; text-align: center; padding: 0em 1em 0em 1em; }
.twitter, .instagram, .facebook, .tumblr{ float: left; padding: 0 0.5em 0 0.5em; margin: 0; overflow: hidden; background-color: #e68d24; }
footer { clear: left; background-color: #240a00; padding: 1em; text-align: center; margin: 0; }
footer a { text-decoration: none; color: #e68d24; }
footer p { color: #b6511b; margin: 0; padding-top: 0.5em; }